role = "list"とrole = "listitem"を使用する理由はありますか？

Question

次のコードを使用する利点はありますか？

<ul role="list"> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
</ul> 

次のコードでは、支援技術に同じ意味を持っていますか？正しいセマンティックマークアップは、文書を構造化するために使用される場合に

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

Answer 1

は、答えはイエス、支援技術がうまく機能しています。シンプルな静的リストの場合は、ロールにマークする必要はありません。

たとえば、role="listitem"のbaseConceptがHTML liと定義されているとします。また、baseConcept HTML liは、プロパティを継承しないという点を除いて、role = "listitem"定義とほとんど同じです。 info

よりしたがって、次の例を考えてみます。

<h3 id="header">Vegetables</h3> 
    <ul role="list" aria-labelledby="header" aria-owns="external_listitem"> 
    <li role="listitem" aria-level="3">Carrot</li> 
    <li role="listitem" aria-level="3">Tomato</li> 
    <li role="listitem" aria-level="3">Lettuce</li> 
    </ul> 
… 
<div role="listitem" id="external_listitem">Asparagus</div> 

ここではページ作成者は、Liのためのアリアレベルのプロパティを使用することを望んでいます。基本マークアップのすべての要素にaria-labelledbyとaria-ownsを適用することができますが、aria-levelプロパティでは、要素に何らかの役割が必要です。 ARIA仕様はWeb Ontology Language（OWL）を使用してクラス階層内の役割を表現するため、 OWLは、これらの役割を、クラスの状態とプロパティとともに記述します。したがって、aria-levelを使用するために、要素はプレーンなHTML liがプロパティや制限を継承しないようにいくつかの役割を定義する必要があります。ロールをlistitemとしてマークすると、role = "list"の要素がlistitemを所有している必要があります。つまり、両方の役割を使用することになります。

一方、セマンティックマークアップも使用されていない場合は、ロールも便利です。たとえば、

ここでスクリーンリーダーソフトウェアは、他の通常のHTMLリストと同様にARIAリスト（divで構成）を示します。

Answer 2

質問はちょっとあいまいですが、li項目にrole = "listitem"を追加する利点があるかどうかを尋ねている場合は、に既定の役割が既にあります。その特定の質問に対する回答はです：No.

（はい、liの方がdivのほうが優先されますが、divから始める場合はrole = "listitem"が必要ですが、liが優先されますが、それはあなたのものだとは思いません）

これをチェックアウトするblog post by Steve Faulkner;彼は、HTML5でさまざまなARIAの役割をいつどこで使うべきかについてのベストプラクティスドラフト文書をまとめました。ドキュメントは現在hereですが、非公式のドラフトなので、今後もそのリンクが機能するかどうかはわかりません。

一般的に言えば、要素の役割が要素の既定の役割と同じである場合、要素の役割を指定する必要はありません。したがって、li要素はlistitemのデフォルトの役割を持っているので、そのことを再度述べる理由はありません。

このルールにはいくつかの例外がありますが、ほとんどの場合、ブラウザがまだデフォルトの役割を正しく実装していない新しいHTML5要素に関係しています。たとえば、HTML5のarticle要素は、すべてのブラウザで記事の役割を持つようにはまだ公開されていないため、実際には<article role='article'>などが推奨されます。