See also translations.
Copyright © 2025 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を利用する、カスタムインターフェイスおよびウィジェットを含む、ウェブコンテンツの開発において著者を支援する。
この節は、公開時点におけるこの文書のステータスについて説明する。A list of current W3C publications and the latest revision of this technical report can be found in the W3C standards and drafts index.
ARIA in HTMLは、[HTML]仕様のモジュールである。この仕様モジュールが参照するが明示的に定義されない、すべてのHTMLの機能、適合性要件、または用語は、HTML Standardによって定義される。
この仕様は2021年12月9日にW3C Recommendationになって以来、次の実質的な追加および/または修正が提案されている。
label element to allow role and aria-* attributes to be specified when the element is not associated with a labelable element.selectedcontent element and provide updated allowances for the button element when it is used in the context of a customized select element.html element is a generic element, and that neither the document or generic roles are recommended to be used on the element.img element to allow the math role.image role as preferred synonym to the img role.aria-hidden when used with the hidden attribute.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 |
|
ロール: グローバル
|
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 |
DPubロール: そうでなければ、 グローバル |
footer |
そうでなければ、 |
ロール: DPubロール:
そうでなければ、すべてのグローバル |
form |
|
ロール: グローバル 注 アクセシブルな名前が提供されていない限り、 |
| フォーム関連カスタム要素 | 著者定義の そうでなければ、 |
そうでなければ、フォーム関連ロール:
そうでなければ、すべてのグローバル |
h1 ‐ h6 |
role=heading、aria-level=要素のタグ名の数字 |
ロール: DPubロール: グローバル |
head |
対応するロールなし |
|
header |
そうでなければ、 |
ロール:
そうでなければ、すべてのグローバル |
hgroup |
role=group |
そうでなければ、すべてのグローバル |
hr |
role=separator |
ロール: DPubロール: グローバル |
html |
role=generic |
No
|
i |
role=generic |
そうでなければ、すべてのグローバル |
iframe |
対応するロールなし | ロール: グローバル |
imgが空でないalt(alt="some text")を持つか、もしくはアクセシブルな名前が別のimg命名法で指定されている、またはimgにaltがなく、かつ名前が指定されていない場合:role=img or image |
ロール: 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= |
著者は、 そうでなければ、グローバル |
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 |
著者は、 そうでなければ、グローバル |
selectedcontent |
role=generic |
そうでなければ、その要素がカスタマイズ可能な そうでなければ、すべてのグローバル |
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: