web-dev-qa-db-ja.com

HTML5 nav要素とrole = "navigation"

次のすべてに同じ意味の意味がありますか？そうでない場合は、答えを説明してください。


1。

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>


2。

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>


。

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>
html5semantic-markupnav
48
Web_Designer

Alohci注意 のように、HTML5によると、例3は 許可されない です。

しかし、例1と例2はnot意味的に同等です。

navはセクション要素であり、divはセクション要素ではありません。したがって、例1では、タイトルのないセクション（空の見出しに類似）を作成し、ドキュメント全体を変更します outline 。

また、navは常に親セクションコンテンツ（各セクションルート）に属するので、サイト全体のナビゲーション、メインコンテンツのナビゲーションが可能です。 、メインコンテンツのチャプター3のみのナビゲーション、サイドバーなどのセカンダリコンテンツのナビゲーション。

この違いは navigationロール の定義に表されています

文書または関連文書をナビゲートするためのナビゲーション要素（通常はリンク）のコレクション。

および nav要素 （私によってボルディング）：

nav要素は、他のページまたはページ内の部分にリンクするページのセクションを表します。ナビゲーションリンクのあるセクションです。

また、注意してください：WAI-ARIAをサポート/認識しないHTML5ユーザーエージェントは、例2にナビゲーションが含まれていること（およびその逆）を理解しません。

45
unor

Twitter Bootstrap は<nav role="navigation">を使用します

これは、すべてのニーズを最も効果的にカバーしているようです。

アクセシビリティを支援するために、必ずすべてのnavbarにrole = "navigation"を追加してください。

w3.orgによるアドバイスもあります

21
bdanin

<nav role="navigation">は、W3C検証サービスでHTML5 dtdを使用して検証します。

支援技術が追いつくまで古いものと新しいものの両方をサポートするので、私にとっては良い選択肢のようです。

5
sam

最初の2つのケースは意味的に同等です。 3番目はそうではありません。 <ul>には デフォルトの暗黙のARIAセマンティックlistがあり、directory、list、listbox、menu、menubar、presentation、tablist、toolbar、またはtreeであるため、navigationに設定すると無効になり、listセマンティック<ul>要素には、最初の2つのケースがあります。

5
Alohci

WAVE Web Accessibility Tool を使用して、このようなことに関する情報を取得できます。

私はそこにドキュメンテーションと結果ビューを見つけましたが、少しわかりにくいです。誰もがウェブ上のアクセシビリティについてよく知っているわけではないので、明確な例があれば良いと思います。 （結果ビューは非常に良く見えますが、それでも例が役立ちます。）

2
Leo

OK、これは良い質問です。要するに、これは似たような問題を提案する2つ以上の仕様が異なる時間にリリースされ、異なるブラウザ/スクリーンリーダーによってサポートされるときに起こることです。

<nav>要素にはnavigationロールが自動的に付与されるため、理論上はオプション1を使用できます。ただし、一部のスクリーンリーダーはそれをまだ知らないため、2を使用する方が良いでしょう。オプション3は奇妙なように見えますが、順序付けられていないリストではなく、ナビゲーションです。

もちろん、これはいい例です。多くのARIAロールには、一致するHTML要素がないため、ARIAの他のものを使用していて、明示的にしたいため、オプション2に進むことができます。

個人的には、GZIPがファイルサイズを無関係にし、それをATでテストしました（VoiceoverとWindowsの何か、今は思い出せません）で動作させるため、2を使用します。

2
Rich Bradshaw