暗黙のネイティヴロールセマンティックスがアクセシビリティーAPIに対応づけされない要素。
要素がページの外観を変更するために使用されるが、要素型によって暗黙的な、機能的な、インタラクティブな、または構造の関連性を一切持たない、またはWAI-ARIAをサポートしない古いブラウザーでアクセシビリティーフォールバックを提供するために使用する場合が使用目的である。
ユースケースの例:
- コンテンツが完全にプレゼンテーションな(スペーサー画像、装飾的なグラフィック、または要素をクリアするような)要素。
- 完全な代替テキストが使用可能であり
aria-labelledby
と(必要な場合)aria-describedby
でマークアップされるimg
ロールをもつコンテナにおける画像。 - CSSの追加のマークアップ"フック"として使用される要素。または
- レイアウトテーブルおよび/またはその関連する行、セル、その他のいずれか。
フォーカス可能でない、presentationのロールをもつ任意の要素に対して、ユーザーエージェントは、アクセシビリティーAPIへ要素の暗黙のネイティヴセマンティックス(ロールとそのステートおよびプロパティ)を公開してはならない。しかし、ユーザーエージェントは、presentationの明示的または継承されたロールを持たないコンテンツまたは子孫要素を公開しなければならない。このように、presentation
ロールは与えられる要素に何のロールも持たないものとして扱われせる、またはアクセシビリティーツリーから削除させるが、要素内に含まれているコンテンツにアクセシビリティーツリーから削除させることはない。
たとえば、アクセシビリティーAPIによれば、次のマークアップ要素は、同じロールセマンティックス(ロールなし)と同じコンテンツを持つように見えるだろう。
<h1 role="presentation"> Sample Content </h1>
<span> Sample Content </span>
<span role="presentation"> Sample Content </span>
Sample Content
presentation
ロールは、要素に対するデフォルトのアクセシビリティーAPIロールが存在することを意味する、暗黙のネイティヴセマンティックスを持つ要素で使用される。追加の子孫要素が与えられる場合、一部の要素はただ単に完結する。たとえば、HTMLにおいて、(grid
ロールとマッチする)table
要素は、順番にth
またはtd
の子(gridcell
、columnheader
、rowheader
ロール)を要求する、tr
の子孫(row
ロール)を要求する。同様に、リストはリスト項目の子を必要とする。要素のセマンティックスを完全なものにする子孫要素は、必須の所有される要素としてWAI-ARIAに記載される。
presentation
の明示的または継承されるロールが、所有される要素を必要としているWAI-ARIAロールの暗黙のセマンティックをもつ要素に適用され、さらにpresentation
の明示的なロールを持つ要素である場合、ユーザーエージェントは、定義された明示的なロールを持たないすべての所有される要素にpresentationの継承されたロールを適用しなければならない。また、presentationの明示的または継承されたロールは、ホスト言語仕様によって定義されるような任意の必須の子を持つホスト言語要素に適用され、さらにpresentationの明示的なロールを持つ要素である場合、ユーザーエージェントは、定義された明示的なロールを持たない任意の必須の子にpresentationの継承されたロールを適用しなければならない。presentationの明示的または継承されるロールをもちかつフォーカス可能でない任意の要素に対して、ユーザーエージェントは、その要素に対するロール固有のWAI-ARIAステートおよびプロパティを無視しなければならない。たとえばHTMLにおいて、presentation
のロールをもつul
またはol
要素は、ul
またはol
が対応するlist
ロールがlistitem
の必須の所有される要素を持つので、li
要素の暗黙のネイティヴセマンティックスを取り除かさせる。同様に、HTMLのtable
要素がWAI-ARIAロールに直接対応する暗黙のネイティヴセマンティックロールを持たないが、HTML仕様は要素がtable
要素の必須の構造的な子孫であることを示すため、そのthead
/tbody
/tfoot
/tr
/th
/td
子孫の暗黙のネイティヴセマンティックスも削除される。子孫または所有される要素の明示的なロールは、presentation
の継承されたロールを上書きし、所有する要素に明示的なロールをもつ他の要素として動作させる。公開する暗黙のロールの動作がアクセシビリティーツリーに不正な形式をもたらす場合、期待される結果は未定義であり、ユーザーエージェントは、アクセシビリティーツリーを修復するために内部の回復メカニズムに助けを求めてもよい。
注:WAI-ARIA必須の所有される要素に対応する要素の暗黙のネイティヴセマンティックスのみが削除される。この要素がまた適用されるpresentation
の明示的なロールを持たない限り、ネストした表やリストを含む、任意の他のコンテンツは、そのまま残る。
たとえば、アクセシビリティーAPIによれば、次のマークアップ要素は、同じロールセマンティックス(ロールなし)と同じコンテンツを持つように見えるだろう。
<ul role="presentation">
<li> Sample Content </li>
<li> More Sample Content </li>
</ul>
<span>
<span> Sample Content </span>
<span> More Sample Content </span>
</span>
注:この状況が適用可能である必須の子をもつ他のWAI-ARIAロールが存在する(たとえば、radiogroupsおよびlistboxes)が、テーブルおよびリストは、プレゼンテーションの継承を適用する可能性がある最も一般的な実世界のケースである。
presentation
の明示的または継承されるロールをもつ任意の要素に対して、ユーザーエージェントは、プレゼンテーション要素に対するすべてのホスト言語固有の分類要素に継承されるpresentation
のロールを適用しなければならない。たとえば、captionは単なるプレゼンテーションテーブルのラベルであるため、presentation
のロールをもつtable
要素は、caption
要素の暗黙のネイティヴセマンティックスを取り除かせる。
明示的または継承されるpresentationのロールをもつ任意の要素について、ユーザーエージェントは、任意の非グローバル、ロール固有のWAI-ARIAステートおよびプロパティを無視しなければならない。しかし、ユーザーエージェントは、たとえ要素が明示的または継承されるpresentation
のロールを持つとしても、グローバルなWAI-ARIAステートおよびプロパティをアクセシビリティーAPIに常に公開しなければならない。
たとえば、aria-hidden
はグローバル属性であり、常に適用される。要素がプレゼンテーションステートではなかった場合、aria-level
はグローバル属性ではなく、したがって適用のみされる。
<h1 role="presentation" aria-hidden="true"> Sample Content </h1>
<h1 role="presentation" aria-level="2"> Sample Content </h1>
presentationのロールをもつ要素がフォーカス可能である場合、要素が理解可能と操作可能の両方であることを保証にするために、ユーザーエージェントは、ロールの正常な効果を無視しなければならず、かつ暗黙のネイティヴセマンティックスで要素を公開しなければならない。presentation
ロールを画像に適用する場合、著者は(HTML4のalt=""
を使用するなど)意味のある代替テキストを提供すべきではない。
次のコードサンプルにおいて、包含するdiv
要素は、img
のWAI-ARIAロールを持ち、キャプションの段落によって適切に標識される。ロールおよび代替テキストが包含する要素によって提供されるため、この例においてimg
要素はpresentationとしてマークすることができる。
<div role="img" aria-labelledby="caption">
<img src="example.png" role="presentation" alt="">
<p id="caption">A visible text caption labeling the image.</p>
</div>
次のコードサンプルにおいて、アンカー(HTMLのa
要素)はtreeitemとして動作しているので、リスト項目(HTMLのli
要素)は、リスト項目に対するユーザーエージェントの暗黙のネイティヴセマンティックスを上書きするために明示的なWAI-ARIA presentationロールが割り当てられる。
<ul role="tree">
<li role="presentation">
<a role="treeitem" aria-expanded="true">An expanded tree node</a>
</li>
…
</ul>