ARIA in HTML 日本語訳

W3C Recommendation

More details about this document
This version:
https://www.w3.org/TR/2024/REC-html-aria-20240415/
Latest published version:
https://www.w3.org/TR/html-aria/
Latest editor's draft:
https://w3c.github.io/html-aria/
History:
https://www.w3.org/standards/history/html-aria/
Commit history
Implementation report:
https://w3c.github.io/html-aria/results/implementation-results.html
Editors:
Scott O'Hara (Microsoft)
Patrick H. Lauke (TetraLogical)
Former editor:
Steve Faulkner (TPGi) - Until
Feedback:
GitHub w3c/html-aria (pull requests, new issue, open issues)
public-webapps@w3.org with subject line [html-aria] … message topic … (archives)
Errata:
Errata exists.

See also translations.


概要

この仕様は、[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になって以来、次の実質的な追加および/または修正が提案されている。

文書のレビュアーは、文書内の特徴的なスタイルによって、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プロセス文書によって管理される。

1. ARIA in HTMLの使用に対する著者の要件

著者は、ARIAの機能が強いネイティヴセマンティックスと衝突するまたは与えられるHTML要素の暗黙のARIAセマンティックスと等価である場合を除いた、WAI-ARIAで定義される説明される要件に従って、HTML要素の公開された意味(セマンティックス)を変更するためにARIA roleおよびaria-*属性を使用してもよい。HTMLの機能に対する暗黙のARIAセマンティックスは、HTML Accessibility API Mappings仕様によって定義される。

この文書によって定義されるHTMLにおけるARIA機能の使用に対する制約は、著者が文書の実際のUIを表すことのない無意味なユーザーインターフェイス(UI)情報を支援技術製品に報告させないようにすることを意図する。

著者は、4. HTMLでARIA属性を使用するための文書適合性要件および4.2 同等のHTML属性の代わりにARIA属性の使用に関する要件の表に示されるセマンティックスと矛盾する方法でARIA roleおよびaria-*属性を使用してはならない。著者は、いずれか一方の表に定義される暗黙のARIAセマンティックスと一致する値にARIA roleおよびaria-*属性を設定することは推奨されない。そうすることは不必要であり、意図しない結果につながる可能性がある。

2. HTMLから拡張および分岐するARIAセマンティックス

この節は非規範的である。

ARIAの使用を通じて、著者はネイティヴHTMLの現在の機能を超えるセマンティックスを指定できる。著者にウィジェットを作成する機会を提供したり、HTMLだけを使用しても不可能なネイティヴHTML機能に特定のアクセシブルなステートおよびプロパティを公開する機会を提供するため、これは非常に便利である。

たとえば、button要素には、"押された"状態を公開するネイティヴHTML機能がない。ARIAは、著者にaria-pressed属性を指定することで要素のセマンティックスの拡張を可能にし、コントロールの視覚的な提示と一致する聴覚UIを可能にする。

次の例で、button要素は、ユーザーがウェブアプリケーション内の設定の状態を切り替えることを可能にする。aria-pressed属性は、button要素を強化するために使用される。"押された"状態のとき、その情報は支援技術のユーザーに公開することができる。

1:ARIAでボタンの押した状態を伝える
<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をこのプレースホルダーリンクに適用して、要素の意図されたロールとステートを伝達することができる。

3. ARIAの誤った使用を回避するための著者ガイダンス

この節は非規範的である。

3.1 インタラクティブな要素を非インタラクティブなロールで上書きするのを避ける

ARIAは、ユーザーに公開するために別のロールが必要な場合に、要素のロールを改訂または修正するのに役に立つ。しかし、ARIAを使用してインタラクティブな要素、たとえばbuttonを、一般的に非インタラクティブな要素によって公開されるロールで上書きしようとすることは、ユーザーや著者にとって最善になることはほとんどない。たとえば、見出しなど。

例として、以下では、button要素でrole=headingを使用している。これは許可されない。button要素は、見出しロールに対するユーザーの期待と矛盾する既定の機能があるためである。

3:誤ったロール
<button role="heading">search</button>

著者は、buttonのデフォルトの機能および体裁が削除されたことを確認するために追加の手順を実行する必要がある。それでも、ユーザーがウェブページにどのよう関わるかによっては、要素の暗黙の機能を完全に抑制するには十分でない場合がある。たとえば、Windowsのハイコントラストテーマを有効にしたり、ブラウザーのリーダーモードでウェブページを表示したりする。

3.2 冗長なロールの指定を避ける

次の例は、明示的にrole=buttonも提供されているbutton要素を示している。"button"要素が既に暗黙のbuttonロールで公開されているため、このロールの指定は不要である。実際のところ、この特定の冗長性は、マークアップをより冗長にすることと、このプラクティスが有用であることを他の著者に誤って知らせる以外に、予期せぬ副作用はないだろう。不必要なロールを指定することに問題がある場合の例については、3.3 副作用に気をつけるを確認のこと。

4:buttonの冗長なロール
<!-- Avoid doing this! -->
<button role="button">...</button>

同様に、以下はfieldset要素でrole=groupを使用し、main要素でrole=Mainを使用する。fieldset要素はrole=groupとして暗黙的に公開され、main要素はrole=mainとして暗黙的に公開されるため、これは不要である。繰り返しになるが、実際には、role値の宣言でASCII小文字を使用している限り、これが支援技術のユーザーに予期しない副作用をもたらすことはないだろう。 詳細については、4.4 ARIAロール、ステートおよびプロパティ属性の活字ケース要件を参照のこと。

5:fieldsetおよびmainの冗長なロール
<!-- Avoid doing this! -->
<fieldset role="group">...</fieldset>
<!-- or this! -->
<main role="Main">...</main>

次は、ul 要素でrole=listを使用する。ul要素はlistという暗黙のリールを持つため、ロールを明示的に追加することは、一般に冗長であると見なされる。しかし、リスト項目の視覚的表示からリストマーカーが削除された場合、リストの暗黙のARIAセマンティックスを抑制するユーザーエージェントもある。一般に、要素の暗黙のロールの冗長な宣言は推奨されないが、このような特定の状況で、ロールを公開する必要がある場合、著者はロールを明示的に追加できる。

6:listの冗長なロール
<!-- Generally avoid doing this! -->
<ul role="list">...</ul>

3.3 副作用に気をつける

次は、summary要素でrole=buttonを使用する。これは不要であり、クロスプラットフォームの問題が発生することがある。たとえば、要素がその状態を正しく公開できないようにし、buttonのロールを強制する。それ以外の場合はプラットフォームまたはブラウザーの特定のロールで公開されるかもしれない。

7:意図しない結果
<details>
  <!-- Avoid doing this! -->
  <summary role="button">more information</summary>
  ...
</details>

3.4 ARIAのルールを遵守する

Accessible Rich Internet Applications (WAI-ARIA) 1.2は、著者が使用することを意図しない多数のロールを定義する。これらのロールの多くは、著者によって使用されないことが明示される抽象ロールに分類される。次の例は、抽象selectロールの妥当でない無効な使用を示す。著者は、代わりにcomboboxロールを使用することを意図していたと思われる。

8:抽象ロールは著者向けではない
<!-- Do not do this! -->
<div role="select" ...>...</div>

ARIAはまた、より具体的な独自のARIAセマンティクスを持たない多くのHTML要素を備えた機能パリティを提供することを目的としたgenericロールを定義する。たとえば、HTMLのdivspan要素などがある。ARIAは、その本来の目的がユーザーエージェントの実装者による使用であるため、著者がgenericロールを使用することを推奨しない。

次の例では、genericロールを使用するよりもむしろ、著者にarticle要素の代わりにdivの使用を助言する。HTML要素の変更が不可能な場合、articleの暗黙のロールを除去するために、presentationまたはnoneのロールを指定することが、代わりに受け入れられる。

9:要素をgenericとして指定しない
<!-- Avoid doing this! -->
<article role="generic" ...>...</article>

さらに、ARIAのホスト言語のセマンティックスとの競合では、ステートおよびプロパティを公開するためのネイティヴHTML機能と、それに対応するARIA機能の両方を著者が使用する場合、ホスト言語の機能は、同じく使用される明示的なARIA属性よりも優先されることが明記されている。

たとえば、次の例において、著者はHTMLのinput type=checkboxを使用し、かつaria-checked=trueを指定している。しかし、ユーザーエージェントはaria-checked属性を無視することになっている。代わりに、ユーザーエージェントはフォームコントロールのネイティヴ機能に基づいて状態を公開する。

10: 暗黙のチェック状態は、明示的なARIA属性よりも優先される
<!-- Do not do this! -->
<input type="checkbox" checked aria-checked="false">

3.5 HTMLのルールを遵守する

ARIAは、支援技術のユーザーに対してHTMLの機能を公開する方法を変更するために使用できる、この変更は、HTMLの基礎となる解析および許可されたコンテンツモデルを変更しない。たとえば、divは、著者にすべてのロールを指定するのを許可する。しかし、これは、HTMLが要素に対して定義された規則から逸脱した方法で要素を使用できることを意味するものではない。

たとえば、次の例では、著者がdiv要素にlinkのロールを指定している。HTMLは、ハイパーリンク(role=linkとして公開される)をp要素の子孫にすることができるが、HTMLパーサーは、divp要素の子孫にすることを許可しない。

11: 無効なHTMLネストをもつ修正されたARIAセマンティックス
<!-- Do not do this! -->
<p>
  ... <div role=link tabindex=0>...</div> ... 
</p>

HTMLパーサーは、上記のマークアップを次のように変更して出力する:

12: 妥当な代替となる解決を使用した望まれないレンダリングされたマークアップ
<!-- 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属性を示すが、この例は、たとえロールが許可されていても、そのロールが使用されるコンテキストによっては、レンダリングおよびアクセシビリティの問題が発生する可能性があることを示している。

4. 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.0role値を使用することは適合しているが、これらの値のセマンティックスを支援技術のユーザーに公開するための現在のサポートは、ほとんど存在しない。

HTML要素ごとのARIA属性利用の規則
HTML要素

暗黙のARIAセマンティックス(これらをマークアップで明示的に割り当てることは推奨されない

ARIAロール、ステートおよびプロパティの許容
hrefをもつa role=link

ロール:button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tabまたはtreeitem。(linkも許可されるが、推奨されない。)

DPubロール:doc-backlink, doc-biblioref, doc-glossrefまたはdoc-noteref

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

href属性をもつa要素にaria-disabledを使用することは推奨されない

リンクが"無効"としてプログラム的に伝達される必要がある場合、href属性を削除する
hrefをもたないa role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

abbr 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

address role=group

すべてのrole。ただしgroupは使用すべきでない

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

hrefをもつarea role=link

link以外のroleなし。これは推奨されない

グローバルaria-*属性およびlinkロールに受け入れ可能なすべてのaria-*属性

hrefをもたないarea role=generic

ロール:buttonまたはlink。(genericも許可されるが、使用すべきでない。)

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

article role=article

ロール:application, document, feed, main, none, presentationまたはregion. (articleも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

aside role=complementary

ロール:feed, none, note, presentation, regionまたはsearch。(complementaryも許可されるが、推奨されない。)

DPubロール:doc-dedication, doc-example, doc-footnote, doc-glossary, doc-pullquoteまたはdoc-tip

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

audio 対応するロールなし

ロール:application

グローバルaria-*属性およびapplicationロールに受け入れ可能なすべてのaria-*属性

自律カスタム要素

著者定義のElementInternalsから公開されたロール

そうでなければ、role=generic

ElementInternalsで定義されたロールがある場合、roleなし

そうでなければ、すべてのrole、ただし、genericは使用すべきでない

genericロールとして公開される場合、または名前付けを禁止する別のロールとして公開される場合、名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

b role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

base 対応するロールなし

roleなしまたはaria-*属性

bdi role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

bdo role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

blockquote role=blockquote

すべてのrole、ただしblockquote推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

body role=generic

generic以外のroleなし。これは使用すべきでない

名前付け禁止

そうでなければ、genericロールにグローバルaria-*属性が許可される。ただし、著者は、body要素にaria-hidden=trueを指定してはならない。ment.

br 対応するロールなし

ロール:groupまたはpresentation

著者は、br要素にaria-hidden属性を指定してもよい。そうでなければ、他のaria-*属性は許可されない。

button role=button

ロール: checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tabまたは treeitem. (buttonも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

canvas 対応するロールなし

すべてのrole

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

caption role=caption

caption以外のroleなし。これは推奨されない

名前付け禁止

そうでなければ、グローバルaria-*属性

cite 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

code role=code

すべてのrole、ただしcode推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

col 対応するロールなし

roleなしまたはaria-*属性

colgroup 対応するロールなし

roleなしまたはaria-*属性

data role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

datalist role=listbox

listbox以外のroleなし。これは推奨されない

aria-*属性なし

dd 対応するロールなし

roleなし

グローバルaria-*属性およびdefinitionロールに受け入れ可能なすべてのaria-*属性

del role=deletion

すべてのrole、ただしdeletion推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

details role=group

group以外のroleなし。これは推奨されない

グローバルaria-*属性およびgroupロールに受け入れ可能なすべてのaria-*属性

dfn role=term

すべてのrole、ただしterm推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

dialog role=dialog

ロール:alertdialog。(dialogも許可されるが、推奨されない。)

グローバルaria-*属性およびdialogロールに受け入れ可能なすべてのaria-*属性

div role=generic

dl要素の直接の子である場合、presentationまたはnoneのみ。そうでなければ、すべてのrole、ただし、genericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

dl 対応するロールなし

ロール:group, list, noneまたはpresentation

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

dt 対応するロールなし

ロール:listitem

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

em role=emphasis

すべてのrole、ただしemphasis推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

embed 対応するロールなし

ロール:application, document, img, noneまたはpresentation

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

fieldset role=group

ロール:none, presentationまたはradiogroup. (groupも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

figcaption 対応するロールなし

ロール:group, noneまたはpresentation

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

figure role=figure

figurefigcaptionの子孫を持たない場合:
すべてのrole。ただしfigure推奨されない

figurefigcaption子孫を持つ場合:
DPubロール:doc-example

そうでなければ、figureは許可されるが、推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

footer

article, aside, main, navもしくはsection要素の子孫でない、またはrole=article, complementary, main, navigationもしくはregionをもつ要素でない場合、role=contentinfo

そうでなければ、role=generic

ロール:group, presentationまたはnonearticleasidemainnavもしくはsection要素の子孫でない場合、またはrole=articlecomplementarymainnavigationもしくはregionをもつ要素の子孫でない場合、role=contentinfoも許可されるが、推奨されない。そうでなければ、role=genericも許可されるが、使用すべきでない。)

DPubロール:doc-footnote

genericロールとして公開される場合、名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

form

role=form

Roles: none, presentation or search. (formも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

アクセシブルな名前が提供されていない限り、formはランドマークリージョンとして公開されない。

フォーム関連カスタム要素

著者定義のElementInternalsから公開されたロール

そうでなければ、role=generic

ElementInternalsで定義されたロールがある場合、roleなし

そうでなければ、フォーム関連ロール:button, checkbox, combobox, listbox, progressbar, group, radio, radiogroup, searchbox, slider, spinbutton, switchまたはtextbox。(genericも許可されるが、使用すべきでない。)

genericロールとして公開される場合、名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

h1 ‐ h6 role=headingaria-level=要素のタグ名の数字

ロール:none, presentationまたはtab. (headingも許可されるが、推奨されない。)

DPubロール:doc-subtitle

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

head 対応するロールなし

roleなしまたはaria-*属性

header

article, aside, main, navもしくはsection要素の子孫でない、またはrole=article, complementary, main, navigationもしくはregionをもつ要素でない場合、role=banner

そうでなければ、role=generic

ロール:group, noneまたはpresentationarticleasidemainnavもしくはsection要素の子孫でない場合、またはrole=articlecomplementarymainnavigationもしくはregionをもつ要素の子孫でない場合、role=bannerも許可されるが、推奨されない。そうでなければ、role=genericも許可されるが、使用すべきでない。)

genericロールとして公開される場合、名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

hgroup role=group

すべてのrole。ただしgroupは使用すべきでない

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

hr role=separator

ロール:groupまたはpresentationseparatorも許可されるが、推奨されない。)

DPubロール:doc-pagebreak

グローバルaria-*属性およびseparatorロールに受け入れ可能なすべてのaria-*属性

html role=document

document以外のroleなし。これは推奨されない

aria-*属性なし

i role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

iframe 対応するロールなし

ロール:application, document, img, noneまたはpresentation

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

アクセシブルな名前をもつimg
imgが空ではないaltalt="some text")を持つ場合、またはアクセシブルな名前が別のimg命名方法で提供される場合:
role=img

ロール: button, checkbox, link, menuitem, menuitemcheckbox, menuitemradio, meter, option, progressbar, radio, scrollbar, separator, slider, switch, tabまたはtreeitem. (imgも許可されるが、推奨されない。)

DPubロール:doc-cover

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

アクセシブルな名前をもたないimg

imgが空のaltalt="")を持ち、かつ他の img命名方法がない場合:
role=none, role=presentation

imgalt属性がなく、かつ他のimg命名方法もない場合:
role=img

imgalt属性またはアクセシブルな名前を持たない場合: role=noneまたはpresentationロール以外のroleなし 。(role=img も許可されるが、推奨されない。)

imgが空のalt=""属性を持ち、かつアクセシブルな名前を提供するaria-labelまたはaria-labelledby属性を持たない場合: role=noneまたはpresentationロール以外のroleなし 。これは推奨されない

aria-hidden="true"以外のaria-*属性なし

そうでなければ、imgが著者定義のアクセシブルな名前を持つ場合、アクセシブルな名前をもつimgを参照。

input type=button role=button

ロール: checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tabまたはtreeitem. (buttonも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

input type=checkbox role=checkbox

ロール:menuitemcheckbox, optionまたは switcharia-pressedともに使用される場合はbuttoncheckboxも許可されるが、推奨されない。)

著者は、input type=checkbox要素にaria-checked属性を使用してはならない

そうでなければ、グローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

HTML checked属性は、type=checkboxで使用するときのmenuitemcheckboxoptionまたは switcharia-checked属性の代わりに使用できる。

input type=color 対応するロールなし

roleなし

グローバルaria-*属性およびaria-disabled属性。

input type=date 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

input type=datetime-local 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

list属性のないinput type = email role=textbox

textbox以外のroleなし。これは推奨されない

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

input type=file 対応するロールなし

roleなし

グローバルaria-*属性aria-disabledaria-invalid、およびaria-required属性。

input type=hidden 対応するロールなし

roleなしまたはaria-*属性

input type=image role=button

次のロールは許可されるが、推奨されないbutton, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tabまたはtreeitem

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

可能であれば、著者は、button要素など、指定されたロールを許可する別のHTML要素の使用を検討すべきである

input type=month 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

input type=number role=spinbutton

spinbutton以外のroleなし。これは推奨されない

グローバルaria-*属性およびspinbuttonロールに受け入れ可能なすべてのaria-*属性

input type=password 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

input type=radio role=radio

ロール:menuitemradio。(radioも許可されるが、推奨されない。)

著者は、input type=radio要素にaria-checked属性を使用してはならない

そうでなければ、グローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

HTML checked属性は、type=radioで使用するときのmenuitemradioaria-checked属性の代わりに使用できる。

input type=range role=slider

slider以外のroleなし。これは推奨されない

著者は、input type=rangearia-valuemaxまたはaria-valuemin属性を使用すべきでない

そうでなければ、グローバルaria-*属性およびsliderロールに受け入れ可能なすべてのaria-*属性。

input type=reset role=button

次のロールは許可されるが、推奨されないbutton, checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tabまたはtreeitem

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

可能であれば、著者は、button要素など、指定されたロールを許可する別のHTML要素の使用を検討すべきである

list属性のないinput type=search role=searchbox

searchbox以外のroleなし。これは推奨されない

グローバルaria-*属性およびsearchboxロールに受け入れ可能なすべてのaria-*属性

input type=submit role=button

次のロールは許可されるが、推奨されないbutton, checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tabまたはtreeitem

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

可能であれば、著者は、button要素など、指定されたロールを許可する別のHTML要素の使用を検討すべきである

list属性のないinput type=tel role=textbox

textbox以外のroleなし。これは推奨されない

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

list属性のない、input type=textまたはtypeが欠損もしくは不正 role=textbox

ロール:combobox, searchboxまたはspinbutton。(textboxも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

list属性をもつ input type=text searchtelurlemailまたはtypeが欠損または不正 role=combobox

combobox以外のroleなし。これは推奨されない

著者は、指定されたlist属性をもつinputaria-haspopup属性を使用すべきではない

そうでなければ、グローバルaria-*属性およびcomboboxロールに受け入れ可能なすべてのaria-*属性。

input type=time 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

list属性のないinput type=url role=textbox

textbox以外のroleなし。これは推奨されない

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

input type=week 対応するロールなし

roleなし

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

ins role=insertion

すべてのrole、ただしinsertion推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

kbd 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

label 対応するロールなし

roleなし

名前付け禁止

そうでなければ、グローバルaria-*属性

legend 対応するロールなし

roleなし

名前付け禁止

そうでなければ、グローバルaria-*属性

li

liがリスト要素(ulolmenu)の子である場合、role=listitem

そうでなければ、liがリスト要素の子でない場合、role=genericとして公開される。

親のリスト要素が暗黙的または明示的なlistロールを持つ場合、listitem以外のroleなし。これは、推奨されない

そうでなければ、親のリスト要素が暗黙的または明示的なlistロールを公開しない場合、すべてのrole

リスト要素に許可されているロールについては、ulol、またはmenuを参照。

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

著者は、非推奨のDPubロールdoc-biblioentry, doc-endnoteを使用すべきでない

link 対応するロールなし

roleなしまたはaria-*属性

main role=main

main以外のroleなし。これは推奨されない

グローバルaria-*属性およびmainロールに受け入れ可能なすべてのaria-*属性

map 対応するロールなし

roleなしまたはaria-*属性

mark 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

math role=math

math以外のroleなし。これは推奨されない

グローバルaria-*属性およびmathロールに受け入れ可能なすべてのaria-*属性

menu role=list

ロール:group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbarまたは tree。(listも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

著者は、非推奨のdirectoryを使用すべきでない

meta 対応するロールなし

roleなしまたはaria-*属性

meter role=meter

meter以外のroleなし。これは推奨されない

著者は、meter要素でaria-valuemaxまたはaria-valuemin属性を使用すべきでない

そうでなければ、グローバルaria-*属性

nav role=navigation

ロール:menu, menubar, none, presentationまたはtablist。(navigationも許可されるが、推奨されない。)

DPubロール:doc-index, doc-pagelistまたはdoc-toc

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

noscript 対応するロールなし

roleなしまたはaria-*属性

object 対応するロールなし

ロール:application, documentまたはimg

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

ol role=list

ロール:group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbarまたは tree。(listも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

著者は、非推奨のdirectoryを使用すべきでない

optgroup role=group

group以外のroleなし。これは推奨されない

グローバルaria-*属性およびgroupロールに受け入れ可能なすべてのaria-*属性

オプションリストで存在するまたはdatalist要素で提案を表すoption要素 role=option

option以外のroleなし。これは推奨されない

著者は、option要素にaria-selected属性を使用すべきでない

グローバルaria-*属性およびoptionロールに受け入れ可能なその他のaria-*属性

output role=status

すべてのrole、ただしstatus推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

p role=paragraph

すべてのrole、ただしparagraph推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

param 対応するロールなし

roleなしまたはaria-*属性

picture 対応するロールなし

roleなし

著者は、picture要素にaria-hidden属性を指定してもよい。そうでなければ、他のaria-*属性は許可されない。

pre role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

progress role=progressbar

progressbar以外のroleなし。これは推奨されない

著者は、progress要素でaria-valuemax属性を使用すべきでない

そうでなければ、グローバルaria-*属性およびprogressbarロールに受け入れ可能なその他のaria-*属性。

q role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

rp 対応するロールなし

すべてのrole

名前付け禁止

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

rt 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

ruby 対応するロールなし

すべてのrole

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

s role=deletion

すべてのrole、ただしdeletion推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

samp role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

script 対応するロールなし

roleなしまたはaria-*属性

search

role=search

ロール:form, group, none, presentationまたはregion。(searchも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

section

section要素がアクセシブルな名前を持つ場合、role=region

そうでなければ、role=generic

ロール:alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, group, log, main, marquee, navigation, none, note, presentation, search, statusまたはtabpanel。(role=regionも許可されるが、推奨されないrole=genericは使用すべきでない。)

DPubロール:doc-abstract, doc-acknowledgments, doc-afterword, doc-appendix, doc-bibliography, doc-chapter, doc-colophon, doc-conclusion, doc-credit, doc-credits, doc-dedication, doc-endnotes, doc-epigraph, doc-epilogue, doc-errata, doc-example, doc-foreword, doc-glossary, doc-index, doc-introduction, doc-notice, doc-pagelist, doc-part, doc-preface, doc-prologue, doc-pullquote, doc-qna, doc-toc

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

selectmultiple属性をもたず、かつ1より大きい値を持つsize属性がない) role=combobox

ロール:menu。(comboboxも許可されるが、推奨されない。)

著者は、select要素にaria-multiselectable属性を使用すべきでない

そうでなければ、グローバルaria-*属性およびcomboboxまたはmenuロールに受け入れ可能なすべてのaria-*属性。

selectmultiple属性、または1より大きい値を持つsize属性をもつ) role=listbox

listbox以外のroleなし。これは推奨されない

著者は、select要素にaria-multiselectable属性を使用すべきでない

そうでなければ、グローバルaria-*属性およびlistboxロールに受け入れ可能なすべてのaria-*属性。

slot 対応するロールなし

roleなしまたはaria-*属性

small role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

source 対応するロールなし

roleなしまたはaria-*属性

span role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

strong role=strong

すべてのrole、ただしstrong推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

style 対応するロールなし

roleなしまたはaria-*属性

sub role=subscript

すべてのrole、ただしsubscript推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

summary

対応するロールなし

すべてではないが、多くのユーザーエージェントは、暗黙的なARIA role=buttonとともにsummary要素を公開する。

summary要素が親の詳細の要約である場合、roleなし

グローバルaria-*属性aria-disabled、およびaria-haspopup属性。

それ以外の場合、著者は、すべてのroleならびに、許可されたロールに適用されるすべてのグローバルaria-*属性およびすべてのaria-*属性を指定してもよい

sup role=superscript

すべてのrole、ただしsuperscript推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

SVG SVG AAMで定義されたrole=graphics-document

すべてのrole、ただしgraphics-document推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

table role=table

すべてのrole、ただしtable推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

tbody role=rowgroup

すべてのrole、ただしrowgroup推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

td

祖先table要素がrole=tableとして公開される場合、role=cell

祖先table要素がrole=gridまたはtreegridとして公開される場合、role=gridcell

祖先table要素がrole=tablegrid、またはtreegridとして公開されていない場合、対応するロールなし

祖先table要素がrole=tablegridtreegridを持つ場合、以下を除くroleなし

  • 祖先table要素がrole=tableとして公開される場合、cellは許可されるが、推奨されない
  • 祖先table要素がrole=gridまたはtreegridとして公開される場合、gridcellは許可されるが、推奨されない

そうでなければ、祖先table要素がrole=tablegrid、またはtreegridとして公開されていない場合、すべてのrole

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

template 対応するロールなし

roleなしまたはaria-*属性

textarea role=textbox

textbox以外のroleなし。これは推奨されない

グローバルaria-*属性およびtextboxロールに受け入れ可能なすべてのaria-*属性

tfoot role=rowgroup

すべてのrole、ただしrowgroup推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

th

祖先table要素がrole=tableとして公開されている場合、role=columnheaderrowheader、またはcell

祖先table要素がrole=gridまたはtreegridとして公開される場合、role=columnheaderrowheaderまたはgridcell

祖先table要素がrole=tablegrid、またはtreegridとして公開されていない場合、対応するロールなし

祖先table要素がrole=tablegridtreegridを持つ場合、以下を除くroleなし

  • 祖先table要素がrole=tableとして公開される場合、columnheaderrowheaderおよびcellは許可されるが、推奨されない
  • 祖先table要素がrole=gridまたはtreegridとして公開される場合、columnheaderrowheaderまたは gridcellは許可されるが、推奨されない

そうでなければ、祖先table要素がrole=tablegrid、またはtreegridとして公開されていない場合、すべてのrole

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

thead role=rowgroup

すべてのrole、ただしrowgroup推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

time role=time

すべてのrole、ただしtime推奨されない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

title 対応するロールなし

roleなしまたはaria-*属性

tr role=row

祖先table要素がrole=tablegrid、またはtreegridを持つ場合、row以外のroleなし、これは推奨されない。そうでなければ、すべてのrole、ただしrow推奨されない

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

track 対応するロールなし

roleなしまたはaria-*属性

u role=generic

すべてのrole。ただしgenericは使用すべきでない

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

ul role=list

ロール:group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbarまたは tree。(listも許可されるが、推奨されない。)

グローバルaria-*属性および許可されるロールに受け入れ可能なすべてのaria-*属性

著者は、非推奨のdirectoryを使用すべきでない

var 対応するロールなし

すべてのrole

名前付け禁止

そうでなければ、すべてのグローバルaria-*属性および許可されたロールに適用可能なaria-*属性。

video 対応するロールなし

ロール:application

グローバルaria-*属性およびapplicationロールに受け入れ可能なすべてのaria-*属性

wbr 対応するロールなし

ロール:groupまたはpresentation

著者は、wbr要素にaria-hidden属性を指定してもよい。そうでなければ、他のaria-*属性は許可されない。

表の2列目の対応するロールなしでマークされる要素は、一切の暗黙のARIAセマンティックスを持たないが、意味を持ち、かつこの意味はARIAによって提供されないロール、ステートおよびプロパティで表されてもよく、アクセシビリティAPIを経由して支援技術のユーザーに公開される。したがって、著者は、記載される要素のセマンティックスを上書きするよりも、 divまたはspan,などの意味的に中立な要素にrole属性を追加することを推奨する。

著者は、ここで提供されるもの以外に、HTMLでのARIAの使用に関するガイダンスとして、以下の文書の利用を推奨する:

  • Using ARIA - Accessible Rich Internet Applications仕様を使用してHTML要素にアクセシビリティ情報を追加する方法についての著者のための実用的なガイド。
  • WAI-ARIA 1.2 Authoring Practices - アクセシブル・リッチ・インターネット・アプリケーションを理解して実装する著者のガイド。

4.1 要素に名前を付けるための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要素の選択を示す。

14:著者由来の名前付けを禁止する暗黙のARIAロールをもつ要素
<!-- 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属性は許可される。

15:著者由来の名前付けを可能にする明示的なARIAロールをもつ要素
<p role="link" tabindex="0" aria-label="...">...</p>

<span role="button" tabindex="0" aria-label="...">...<span>

<div role="article" aria-labelledby="...">...</div>

4.2 同等のHTML属性の代わりにARIA属性の使用に関する要件

特に明記されない限り、著者は、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セマンティックス

HTMLの機能およびaria-*属性の著者ガイダンス
checked属性が許可されているすべての要素 aria-checked="true"

HTMLで許可されるchecked属性であるすべての要素上のchecked属性を使用する。input type=checkbox要素の"混合"状態を示すために、indeterminate IDL 属性を使用する。

著者は、要素のcheckednessaria-checked属性の現在の値と反対になる可能性がある要素に対して、aria-checked属性を使用してはならない

作成者は、属性を許可するWAI-ARIAロールをもつ他の要素でaria-checked属性を使用してもよい

option disabledおよびoptgroup disabledを含む、disabled属性が許可されているすべての要素 aria-disabled="true"

HTMLで許可されるdisabled属性であるすべての要素上のdisabled属性を使用する。

著者は、HTMLでdisabled属性が許可されているすべての要素、またはaria-disabled属性を許可するWAI-ARIAロールをもつ要素でaria-disabled属性を使用してもよい

著者は、disabled属性も持つ要素にaria-disabled="true"を使用すべきでない

著者は、disabled属性も持つ要素にaria-disabled="false"を使用してはならない

hidden属性をもつすべての要素 aria-hidden="true"

著者は、次の例外を除いて、グローバルaria-*属性を許可するすべてのHTML要素でaria-hidden属性を使用してもよい

著者は、hidden属性も持つすべて要素でaria-hidden="true"属性を使用すべきでない

placeholder属性が許可されているすべての要素 aria-placeholder="..."

HTMLでplaceholder属性が許可される要素上のplaceholder属性を使用する。

著者は、HTMLでplaceholder属性が許可されているすべての要素、またはaria-placeholder属性を許可するWAI-ARIAロールをもつ要素でaria-placeholder属性を使用してもよい

著者は、placeholder属性も持つすべての要素にaria-placeholder属性を使用してはならない

max属性が許可されているすべての要素:meter maxprogress max、および input max aria-valuemax="..."

HTMLで許可されるmax属性であるすべての要素上のmax属性を使用する。

著者は、aria-valuemaxを許可するWAI-ARIAロールをもつ他の要素でaria-valuemax属性を使用してもよい

作者はmax属性を許可するすべての要素にaria-valuemaxを使用すべきではない。代わりにmax属性を使用する。

著者は、max属性も持つ要素でaria-valuemaxを使用してはならない

min属性が許可されるすべての要素:meter minおよびinput min aria-valuemin="..."

HTMLで許可されるmin属性であるすべての要素上のmin属性を使用する。

著者は、aria-valueminを許可するWAI-ARIAロールをもつ他の要素でaria-valuemin属性を使用してもよい

作者はmin属性を許可するすべての要素にaria-valueminを使用すべきではない。代わりにmin属性を使用する。

著者は、min属性も持つ要素でaria-valueminを使用してはならない

readonly属性を許可するすべての要素:input readonlytextarea readonlyおよびreadonlyを許可するフォームに関連付けられたカスタム要素 aria-readonly="true"

HTMLで許可されるreadonly属性であるすべての要素上のreadonly属性を使用する。

著者は、属性を許可するWAI-ARIAロールをもつすべての要素でaria-readonly属性を使用してもよい

著者は、readonly属性も持つ要素にaria-disabled="true"を使用すべきでない

著者は、readonly属性も持つ要素にaria-disabled="false"を使用してはならない

contenteditable=trueをもつ要素またはcontenteditable属性をもつ最も近い祖先がcontenteditable="true"を持つcontenteditable属性をもたない要素。

これは、isContentEditable IDL属性と同等である。

aria-readonly="false" 著者は、 isContentEditable="true"を持つ要素にaria-readonly="true"を設定してはならない
required属性が許されるすべての要素input required, textarea required, およびselect required aria-required="true"

HTMLで許可されるrequired属性であるすべての要素上のrequired属性を使用する。

著者は、HTMLでrequired属性が許可されているすべての要素、またはaria-required属性を許可するWAI-ARIAロールをもつ要素でaria-required属性を使用してもよい

著者は、required属性も持つ要素にaria-required="true"を使用すべきでない

著者は、required属性も持つ要素にaria-required="false"を使用してはならない

colspan属性が許可されるすべての要素:tdおよびth aria-colspan="..."

HTMLで許可されるcolspan属性であるすべての要素上のcolspan属性を使用する。

著者は、colspan属性も持つ要素にaria-colspan属性を使用すべきでない

著者は、colspan属性も持ち、かつそれぞれの属性の値が一致しない要素でaria-colspanを使用してはならない

rowspan属性が許可されるすべての要素:tdおよびth aria-rowspan="..."

HTMLで許可されるrowspan属性であるすべての要素上のrowspan属性を使用する。

著者は、rowspan属性も持つ要素にaria-rowspan属性を使用すべきでない

著者は、rowspan属性も持ち、かつそれぞれの属性の値が一致しない要素でaria-rowspanを使用してはならない

4.3 非推奨のARIAロール、ステートおよびプロパティならびに属性に関する要件

ARIA仕様の非推奨要件の節は、ARIA機能が非推奨としてマークされている場合、著者は新しいコンテンツに当該機能を使用しないことを助言する。

次のロールおよび属性は、ARIAおよびDPub ARIAの非推奨機能である。適合チェッカーは、これらの機能の非推奨のステータスについて著者に警告しなければならない。可能な場合はいつでも、著者は、非推奨機能に代わるものを使用することを助言する。

4.3.1 非推奨のARIAロール

directoryロールは、WAI-ARIA 1.2で非推奨としてマークされている。現実には、directoryロールは、暗黙的または明示的なlistロールをもつ要素と機能的な違いはなかった。著者は、HTMLのネイティヴリスト要素のいずれか、または代わりにARIA listを使用することを助言する。

4.3.2 非推奨のDPub ARIAロール

doc-biblioentryおよびdoc-endnoteロールは、listの暗黙的または明示的なロールをもつ要素の妥当な子ではないため、Digital Publishing WAI-ARIA Module 1.1で非推奨としてマークされている。著者は、これらのロールを必要とせずに標準のリストおよび子のli要素を使用できる。

4.3.3 非推奨のARIA属性

aria-dropeffectおよびaria-grabbed属性は、WAI-ARIA 1.1で非推奨された。現在、ARIAには提案された機能を置き換える機能は存在しない。

4.4 ARIAロール、ステートおよびプロパティ属性の活字ケース要件

著者は、すべてのroleトークン値、および値がトークンとして定義されるステートまたはプロパティ属性(aria-*)に小文字のASCII文字を使用すべきである

モダンブラウザーは、roleまたはaria-*属性値をASCII大文字・小文字不区別として扱うが、すべての支援技術がこれらの値を正しく解析するわけではない。

相互運用性の問題を減らすために、著者はaria-*およびrole属性値にASCII小文字を使用することを強く勧める。さらに、著者は、コンテンツがユーザーに正しく公開されることを確認するために、異なるブラウザーと支援技術の組み合わせで厳密にテストすることを勧める。

5. ARIAロールの許可された子孫

この節は非規範的である。

次の表は、コンテンツの種類および許可される子孫情報([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(子孫の許容)で特定される。

ARIAロールの許可された子孫
ロール コンテンツの種類 子孫の許容
alert フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
alertdialog フローコンテンツ フローコンテンツ
application フローコンテンツ フローコンテンツ
article フローコンテンツ、ただしmain要素の子孫を除く。
banner フローコンテンツ、ただしmain, headerまたは footer要素の子孫を除く。
blockquote フローコンテンツ、ただしmain要素の子孫を除く。
button フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
caption N/A フローコンテンツ、ただしmainまたはtable要素の子孫を除く。
cell N/A フローコンテンツ、ただしmain要素の子孫を除く。
checkbox フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
code フレージングコンテンツ
columnheader N/A フローコンテンツ、ただしmain, headerまたは footer要素の子孫を除く。
combobox フローコンテンツ、ただしmain要素の子孫を除く。
complementary フローコンテンツ、ただしmain要素の子孫を除く。
contentinfo フローコンテンツ、ただしmain, headerまたは footer要素の子孫を除く。
definition フレージングコンテンツ
deletion フレージングコンテンツ
dialog フローコンテンツ フローコンテンツ
directory フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
document フローコンテンツ フローコンテンツ
emphasis フレージングコンテンツ
feed フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
figure フローコンテンツ、ただしmain要素の子孫を除く。
form フローコンテンツ、ただしform要素の子孫を除く。
generic フローコンテンツ
grid ARIA gridロールで定義される"必須の所有要素"を参照。
gridcell インタラクティブコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
group フローコンテンツ
heading フレージングコンテンツ
img フレージングコンテンツ、ただしインタラクティブコンテンツの子孫を除く。
insertion フレージングコンテンツ
link フローコンテンツインタラクティブコンテンツが存在せず、かつtabindex属性が指定された子孫を除く。
list フローコンテンツ ARIA listロールで定義される"必須の所有要素"を参照。
listbox ARIA listboxロールで定義される"必須の所有要素"を参照。
listitem N/A フローコンテンツ、ただしmain要素の子孫を除く。
log フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
main フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
marquee フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
math フローコンテンツ フローコンテンツ
menu ARIA treegridロールで定義される"必須の所有要素"を参照。
menubar ARIA menubarロールで定義される"必須の所有要素"を参照。
menuitem インタラクティブコンテンツ フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
menuitemcheckbox インタラクティブコンテンツ フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
menuitemradio インタラクティブコンテンツ フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
meter フローコンテンツ、ただしmeter要素の子孫を除く。
navigation フローコンテンツ、ただしmain要素の子孫を除く。
none N/A 透過的
note フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
option インタラクティブコンテンツ フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
paragraph フレージングコンテンツ
presentation N/A 透過的
progressbar フローコンテンツ、ただしprogress要素の子孫を除く。
radio フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
radiogroup フローコンテンツ
region フローコンテンツ、ただしmain要素の子孫を除く。
row N/A ARIA rowロールで定義される"必須の所有要素"を参照。
rowgroup N/A ARIA rowgroupロールで定義される"必須の所有要素"を参照。
rowheader N/A フローコンテンツ、ただしmain要素の子孫を除く。
scrollbar インタラクティブコンテンツ フレージングコンテンツ
search フローコンテンツ、ただしmain要素の子孫を除く。
searchbox フローコンテンツ、ただしmain要素の子孫を除く。
separator インタラクティブコンテンツ(フォーカス可能な場合)。 フレージングコンテンツ
slider フレージングコンテンツ
spinbutton フローコンテンツ、ただしmain要素の子孫を除く。
status フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
strong フレージングコンテンツ
subscript フレージングコンテンツ
superscript フレージングコンテンツ
switch フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
tab インタラクティブコンテンツ フレージングコンテンツ、ただしインタラクティブコンテンツの子孫、および tabindex属性が指定された子孫を除く。
table ARIA tableロールで定義される"必須の所有要素"を参照。
tablist ARIA tablistロールで定義される"必須の所有要素"を参照。
tabpanel フローコンテンツ フローコンテンツ
term フレージングコンテンツ フレージングコンテンツ
textbox インタラクティブコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
time フレージングコンテンツ
timer フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
toolbar フローコンテンツ フローコンテンツ、ただしmain要素の子孫を除く。
tooltip フローコンテンツ フレージングコンテンツ
tree フローコンテンツ ARIA treeロールで定義される"必須の所有要素"を参照。
treegrid フローコンテンツ ARIA treegridロールで定義される"必須の所有要素"を参照。
treeitem インタラクティブコンテンツ フレージングコンテンツ

6. 適合

非規範的とマークされたセクションだけでなく、この仕様のすべてのオーサリングガイドライン、ダイアグラム、例、および注も非規範的である。この仕様におけるその他すべては規範的である。

この文書におけるキーワードMAYMUSTMUST NOTNOT RECOMMENDEDSHOULDおよびSHOULD NOTは、ここに示すように、すべて大文字で表記される場合に限り、BCP 14 [RFC2119] [RFC8174]記述されるように解釈される。

6.1 適合性チェックの要件

HTML文書におけるARIAのチェックに対するサポートを主張する適合チェッカーは、この仕様で定義されるようにHTML要素のARIAのroleおよびaria-*属性の使用のための文書適合性要件に対するチェックを実装しなければならない

適合文書は、著者が定義したroleまたはaria-*属性をもつ要素を含めてはならない。この仕様に従って、著者は、 4. HTMLでARIA属性を使用するための文書適合性要件の各HTML要素で使用してもよい。 適合性チェッカーは、著者がこれらの役割を明示的に設定することは推奨されないため、著者が暗黙のARIAセマンティックスに一致するロールを要素に明示的に提供しているインスタンスにフラグを立てるべきである

適合性チェッカーは、この仕様に適合していない文書を表面化される場合に、独自の用語または深刻度のレベルを定義してもよい

7. プライバシーおよびセキュリティの配慮

この節は非規範的である。

この仕様は、[wai-aria-1.2]、[dpub-aria-1.0] または [HTML]の機能を定義するものではない。むしろ、HTMLでARIAをチェックするサポートを主張する適合性チェッカーのためのルールおよびガイダンスを提供し、著者へのガイダンスを提供する。

したがって、この仕様は潜在的な懸念をもたらすような新しい機能を定義していないため、プライバシーまたはセキュリティへの影響は知られていない。

A. 参考文献

A.1 標準情報

[accname-1.2]
Accessible Name and Description Computation 1.2. Bryan Garaventa; Melanie Sumner. W3C. 3 April 2024. W3C Working Draft. URL: https://www.w3.org/TR/accname-1.2/
[dpub-aria-1.0]
Digital Publishing WAI-ARIA Module 1.0. Matt Garrish; Tzviya Siegman; Markus Gylling; Shane McCarron. W3C. 14 December 2017. W3C Recommendation. URL: https://www.w3.org/TR/dpub-aria-1.0/
[dpub-aria-1.1]
Digital Publishing WAI-ARIA Module 1.1. Matt Garrish; Tzviya Siegman. W3C. 27 February 2024. W3C Candidate Recommendation. URL: https://www.w3.org/TR/dpub-aria-1.1/
[html]
HTML Standard. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[html-aam-1.0]
HTML Accessibility API Mappings 1.0. Scott O'Hara. W3C. 8 April 2024. W3C Working Draft. URL: https://www.w3.org/TR/html-aam-1.0/
[infra]
Infra Standard. Anne van Kesteren; Domenic Denicola. WHATWG. Living Standard. URL: https://infra.spec.whatwg.org/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. March 1997. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words. B. Leiba. IETF. May 2017. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc8174
[svg-aam-1.0]
SVG Accessibility API Mappings. Amelia Bellamy-Royds; Ian Pouncey. W3C. 10 May 2018. W3C Working Draft. URL: https://www.w3.org/TR/svg-aam-1.0/
[wai-aria-1.1]
Accessible Rich Internet Applications (WAI-ARIA) 1.1. Joanmarie Diggs; Shane McCarron; Michael Cooper; Richard Schwerdtfeger; James Craig. W3C. 14 December 2017. W3C Recommendation. URL: https://www.w3.org/TR/wai-aria-1.1/
[wai-aria-1.2]
Accessible Rich Internet Applications (WAI-ARIA) 1.2. Joanmarie Diggs; James Nurthen; Michael Cooper; Carolyn MacLeod. W3C. 6 June 2023. W3C Recommendation. URL: https://www.w3.org/TR/wai-aria-1.2/

A.2 参考文献

[using-aria]
Using ARIA. Steve Faulkner; David MacDonald. W3C. 27 September 2018. W3C Working Draft. URL: https://www.w3.org/TR/using-aria/
[wai-aria-practices-1.2]
WAI-ARIA Authoring Practices 1.2. Matthew King; JaEun Jemma Ku; James Nurthen; Zoë Bijl; Michael Cooper. W3C. 19 May 2022. W3C Working Group Note. URL: https://www.w3.org/TR/wai-aria-practices-1.2/