ARIA: listitem ロール

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

html

<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>）でマークアップするべきです。詳しい例は、ベストプラクティスを参照してください。

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

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

html

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

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

html

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

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

メモ: CSS で list-style: none; を指定してリストのスタイル設定を行うと、リストの意味づけが除去されます。role="listitem" を追加すると、意味づけが復元されます。

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

仕様書
Accessible Rich Internet Applications (WAI-ARIA) # listitem

このページは 2026年10月29日に MDN の貢献者によって最終更新されました。