ARIA: listitem ロール

ARIA のリスト項目 (listitem) ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナーを識別するために使用するリスト (list) ロールと組み合わせて使用します。

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

説明

外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (list) とリスト項目 (listitem) のコンテナーを使用して支援技術で識別できます。

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

警告: 可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 (<ul><ol><li>) をマークアップするべきです。 詳しい例は、ベストプラクティスを参照してください。

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

list

項目のリスト。 リスト (list) ロールを持つ要素には、子として1つ以上のリスト項目 (listitem) ロールを持つ要素か、子として1つ以上のリスト項目 (listitem) ロールを持つ要素を含む1つ以上のグループ (group) ロールを持つ要素が必要です。

group

ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。 (訳注: リスト内にグループをネストできるという仕様は、ARIA 1.2 で、無くなる予定です。)

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

無し

必要な JavaScript 機能

無し

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

ベストプラクティス

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

可能な限り、適切な意味論の HTML 要素を使用して、リストとリスト項目 (<ol><ul><li>) をマークアップするべきです。 例えば、上記の例は次のように書き直すべきです。

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

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

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

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

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

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
listitem の定義
勧告

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

TBD

関連情報