See also translations.
Copyright © 2024 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
この仕様は、[HTML]要素のAccessible Rich Internet Applications (WAI-ARIA) 1.2およびDigital Publishing WAI-ARIA Module 1.0属性の使用に対するオーサリング規則(著者適合性要件)を定義する。この仕様の主な目的は、著者(つまりウェブ開発者)が使用する適合性チェックツールで使用するための要件を定義することである。この要件は、ホスト言語[HTML]の機能を補完または拡張するためにARIAを利用する、カスタムインターフェイスおよびウィジェットを含む、ウェブコンテンツの開発において著者を支援する。
この節は、公開時点におけるこの文書のステータスについて説明する。W3Cが現在公開しているリストとテクニカルレポートの最新版は、W3C technical reports index at https://www.w3.org/TR/で見つけることができる。
ARIA in HTMLは、[HTML]仕様のモジュールである。この仕様モジュールが参照するが明示的に定義されない、すべてのHTMLの機能、適合性要件、または用語は、HTML Standardによって定義される。
この仕様は2021年12月9日にW3C Recommendationになって以来、次の実質的な追加および/または修正が提案されている。
separator
role.img
element allowances to be based on if the element has an accessible name or not.address
and hgroup
element allowances per their updated mapping to the group
role.aside
element to allow the dpub doc-glossary
role.button
, input type=button
, input type=image
input type=reset
, and input type=submit
elements to align their allowed roles.s
element allowed roles to indicate use of role=deletion
on the element would be considered redundnat.aria-*
attributes and roles on summary
element.li
element role allowances in context to the element's ancestral relationship, or lack of, to a list element parent.search
element has been added.aria-hidden=true
on the body
element.figure
element role allowances to include doc-example
.aria-*
attributes on the datalist
element.aria-checked
is not to be used on elements that support the checked
attribute.none
and presentation
roles on nav
element.div
element when it is a child of a dl
element.combobox
role on button
element. Allow combobox
and checkbox
roles on input type=button
element.doc-biblioentry
and doc-endnote
roles on the li
element. These roles are deprecated in Digital Publishing WAI-ARIA Module 1.1.radio
role on img alt="some text"
element.none
and presentation
roles for wbr
element. Allow only aria-hidden
global attribute for br
and wbr
elements.group
role on section
element.link
and button
roles on area
without href
element.aria-hidden
attribute on the picture
element.文書のレビュアーは、文書内の特徴的なスタイルによって、candidate additionおよび/またはcorrectionsを特定できる。
Candidate correctionsは、文書でマークされている。
Candidate additionsは、文書でマークされている。
この文書は、勧告トラックを用いてRecommendationとしてWeb Applications Working Groupによって発行された。これには、以前のRecommendation以降の実質的な変更と新機能を導入する、candidate amendmentsが含まれている。
W3Cは、この仕様をウェブの標準として広く展開することを推奨している。
W3C Recommendationは、広範な合意形成の後、W3Cとそのメンバーによって承認され、ワーキンググループのメンバーから実装のロイヤリティフリーライセンスへのコミットメントを持つ仕様である。このRecommendationの将来の更新には、新機能が組み込まれる可能性がある。
Candidate additionsは、文書でマークされている。
Candidate correctionsは、文書でマークされている。
この文書はW3C特許ポリシーの下で活動するグループによって作成された。W3Cは、グループの成果物に関するあらゆる開示特許の公開リストを管理する。ここには、特許開示にあたっての指示も含まれている。特許について十分に知識のある人物が、仕様にEssential Claim(s)が認められると判断した場合は、W3C特許ポリシーの第6章に従い情報を開示する必要がある。
この文書は、2023年11月3日のW3Cプロセス文書によって管理される。
この節は非規範的である。
ARIAの使用を通じて、著者はネイティヴHTMLの現在の機能を超えるセマンティックスを指定できる。著者にウィジェットを作成する機会を提供したり、HTMLだけを使用しても不可能なネイティヴHTML機能に特定のアクセシブルなステートおよびプロパティを公開する機会を提供するため、これは非常に便利である。
たとえば、button
要素には、"押された"状態を公開するネイティヴHTML機能がない。ARIAは、著者にaria-pressed
属性を指定することで要素のセマンティックスの拡張を可能にし、コントロールの視覚的な提示と一致する聴覚UIを可能にする。
次の例で、button
要素は、ユーザーがウェブアプリケーション内の設定の状態を切り替えることを可能にする。aria-pressed
属性は、button
要素を強化するために使用される。"押された"状態のとき、その情報は支援技術のユーザーに公開することができる。
<button aria-pressed=true>...</button>
HTML自身では現在同等のネイティヴ属性が有効ではない一方で、特定のaria-*
属性が特定のrole
をもつ要素での使用を可能にする状況も存在する。
たとえば、HTMLには、無効なハイパーリンク(a href
要素)の直接的な概念はない。<a href="..." disabled> ... </a>
などの構成は妥当ではなく、支援技術に伝えられない。
この点についてARIAはHTMLから分岐し、明示的なrole=link
をもつ要素でaria-disabled
属性の指定を可能にする。もし著者がHTMLハイパーリンクでaria-disabled=true
を指定するなら、ユーザーエージェントはハイパーリンクを機能的に扱わないだろう(依然としてクリック可能/操作可能であろう)が、無効状態として支援技術に公開されるだろう。
同様に、select
の子孫であるネイティヴHTML option
要素はselected
としか設定できないが、明示的なoption
ロールをもつ要素は、同等のaria-selected
だけでなくaria-checked
属性も許可し、ネイティヴselect
要素の機能を超えるウィジェット/構成をサポートする。
残念ながら、ARIAとHTMLに機能のパリティがあるが、許容が分かれているこれらの状況では、ユーザーエクスペリエンスとまではいかないにしても、サポートの不整合をもたらす可能性がある。ARIAがHTMLによってサポートされていない機能を許可する状況では、カスタムARIAウィジェットとして代わりに実装することが著者そして最終的にはユーザーの最もよい利益となる。
次の例では、ハイパーリンクが無効状態にあると伝える必要がある。HTMLは、ハイパーリンクでdisabled
属性を使用することを許可せず、aria-disabled=true
を使用すると、ハイパーリンクが無効として支援技術に通知するが、実際には要素を無効にしない。ハイパーリンクを伝達して実際に無効にする最も効果的な方法は、a
要素からhref
を削除してプレースホルダーを作成することである。そうすることで、ARIAをこのプレースホルダーリンクに適用して、要素の意図されたロールとステートを伝達することができる。
<a role=link aria-disabled=true>...</a>
この節は非規範的である。
ARIAは、ユーザーに公開するために別のロールが必要な場合に、要素のロールを改訂または修正するのに役に立つ。しかし、ARIAを使用してインタラクティブな要素、たとえばbutton
を、一般的に非インタラクティブな要素によって公開されるロールで上書きしようとすることは、ユーザーや著者にとって最善になることはほとんどない。たとえば、見出しなど。
例として、以下では、button
要素でrole=heading
を使用している。これは許可されない。button
要素は、見出しロールに対するユーザーの期待と矛盾する既定の機能があるためである。
<button role="heading">search</button>
著者は、button
のデフォルトの機能および体裁が削除されたことを確認するために追加の手順を実行する必要がある。それでも、ユーザーがウェブページにどのよう関わるかによっては、要素の暗黙の機能を完全に抑制するには十分でない場合がある。たとえば、Windowsのハイコントラストテーマを有効にしたり、ブラウザーのリーダーモードでウェブページを表示したりする。
次の例は、明示的にrole=button
も提供されているbutton
要素を示している。"button"要素が既に暗黙のbutton
ロールで公開されているため、このロールの指定は不要である。実際のところ、この特定の冗長性は、マークアップをより冗長にすることと、このプラクティスが有用であることを他の著者に誤って知らせる以外に、予期せぬ副作用はないだろう。不必要なロールを指定することに問題がある場合の例については、3.3 副作用に気をつけるを確認のこと。
<!-- Avoid doing this! -->
<button role="button">...</button>
同様に、以下はfieldset
要素でrole=group
を使用し、main
要素でrole=Main
を使用する。fieldset
要素はrole=group
として暗黙的に公開され、main
要素はrole=main
として暗黙的に公開されるため、これは不要である。繰り返しになるが、実際には、role
値の宣言でASCII小文字を使用している限り、これが支援技術のユーザーに予期しない副作用をもたらすことはないだろう。 詳細については、4.4 ARIAロール、ステートおよびプロパティ属性の活字ケース要件を参照のこと。
<!-- Avoid doing this! -->
<fieldset role="group">...</fieldset>
<!-- or this! -->
<main role="Main">...</main>
次は、ul
要素でrole=list
を使用する。ul
要素はlist
という暗黙のリールを持つため、ロールを明示的に追加することは、一般に冗長であると見なされる。しかし、リスト項目の視覚的表示からリストマーカーが削除された場合、リストの暗黙のARIAセマンティックスを抑制するユーザーエージェントもある。一般に、要素の暗黙のロールの冗長な宣言は推奨されないが、このような特定の状況で、ロールを公開する必要がある場合、著者はロールを明示的に追加できる。
<!-- Generally avoid doing this! -->
<ul role="list">...</ul>
次は、summary
要素でrole=button
を使用する。これは不要であり、クロスプラットフォームの問題が発生することがある。たとえば、要素がその状態を正しく公開できないようにし、button
のロールを強制する。それ以外の場合はプラットフォームまたはブラウザーの特定のロールで公開されるかもしれない。
<details>
<!-- Avoid doing this! -->
<summary role="button">more information</summary>
...
</details>
Accessible Rich Internet Applications (WAI-ARIA) 1.2は、著者が使用することを意図しない多数のロールを定義する。これらのロールの多くは、著者によって使用されないことが明示される抽象ロールに分類される。次の例は、抽象select
ロールの妥当でない無効な使用を示す。著者は、代わりにcombobox
ロールを使用することを意図していたと思われる。
<!-- Do not do this! -->
<div role="select" ...>...</div>
ARIAはまた、より具体的な独自のARIAセマンティクスを持たない多くのHTML要素を備えた機能パリティを提供することを目的としたgeneric
ロールを定義する。たとえば、HTMLのdiv
やspan
要素などがある。ARIAは、その本来の目的がユーザーエージェントの実装者による使用であるため、著者がgeneric
ロールを使用することを推奨しない。
次の例では、generic
ロールを使用するよりもむしろ、著者にarticle
要素の代わりにdiv
の使用を助言する。HTML要素の変更が不可能な場合、article
の暗黙のロールを除去するために、presentation
またはnone
のロールを指定することが、代わりに受け入れられる。
<!-- Avoid doing this! -->
<article role="generic" ...>...</article>
さらに、ARIAのホスト言語のセマンティックスとの競合では、ステートおよびプロパティを公開するためのネイティヴHTML機能と、それに対応するARIA機能の両方を著者が使用する場合、ホスト言語の機能は、同じく使用される明示的なARIA属性よりも優先されることが明記されている。
たとえば、次の例において、著者はHTMLのinput type=checkbox
を使用し、かつaria-checked=true
を指定している。しかし、ユーザーエージェントはaria-checked
属性を無視することになっている。代わりに、ユーザーエージェントはフォームコントロールのネイティヴ機能に基づいて状態を公開する。
<!-- Do not do this! -->
<input type="checkbox" checked aria-checked="false">
ARIAは、支援技術のユーザーに対してHTMLの機能を公開する方法を変更するために使用できる、この変更は、HTMLの基礎となる解析および許可されたコンテンツモデルを変更しない。たとえば、div
は、著者にすべてのロールを指定するのを許可する。しかし、これは、HTMLが要素に対して定義された規則から逸脱した方法で要素を使用できることを意味するものではない。
たとえば、次の例では、著者がdiv
要素にlink
のロールを指定している。HTMLは、ハイパーリンク(role=link
として公開される)をp
要素の子孫にすることができるが、HTMLパーサーは、div
をp
要素の子孫にすることを許可しない。
<!-- Do not do this! -->
<p>
... <div role=link tabindex=0>...</div> ...
</p>
HTMLパーサーは、上記のマークアップを次のように変更して出力する:
<!-- The previous example's markup will render as follows -->
<p>...</p>
<div role=link tabindex=0>...</div>
...
<p></p>
<!-- Instead of a div, use a span. Spans are allowed descendants of p elements! -->
<p>
... <span role=link tabindex=0>...</span> ...
</p>
この仕様は、各HTML要素で指定できる許可されたARIA属性を示すが、この例は、たとえロールが許可されていても、そのロールが使用されるコンテキストによっては、レンダリングおよびアクセシビリティの問題が発生する可能性があることを示している。
以下の表は、HTML文書でARIAマークアップを使用するための、規範的な要素ごとの文書適合性要件を示している。さらに、HTML要素に適用される暗黙のARIAセマンティックスを特定する。これらの要素の暗黙的なARIAセマンティックスは、HTML AAMで定義される。
1列目のセルでそれぞれの言語機能(要素)は同じ行の2列目のセルで与えられるARIAセマンティックス(ロール、ステート、およびプロパティ)を意味する。各行の3番目のセルは、著者が要素に指定してもよいARIA role
値およびaria-*
属性を定義する。3列目のセルにすべてのrole
という用語が含まれる場合、すべてのrole
値を要素に使用してもよいことを示す。しかし、著者がこれらの要素で、要素の暗黙のロール、generic
ロール、またはARIAによって非推奨とされるロールを指定することは推奨しない。3列目のセルにロールなし
という用語が含まれる場合、著者は暗黙のARIAセマンティックス、またはHTML要素のネイティヴセマンティックスを上書きしてはならない。
WAI-ARIAは、禁止されたステートおよびプロパティを持つロールを特定する。これらのロールは、著者が特定のWAI-ARIA属性を指定することを許可しない。これらの暗黙のWAI-ARIAロールを公開するHTML要素はまた、著者がこれらのWAI-ARIA属性を指定することを禁止する。
名前付け禁止として特定される要素は、著者がaria-label
またはaria-labelledby
属性を指定してはならない要素である。ただし、その要素の暗黙的なロールが、著者由来の名前付けを許可する明示的なWAI-ARIAロールによって上書きされることを要素が許可している場合は除く。詳細については、4.1 要素に名前を付けるためのARIA属性の使用に関する要件を参照のこと。
暗黙のARIAセマンティックスに一致するARIAロール
および/またはaria-*
属性を設定することは推奨されないが、状況によっては、これらの属性を明示的に設定すると役立つ場合がある。たとえば、特定の要素のための暗黙のARIAセマンティクスを公開しないユーザーエージェントの場合などである。
次の表に示すように、Digital Publishing WAI-ARIA Module 1.0のrole
値を使用することは適合しているが、これらの値のセマンティックスを支援技術のユーザーに公開するための現在のサポートは、ほとんど存在しない。
HTML要素 | 暗黙のARIAセマンティックス(これらをマークアップで明示的に割り当てることは推奨されない) |
ARIAロール、ステートおよびプロパティの許容 |
---|---|---|
href をもつa |
role=link |
ロール: DPubロール: グローバル
注 リンクが"無効"としてプログラム的に伝達される必要がある場合、 href 属性を削除する。 |
href をもたないa |
role=generic |
そうでなければ、すべてのグローバル |
abbr |
対応するロールなし |
そうでなければ、すべてのグローバル |
address |
role=group |
そうでなければ、すべてのグローバル |
href をもつarea |
role=link |
グローバル |
href をもたないarea |
role=generic |
ロール: そうでなければ、すべてのグローバル |
article |
role=article |
ロール: グローバル |
aside |
role=complementary |
ロール: DPubロール: グローバル |
audio |
対応するロールなし | ロール: グローバル |
自律カスタム要素 | 著者定義の そうでなければ、 |
そうでなければ、すべての
そうでなければ、すべてのグローバル |
b |
role=generic |
そうでなければ、すべてのグローバル |
base |
対応するロールなし |
|
bdi |
role=generic |
そうでなければ、すべてのグローバル |
bdo |
role=generic |
そうでなければ、すべてのグローバル |
blockquote |
role= |
すべての グローバル |
body |
role=generic |
そうでなければ、 |
br |
対応するロールなし | ロール: 著者は、 |
button |
role=button |
ロール: グローバル |
canvas |
対応するロールなし |
グローバル |
caption |
role= |
そうでなければ、グローバル |
cite |
対応するロールなし |
そうでなければ、すべてのグローバル |
code |
role= |
そうでなければ、すべてのグローバル |
col |
対応するロールなし |
|
colgroup |
対応するロールなし |
|
data |
role=generic |
そうでなければ、すべてのグローバル |
datalist |
role=listbox |
|
dd |
対応するロールなし |
グローバル |
del |
role= |
そうでなければ、すべてのグローバル |
details |
role=group |
グローバル |
dfn |
role=term |
グローバル |
dialog |
role=dialog |
ロール: グローバル |
div |
role=generic |
そうでなければ、すべてのグローバル |
dl |
対応するロールなし | ロール: グローバル |
dt |
対応するロールなし | ロール: グローバル |
em |
role= |
そうでなければ、すべてのグローバル |
embed |
対応するロールなし | ロール: グローバル |
fieldset |
role=group |
ロール: グローバル |
figcaption |
対応するロールなし | ロール: そうでなければ、すべてのグローバル |
figure |
role=figure |
そうでなければ、 グローバル |
footer |
そうでなければ、 |
ロール: DPubロール:
そうでなければ、すべてのグローバル |
form |
|
Roles: グローバル 注 アクセシブルな名前が提供されていない限り、 |
フォーム関連カスタム要素 | 著者定義の そうでなければ、 |
そうでなければ、フォーム関連ロール:
そうでなければ、すべてのグローバル |
h1 ‐ h6 |
role=heading 、aria-level =要素のタグ名の数字 |
ロール: DPubロール: グローバル |
head |
対応するロールなし |
|
header |
そうでなければ、 |
ロール:
そうでなければ、すべてのグローバル |
hgroup |
role=group |
そうでなければ、すべてのグローバル |
hr |
role=separator |
ロール: DPubロール: グローバル |
html |
role=document |
|
i |
role=generic |
そうでなければ、すべてのグローバル |
iframe |
対応するロールなし | ロール: グローバル |
アクセシブルな名前をもつ
img 。 |
img が空ではないalt (alt="some text" )を持つ場合、またはアクセシブルな名前が別のimg 命名方法で提供される場合:role=img |
ロール: DPubロール: グローバル |
アクセシブルな名前をもたないimg 。 |
そうでなければ、 |
|
input type=button |
role=button |
ロール: グローバル |
input type=checkbox |
role=checkbox |
ロール: 著者は、 そうでなければ、グローバル 注 HTML |
input type=color |
対応するロールなし |
グローバル |
input type=date |
対応するロールなし |
グローバル |
input type=datetime-local |
対応するロールなし |
グローバル |
list 属性のないinput type = email |
role=textbox |
グローバル |
input type=file |
対応するロールなし |
グローバル |
対応するロールなし |
|
|
input type=image |
role=button |
次のロールは許可されるが、推奨されない: グローバル 可能であれば、著者は、 |
input type=month |
対応するロールなし |
グローバル |
input type=number |
role=spinbutton |
グローバル |
input type=password |
対応するロールなし |
グローバル |
input type=radio |
role=radio |
ロール: 著者は、 そうでなければ、グローバル 注 HTML |
input type=range |
role=slider |
著者は、 そうでなければ、グローバル |
input type=reset |
role=button |
|
list 属性のないinput type=search |
role=searchbox |
グローバル |
input type=submit |
role=button |
|
list 属性のないinput type=tel |
role=textbox |
グローバル |
list 属性のない、input type=text またはtype が欠損もしくは不正 |
role=textbox |
ロール: グローバル |
list 属性をもつ、 input type=text 、 search 、tel 、url 、email またはtype が欠損または不正 |
role=combobox |
著者は、指定された そうでなければ、グローバル |
input type=time |
対応するロールなし |
グローバル |
list 属性のないinput type=url |
role=textbox |
グローバル |
input type=week |
対応するロールなし |
グローバル |
ins |
role= |
そうでなければ、すべてのグローバル |
kbd |
対応するロールなし |
そうでなければ、すべてのグローバル |
label |
対応するロールなし |
そうでなければ、グローバル |
legend |
対応するロールなし |
そうでなければ、グローバル |
li |
そうでなければ、 |
親のリスト要素が暗黙的または明示的な そうでなければ、親のリスト要素が暗黙的または明示的な グローバル 著者は、非推奨のDPubロール |
link |
対応するロールなし |
|
main |
role=main |
グローバル |
map |
対応するロールなし |
|
mark |
対応するロールなし |
そうでなければ、すべてのグローバル |
math |
role=math |
グローバル |
menu |
role=list |
ロール: グローバル |
meta |
対応するロールなし |
|
meter |
role= |
著者は、 Otherwise, any global |
nav |
role=navigation |
ロール: DPubロール: グローバル |
noscript |
対応するロールなし |
|
object |
対応するロールなし | ロール: グローバル |
ol |
role=list |
ロール: グローバル |
optgroup |
role=group |
グローバル |
オプションリストで存在するまたはdatalist 要素で提案を表すoption 要素 |
role=option |
著者は、 グローバル |
output |
role=status |
グローバル |
p |
role= |
そうでなければ、すべてのグローバル |
param |
対応するロールなし |
|
picture |
対応するロールなし |
著者は、 |
pre |
role=generic |
そうでなければ、すべてのグローバル |
progress |
role=progressbar |
著者は、 そうでなければ、グローバル |
q |
role=generic |
そうでなければ、すべてのグローバル |
rp |
対応するロールなし |
グローバル |
rt |
対応するロールなし |
そうでなければ、すべてのグローバル |
ruby |
対応するロールなし |
グローバル |
s |
role= |
そうでなければ、すべてのグローバル |
samp |
role=generic |
そうでなければ、すべてのグローバル |
script |
対応するロールなし |
|
search |
|
ロール: グローバル |
section |
そうでなければ、 |
ロール: DPubロール: グローバル |
select (multiple 属性をもたず、かつ1 より大きい値を持つsize 属性がない) |
role=combobox |
ロール: 著者は、 そうでなければ、グローバル |
select (multiple 属性、または1 より大きい値を持つsize 属性をもつ) |
role=listbox |
著者は、 そうでなければ、グローバル |
slot |
対応するロールなし |
|
small |
role=generic |
そうでなければ、すべてのグローバル |
source |
対応するロールなし |
|
span |
role=generic |
そうでなければ、すべてのグローバル |
strong |
role= |
そうでなければ、すべてのグローバル |
style |
対応するロールなし |
|
sub |
role= |
そうでなければ、すべてのグローバル |
summary |
注 すべてではないが、多くのユーザーエージェントは、暗黙的なARIA role=button とともにsummary 要素を公開する。 |
グローバル それ以外の場合、著者は、すべての |
sup |
role=superscript |
すべての そうでなければ、すべてのグローバル |
SVG |
SVG AAMで定義されたrole=graphics-document |
すべての グローバル |
table |
role=table |
グローバル |
tbody |
role=rowgroup |
グローバル |
td |
祖先 祖先 祖先 |
祖先
そうでなければ、祖先 グローバル |
template |
対応するロールなし |
|
textarea |
role=textbox |
グローバル |
tfoot |
role=rowgroup |
グローバル |
th |
祖先 祖先 祖先 |
祖先
そうでなければ、祖先 グローバル |
thead |
role=rowgroup |
グローバル |
time |
role=time |
そうでなければ、すべてのグローバル |
title |
対応するロールなし |
|
tr |
role=row |
祖先 グローバル |
track |
対応するロールなし |
|
u |
role=generic |
そうでなければ、すべてのグローバル |
ul |
role=list |
ロール: グローバル |
var |
対応するロールなし |
そうでなければ、すべてのグローバル |
video |
対応するロールなし | ロール: グローバル |
wbr |
対応するロールなし | ロール: 著者は、 |
表の2列目の対応するロールなしでマークされる要素は、一切の暗黙のARIAセマンティックスを持たないが、意味を持ち、かつこの意味はARIAによって提供されないロール、ステートおよびプロパティで表されてもよく、アクセシビリティAPIを経由して支援技術のユーザーに公開される。したがって、著者は、記載される要素のセマンティックスを上書きするよりも、 div
またはspan
,などの意味的に中立な要素にrole
属性を追加することを推奨する。
著者は、ここで提供されるもの以外に、HTMLでのARIAの使用に関するガイダンスとして、以下の文書の利用を推奨する:
著者は、著者由来の名前付けを可能にする暗黙的または明示的なARIAロールを持つ要素にアクセシブルな名前を指定するために、aria-label
およびaria-labelledby
属性を使用してもよい。
Accessible Rich Internet Applications (WAI-ARIA) 1.2は、著者の名前付けが禁止されるロールだけでなく、著者由来の名前付けを可能にするロールも定義する。
著者は、名前付けできない暗黙のWAI-ARIAロールをもつ要素で、aria-label
またはaria-labelledby
を指定してはならない。著者由来の名前付けを禁止する暗黙のWAI-ARIAロールは、4. HTMLでARIA属性を使用するための文書適合性要件で特定されたHTML要素で特定される。
次のマークアップの例は、著者由来の名前付けを禁止する暗黙のARIAロールをもつHTML要素の選択を示す。
<!-- DO NOT do the following! -->
<p aria-label="...">...</p>
<span aria-label="...">...<span>
<code aria-label="...">...<code>
<div aria-labelledby="...">...</div>
次のマークアップの例は、著者由来の名前付けを可能にする明示的なWAI-ARIAロールを持つ要素を示す。これらの要素で指定される明示的なロールのために、aria-label
およびaria-labelledby
属性は許可される。
<p role="link" tabindex="0" aria-label="...">...</p>
<span role="button" tabindex="0" aria-label="...">...<span>
<div role="article" aria-labelledby="...">...</div>
特に明記されない限り、著者は、aria-*
セマンティックスが期待されるHTML要素で同等のHTMLの代わりにaria-*
属性を使用してもよい。たとえば、著者は、button
要素にaria-disabled=true
を指定してもよい。同時に、disabled
属性を使用するのではなくbutton
を機能的に無効にするために必要なスクリプトを実装してもよい。
WAI-ARIAのホスト言語セマンティックスとの競合で述べたように、HTML要素がaria-*
属性とそれに相当するホスト言語(HTML)の両方を使用する場合、ユーザーエージェントは(同じ暗黙のARIAセマンティックスを持つネイティブHTML属性を優先する)WAI-ARIA属性を無視しなければならない。このため、著者は、要素にネイティヴHTML属性と同等のaria-*
属性の両方を指定すべきではない。著者固有の要件については、各属性を確認すること。
次の表は、同等のaria-*
属性を持つHTML要素とその属性を表す。
1列目のセルでそれぞれの言語機能(要素および属性)は同じ行の2列目のセルで与えられるARIAセマンティックス(ロール、ステート、およびプロパティ)を意味する。各行の3列目のセルは、著者がネイティヴHTML機能を使用する方法と、同じ暗黙のARIAセマンティックスを提供するaria-*
属性を使用するための要件を定義する。
HTMLの機能 | 暗黙のARIAセマンティックス |
HTMLの機能およびaria-* 属性の著者ガイダンス |
---|---|---|
checked 属性が許可されているすべての要素 |
aria-checked="true" |
HTMLで許可される 著者は、要素のcheckednessが 作成者は、属性を許可するWAI-ARIAロールをもつ他の要素で |
option disabled およびoptgroup disabled を含む、disabled 属性が許可されているすべての要素 |
aria-disabled="true" |
HTMLで許可される 著者は、HTMLで 著者は、 著者は、 |
placeholder 属性が許可されているすべての要素 |
aria-placeholder="..." |
HTMLで 著者は、HTMLで 著者は、 |
max 属性が許可されているすべての要素:meter max 、progress max 、および input max |
aria-valuemax="..." |
HTMLで許可される 著者は、 作者は 著者は、 |
min 属性が許可されるすべての要素:meter min およびinput min |
aria-valuemin="..." |
HTMLで許可される 著者は、 作者は 著者は、 |
readonly 属性を許可するすべての要素:input readonly 、textarea readonly およびreadonly を許可するフォームに関連付けられたカスタム要素 |
aria-readonly="true" |
HTMLで許可される 著者は、属性を許可するWAI-ARIAロールをもつすべての要素で 著者は、 著者は、 |
注 これは、 |
aria-readonly="false" |
著者は、 isContentEditable="true" を持つ要素にaria-readonly="true" を設定してはならない。 |
required 属性が許されるすべての要素input required , textarea required , およびselect required |
aria-required="true" |
HTMLで許可される 著者は、HTMLで 著者は、 著者は、 |
colspan 属性が許可されるすべての要素:td およびth |
aria-colspan="..." |
HTMLで許可される 著者は、 著者は、 |
rowspan 属性が許可されるすべての要素:td およびth |
aria-rowspan="..." |
HTMLで許可される 著者は、 著者は、 |
ARIA仕様の非推奨要件の節は、ARIA機能が非推奨としてマークされている場合、著者は新しいコンテンツに当該機能を使用しないことを助言する。
次のロールおよび属性は、ARIAおよびDPub ARIAの非推奨機能である。適合チェッカーは、これらの機能の非推奨のステータスについて著者に警告しなければならない。可能な場合はいつでも、著者は、非推奨機能に代わるものを使用することを助言する。
directory
ロールは、WAI-ARIA 1.2で非推奨としてマークされている。現実には、directory
ロールは、暗黙的または明示的なlist
ロールをもつ要素と機能的な違いはなかった。著者は、HTMLのネイティヴリスト要素のいずれか、または代わりにARIA list
を使用することを助言する。
doc-biblioentry
およびdoc-endnote
ロールは、list
の暗黙的または明示的なロールをもつ要素の妥当な子ではないため、Digital Publishing WAI-ARIA Module 1.1で非推奨としてマークされている。著者は、これらのロールを必要とせずに標準のリストおよび子のli
要素を使用できる。
aria-dropeffect
およびaria-grabbed
属性は、WAI-ARIA 1.1で非推奨された。現在、ARIAには提案された機能を置き換える機能は存在しない。
著者は、すべてのrole
トークン値、および値がトークンとして定義されるステートまたはプロパティ属性(aria-*
)に小文字のASCII文字を使用すべきである。
モダンブラウザーは、role
またはaria-*
属性値をASCII大文字・小文字不区別として扱うが、すべての支援技術がこれらの値を正しく解析するわけではない。
相互運用性の問題を減らすために、著者はaria-*
およびrole
属性値にASCII小文字を使用することを強く勧める。さらに、著者は、コンテンツがユーザーに正しく公開されることを確認するために、異なるブラウザーと支援技術の組み合わせで厳密にテストすることを勧める。
この節は非規範的である。
次の表は、コンテンツの種類および許可される子孫情報([HTML]仕様で定義)を同等のrole
を持つ要素にマップ(および拡張)する。
1列目は、各ARIA role
の規範的なAccessible Rich Internet Applications (WAI-ARIA) 1.2の定義にリンクする。2列目は、HTML要素で使用されるときに各role
が持つコンテンツの種類カテゴリーを示す。3列目は、多くの場合、同じ暗黙のロールをもつHTML要素と一致する、明示的なrole
が指定された要素の子孫になり得るHTML要素の種類を示す。
たとえば、button
要素は暗黙のrole=button
を持つ。HTMLにおいて、button
要素は、子孫としてフレージングコンテンツを許可し、インタラクティブコンテンツまたはtabindex
属性をもつ子孫を許可しない。したがって、role=button
で指定されたすべての要素は、すべてのインタラクティブコンテンツの子孫、tabindex
をもつ要素、または(3列目で特定された)インタラクティブコンテンツカテゴリーに属するロール値をもつすべての要素を許可しない。
<!-- conformance checkers will report an error -->
<button>
<div role="button">...</div>
</button>
<div role="button">
<button>...</button>
</div>
<div role="link">
<textarea>...</textarea>
</div>
さらに、Accessible Rich Internet Applications (WAI-ARIA) 1.2が許可された子孫に特定の要件を指定した特定のロールが存在する。これらは、これらの特定のロールについて"必須の所有要素"を参照する"ことを示すことにより、列3(子孫の許容)で特定される。
非規範的とマークされたセクションだけでなく、この仕様のすべてのオーサリングガイドライン、ダイアグラム、例、および注も非規範的である。この仕様におけるその他すべては規範的である。
この文書におけるキーワードMAY、MUST、MUST NOT、NOT RECOMMENDED、SHOULDおよびSHOULD NOTは、ここに示すように、すべて大文字で表記される場合に限り、BCP 14 [RFC2119] [RFC8174]記述されるように解釈される。
HTML文書におけるARIAのチェックに対するサポートを主張する適合チェッカーは、この仕様で定義されるようにHTML要素のARIAのrole
およびaria-*
属性の使用のための文書適合性要件に対するチェックを実装しなければならない。
適合文書は、著者が定義したrole
またはaria-*
属性をもつ要素を含めてはならない。この仕様に従って、著者は、 4. HTMLでARIA属性を使用するための文書適合性要件の各HTML要素で使用してもよい。 適合性チェッカーは、著者がこれらの役割を明示的に設定することは推奨されないため、著者が暗黙のARIAセマンティックスに一致するロール
を要素に明示的に提供しているインスタンスにフラグを立てるべきである。
適合性チェッカーは、この仕様に適合していない文書を表面化される場合に、独自の用語または深刻度のレベルを定義してもよい。
この節は非規範的である。
この仕様は、[wai-aria-1.2]、[dpub-aria-1.0] または [HTML]の機能を定義するものではない。むしろ、HTMLでARIAをチェックするサポートを主張する適合性チェッカーのためのルールおよびガイダンスを提供し、著者へのガイダンスを提供する。
したがって、この仕様は潜在的な懸念をもたらすような新しい機能を定義していないため、プライバシーまたはセキュリティへの影響は知られていない。
Referenced in:
Referenced in:
Referenced in:
Referenced in: