ARIA: list ロール
ARIA のリスト (list
) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (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
) を子として持つ必要があります。
リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。
関連する WAI-ARIA のロール、ステート、プロパティ
キーボードインタラクション
無し
必要な 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>
メモ: ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。
余談ですが、意味論的な HTML 要素である ol
または ul
を使用してプレゼンテーション (presentation
) ロールを適用する場合、ARIA ではリスト項目 (listitem
) 要素に親のリスト (list
) 要素が必須であるため、各子 li
要素はプレゼンテーション (presentation
) ロールを継承することに注意してください。 そのため、li
要素は支援技術には公開されませんが、ネストされたリストを含め、これらの li
要素の内部に含まれる要素は、支援技術からは見えることになります。
メモ: タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (tab
)、タブパネル (tabpanel
)、タブリスト (tablist
) のロールを使用するべきです。
仕様書
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # list |
スクリーンリーダーのサポート
TBD
関連情報
- WAI-ARIA ロール
alertdialog ロールの使用
ARIA: alert ロール
ARIA: application ロール
ARIA: article ロール
ARIA: banner ロール
ARIA: button ロール
ARIA: cell ロール
ARIA: checkbox ロール
ARIA: complementary ロール
ARIA: contentinfo ロール
ARIA: dialog ロール
ARIA: document ロール
ARIA: feed ロール
ARIA: figure ロール
ARIA: form ロール
ARIA: generic ロール
ARIA: grid ロール
ARIA: gridcell ロール
ARIA: heading ロール
ARIA: img ロール
ARIA: list ロール
ARIA: listbox ロール
ARIA: listitem ロール
ARIA: main ロール
ARIA: navigation ロール
ARIA: none ロール
ARIA: option ロール
ARIA: radio ロール
ARIA: region ロール
ARIA: row ロール
ARIA: rowgroup ロール
ARIA: search ロール
ARIA: spinbutton ロール
ARIA: switch ロール
ARIA: tab ロール
ARIA: table ロール
ARIA: term ロール
ARIA: textbox ロール
ARIA: tooltip ロール
group ロールの使用
link ロールの使用
log ロールの使用
presentation ロールの使用
progressbar ロールの使用
slider ロールの使用
status ロールの使用
toolbar ロールの使用