role="presentation"とrole="none" って何？どう使えばいいの？

この記事はなに？

ARIA Authoring Practices Guide (APG)のPractices の中に下記のページがあります。

role="presentation" をあまり扱かったことがなかったので、この機会に使い方などを調べました。

presentation roleとは？

Accessible Rich Internet Applications (WAI-ARIA) 1.3では

Hiding Semantics with the presentation Role | APG | WAI | W3Cからは、Accessible Rich Internet Applications (WAI-ARIA) 1.3へリンクがあり紹介されていました。

An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym none.

ここで出てくる role="none" は role="presentation" と同じ挙動になります。
違いはなくて、私が調べた範囲だとバージョンの違いのようです。

• ARIA 1.1以前では、role="presentation"
• ARIA 1.1以降では、role="none"

role="presentation" を aria-hidden="true" と同義に捉える人が多かったので、 role="none" が作られたようですね。

Accessible Rich Internet Applications (WAI-ARIA) 1.3で扱っている、 role="presentation" は role="none" と置き換えて読んでも差し支えなさそうです。

MDNでは

presentation ロールの使用 - アクセシビリティ | MDNもミてみたいと思います。

presentation ロールは、要素とそれに関連する子要素の意味論的意味を取り除くために使用されます。

つまり、要素のセマンティックな意味を削除し、純粋な装飾要素として扱うためのロールのようです。

ARIA Authoring Practices Guide (APG)にもどって

1. 要素の暗黙的な ARIA ロールと、そのロールに関連付けられたすべての ARIA 状態およびプロパティは、支援技術から非表示になる
2. 要素に含まれるテキスト、つまり内部テキスト、およびそのすべての子孫要素の内部テキストは、支援技術に対して表示されたまま
3. 各子孫要素の役割、状態、プロパティは、子孫がプレゼンテーション要素のコンテキストを必要としない限り、支援技術に対して表示されたまま

role="presentation"が無視される場合

• フォーカス可能な要素の場合
  • HTMLリンク、 tabindex 属性
• 要素が aria-label などのようにグローバルなARIAの状態やプロパティーを持っている場合

presentation roleとは

• 要素のセマンティックな意味を削除し、純粋な装飾要素として扱うためのロール
• role="presentation" と role="none" は同じ
  • role="none" のほうが新しい

使い方

良く使われる例として挙げられるのは下記のようです。

• 表（<table>）
• リスト（<ul> や <ol>）
• 見出し（<h1> 〜 <h6>）

tableの例

<table role="presentation">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

こうすると、「表」としてのセマンティックな意味がなくなり、単なるレイアウトとして認識されます。

ulの例

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#">Tab 1</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 2</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 3</a>
  </li>
</ul>

presentation ロールによるセマンティクスの非表示 | APG | WAI | W3C にあった <ul> で作ったタブリストの例だと、<li> がセマンティックな意味を失い、無視されます。
そして role="tab" を持つ <a> がタブリストの直接の子要素と認識されます。

入れ子要素に影響しない場合がある

<ul role="none">
  <li>Item</li>
</ul>

このように記載した場合、 <li> は依然として意味を持つ可能性があります。

子孫要素をプレゼンテーショナル（装飾的）にしてセマンティクスを自動的に隠すロール

一部のユーザーインターフェースコンポーネントには、アクセシビリティAPIでテキストしか含めることができないものがあります。
たとえば、ボタン内に含まれるセマンティック要素をアクセシビリティAPIで表現する方法は存在しません。
この制約に対応するため、WAI-ARIAでは、セマンティックな子要素をサポートできないロールを持つ要素のすべての子孫要素に対して、ブラウザが自動的にrole="presentation"を適用することを求めています。

すべての子要素をプレゼンテーショナルにする必要があるロールは以下のとおりです。

• button
• checkbox
• img
• meter
• menuitemcheckbox
• menuitemradio
• option
• progressbar
• radio
• scrollbar
• separator
• slider
• switch
• tab

所感

role="presentation" と role="none" は意味を失わせるので、破壊的なroleに感じました。
No ARIA is better than Bad ARIA. Before using any ARIA. の原則に従うならば、注意深く利用する必要があると思います。

そもそも、レイアウト目的であれば、 <div> などのタグとCSSを適切に組み合わせたほうが良いのではないでしょうか。

まとめ

• presentation roleとは
  • 要素のセマンティックな意味を削除し、純粋な装飾要素として扱うためのロール
  • role="presentation" と role="none" は同じ
    • role="none" のほうが新しい
• CSSで解決できるなら使わないほうがよい
• 使うときは、スクリーンリーダーなどの支援技術でも確認をしよう

参考

• Hiding Semantics with the presentation Role | APG | WAI | W3C
• Accessible Rich Internet Applications (WAI-ARIA) 1.3
• Accessible Rich Internet Applications (WAI-ARIA) 1.3
• presentation ロールの使用 - アクセシビリティ | MDN