11

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

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

次のコードは、支援技術と同じ意味を持っていますか？

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

2 に答える 2

25

答えは「はい」です。ドキュメントの構造化に正しいセマンティックマークアップを使用すると、支援技術がうまく機能します。単純な静的リストの場合は、ロールでマークする必要はありません。

例：baseConceptがHTMLliとして定義されているrole="listitem"について考えてみます。また、baseConcept HTML liは、プロパティを継承しないという事実を除いて、role="listitem"の定義とほぼ同じです。詳細情報

したがって、次の例を検討してください。

<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-levelプロパティを使用したいと考えています。aria-labelledbyおよびaria-ownsはベースマークアップのすべての要素に適用できますが、aria-levelプロパティでは、要素に何らかの役割が必要です。ARIA仕様では、Webオントロジー言語（OWL）を使用して、クラス階層内のロールを表現しているためです。OWLは、これらの役割を、それらの状態およびプロパティとともにクラスとして記述します。したがって、ariaレベルを使用するには、要素を何らかの役割で定義する必要があります。プレーンHTML liは、プロパティや制限を継承しないためです。ロールをlistitemとしてマークすると、listitemがrole="list"の要素によって所有されている必要があります。したがって、両方の役割を使用することになります。

一方、セマンティックマークアップも使用されていない場合は、ロールも役立ちます。例えば：

<div role="list">
  <div role="listitem">dog</div>
  <div role="listitem">cat</div>
  <div role="listitem">sparrow</div>
  <div role="listitem">wolf!</div>
</div>

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

于 2012-06-21T04:48:01.973 に答える
7

あなたの質問は少し曖昧ですが、すでにデフォルトの役割としてそれを持っているアイテムに追加role="listitem"することに利点があるかどうかを尋ねている場合、その特定の質問に対する答えは「いいえ」です。li

（はい、 。liの代わりにaを使用することをお勧めしますdiv。またrole="listitem"、を使用している場合は必要ですdiv。しかし、それがあなたの求めていることではないと思います。）

SteveFaulknerによる「UsingARIA」をチェックしてください。彼は、HTML5でさまざまなARIAの役割をいつどこで使用するかについてのベストプラクティスドキュメントのドラフトをまとめました。

一般的に、要素のデフォルトの役割と同じ役割である場合、要素の役割を指定する必要はありません（指定するべきではありません）。したがって、li要素のデフォルトroleはlistitem。であるため、それを言い換える理由はありません。

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

于 2012-07-06T04:23:51.227 に答える