WAI-ARIA 1.2Roles

ドキュメント構造ロール

ドキュメント構造ロールは、ページのコンテンツ構造を定義します。 見出し、リスト、テーブル、画像などの情報構造を支援技術に伝えます。 ほとんどのドキュメント構造ロールにはネイティブHTMLの同等要素があり、 ARIAの第一ルールに従いネイティブ要素を優先すべきです。

ドキュメント構造ロール一覧

ロールHTML要素説明ARIA使用の目安
article<article>独立したコンテンツのまとまり。ブログ記事、フォーラム投稿など。ほぼ不要。<article> を使う。
heading<h1>〜<h6>セクションの見出し。aria-level で見出しレベルを指定。不要。<h1>〜<h6> を使う。
list<ul> / <ol>リストアイテムのコンテナ。ほぼ不要。ネイティブリスト要素を使う。
listitem<li>リスト内の個々のアイテム。不要。<li> を使う。
img<img>画像コンテンツ。複数要素で1つの画像を構成する場合に使用。SVG やアイコンフォントなどネイティブ img 以外に使用。
figure<figure>図、イラスト、コードブロックなどの自己完結型コンテンツ。不要。<figure> + <figcaption> を使う。
table<table>データテーブルのコンテナ。行と列で構成。不要。<table> を使う。
row<tr>テーブルまたはグリッド内の行。不要。<tr> を使う。
cell<td>テーブル内のデータセル。不要。<td> を使う。
columnheader<th>列のヘッダーセル。不要。<th scope="col"> を使う。
rowheader<th scope="row">行のヘッダーセル。不要。<th scope="row"> を使う。
separator<hr>コンテンツのセクション区切り線。不要。<hr> を使う。
toolbarなしボタンやコントロールのグループ。ツールバーUIにのみ使用。
tooltipなし要素の補足説明をポップアップ表示。ネイティブ要素がないため、ARIA が必要。
math<math>（MathML）数式コンテンツ。MathML が使えない場合に検討。
noteなし本文に対する補足情報やヒント。補足ブロックに使用可能。
definition<dfn>用語の定義。ほぼ不要。<dfn> と <dd> を使う。
term<dt>定義リスト内の用語。不要。<dt> を使う。
presentation / none—要素のセマンティクスを除去。装飾的な要素に使用。レイアウト用テーブルなど、セマンティクスが不適切な場合に使用。

ネイティブHTML vs ARIAロール — 判断基準

ネイティブHTMLを使うべき場合

  • 同等のHTML要素が存在する
  • ブラウザのデフォルト動作が活用できる
  • キーボード操作が自動的にサポートされる
  • 実装がシンプルになる

ARIAロールを使う場合

  • ●同等のHTML要素が存在しない（tooltip, toolbar等）
  • ●複数要素で1つのコンポーネントを構成（SVGアイコン等）
  • ●レイアウト用要素のセマンティクスを除去する（role="presentation"）
  • ●CMS等でHTML構造を変更できない制約がある

インタラクティブデモ

ネイティブHTML vs ARIAロール

<h2>
<h2>セクション見出し</h2>
ネイティブ <h2> が圧倒的に簡潔。aria-level の指定も不要。
<ul> + <li>
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>
ネイティブリスト要素なら、ブラウザが自動的にリストロールを付与します。
<table>
<table>
  <tr>
    <th>名前</th>
    <td>値</td>
  </tr>
</table>
テーブルのARIA実装は複雑。ネイティブ <table> なら行・列ヘッダーが自動的に関連付けられます。
ARIAの第一ルール: ネイティブHTML要素で目的を果たせる場合は、ARIA ロールを追加する代わりにネイティブ要素を使いましょう。