ARIA: list ロール

{{ariaref}}ARIA の list ロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用される listitem ロールと組み合わせて使用されます。

<section role="list">
  <div role="listitem">リスト項目 1</div>
  <div role="listitem">リスト項目 2</div>
  <div role="listitem">リスト項目 3</div>
</section>

説明

外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ list と listitem のコンテナを使用して支援技術で識別できます。 list には1つ以上の listitem の子が含まれているか、1つ以上の group が子として存在し、各 group には1つ以上の listitem が子として格納されている必要があります。

リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。

警告: 可能な限り、適切な意味論の HTML 要素を使用して、list とその listitem（<ul> や <ol> と <li>）をマークアップする必要があります。 詳しくは、ベストプラクティスを参照してください。

 

関連する WAI-ARIA のロール、ステート、プロパティ

listitem

リストやディレクトリ内の単一項目。 listitem ロールを持つ要素は、list ロールや group ロールを持つ要素内にのみ存在します。

group

リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。

キーボードインタラクション

無し

必要な JavaScript 機能

無し

例

 ARIA Lists — Scott O'Hara によるいくつかの有用な例と考え（英語）

ベストプラクティス

例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、role="list" と role="listitem" のみを使用する必要があります。

HTML の <ol> と <ul> とは異なり、ARIA の list ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト（<ol> と <ul>）とリスト項目（<li>）をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直すべきです。

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>

リスト項目の順序が重要な場合は、順序付きリストを使用します。

<ol>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ol>

注: ARIA の list ロールと listitem ロールでは、順序付きリストと順序無しリストを区別しません。

仮に、ol または ul という意味論の HTML 要素を使用して presentation ロールを適用する場合、ARIA では listitem 要素に親 list 要素が必要であるため、各子 li 要素は presentation ロールを継承します。 したがって、li 要素は支援技術には見えませんが、これらの要素の内部に含まれる要素（ネストされたリストを含む）は、支援技術に見えます。

注: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに tab、tabpanel、tablist ロールを使用するべきです。

仕様

スクリーンリーダーのサポート

TBD

関連情報