ARIA: list ロール

説明

外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (list) とリスト項目 (listitem) のコンテナーを使用して支援技術で識別できます。 リスト (list) は、1 つ以上のリスト項目 (listitem) の子を持つか、代わりに 1 つ以上のグループ (group) が子として存在し、各グループ (group) が 1 つ以上のリスト項目 (listitem) を子として持つ必要があります。

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

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

listitem

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

group

ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。

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

無し

必要な JavaScript 機能

無し

例

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

ベストプラクティス

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

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>

余談ですが、意味論的な HTML 要素である ol または ul を使用してプレゼンテーション (presentation) ロールを適用する場合、ARIA ではリスト項目 (listitem) 要素に親のリスト (list) 要素が必須であるため、各子 li 要素はプレゼンテーション (presentation) ロールを継承することに注意してください。 そのため、li 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの li 要素の内部に含まれる要素は、支援技術からは見えることになります。

仕様書

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

TBD

関連情報

• Accessibility Object Model
• ARIA in HTML
• <ul>
• <ol>
• <li>
• ARIA: listitem ロール
• ARIA: group ロール

1. WAI-ARIA ロール
   alertdialog ロールの使用ARIA: alert ロールARIA: application ロールARIA: article ロールARIA: banner ロールARIA: button ロールARIA: cell ロールARIA: checkbox ロールARIA: columnheader ロールARIA: combobox ロールARIA: command ロールARIA: comment ロールARIA: complementary ロールARIA: composite ロールARIA: contentinfo ロールARIA: definition ロールARIA: dialog ロールARIA: directory ロール 非推奨; ARIA: document ロールARIA: feed ロールARIA: figure ロールARIA: form ロールARIA: generic ロールARIA: grid ロールARIA: gridcell ロールARIA: heading ロールARIA: img ロールARIA: input ロールARIA: landmark ロールARIA: list ロールARIA: listbox ロールARIA: listitem ロールARIA: main ロールARIA: mark ロールARIA: marquee ロールARIA: math ロールARIA: menu ロールARIA: menubar ロールARIA: menuitem ロールARIA: menuitemcheckbox ロールARIA: menuitemradio ロールARIA: meter ロールARIA: navigation ロールARIA: none ロールARIA: option ロールARIA: radio ロールARIA: radiogroup ロールARIA: range ロールARIA: region ロールARIA: roletype ロールARIA: row ロールARIA: rowgroup ロールARIA: rowheader ロールARIA: scrollbar ロールARIA: search ロールARIA: searchbox ロールARIA: section ロールARIA: sectionhead ロールARIA: select ロールARIA: separator ロールARIA: spinbutton ロールARIA: structure ロールARIA: suggestion ロールARIA: switch ロールARIA: tab ロールARIA: table ロールARIA: tablist ロールARIA: tabpanel ロールARIA: term ロールARIA: textbox ロールARIA: timer ロールARIA: tooltip ロールARIA: tree ロールARIA: treegrid ロールARIA: treeitem ロールARIA: widget ロールARIA: window ロールARIA: 文書構造ロールgroup ロールの使用link ロールの使用log ロールの使用presentation ロールの使用progressbar ロールの使用slider ロールの使用status ロールの使用toolbar ロールの使用