複数の<nav>タグ

97

html5の同じページで複数のタグを使用できますか？

私が読んだ本 Zeldman.comの記事を、それは私には完全には明らかではありません

すなわち

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

html

— スティーブンマードック
ソース

1

Role = 'main'は、サイトw3.org/TR/wai-aria/roles#mainのメインコンテンツを識別するためのものであり、ブログロールの役割はありません。microdata-schema.orgを使用していると思います。

— Andrew Luhring、2015

142

そのとおり。あなたは複数持つことができheader、navおよびfooterタグサンセリフペナルティを。

タグを意味的に使用していて、それらを無効な場所に配置していないことを確認している限り（それらはブロックレベルの要素であるため、たとえばインライン要素内に配置することはできません）、次にすべきではありません。ステッカーが言っていることについてあまり心配しないでください。プロジェクトを進める代わりに、細かい点について議論するのは簡単です。

— Coreyward
ソース

2

同じフッター内の複数のナビゲーションはどうですか？

— igasparetto 2015年

4

@igasparetto完全に有効。特に、スタイリングの便宜のためだけでなく、コンテンツの構造を表す方法で使用する場合。

— coreyward

ナビゲーションの種類に使用する標準ラベルについてのガイダンスはありますか？具体的には、メインナビゲーション、サブナビゲーション、ユーティリティナビゲーション（クイックリンクなど）、およびフッターナビゲーションですか？また、<nav>既に<footer>タグの内側にある場合、適用するのは冗長aria-label="footer navigation"ですか？

— chunk_split

1

@chunk_split新しい質問をした方がいいと思いますが、StackOverflowが適切なコミュニティかどうかはわかりません。ARIAの属性については、冗長に見えても追加しても安全です。

— coreyward

3

答えはイエスです。<nav>フッターにタグを付けることができます。詳細については、mdnの<nav>ドキュメントをご覧ください。

— ハロルド・ラモス
ソース

信頼できるリンクを提供する良い仕事。リンクされたページは、その使用上の注意で、特に「ドキュメントにはいくつかの<nav>要素があるかもしれない」と述べています。

— エド・ギブス

2

はい、複数あります <nav>要素は絶対に問題ありません。

スクリーンリーダーを使用しているユーザーがそれらを区別できるようにする必要があります。<nav>を使用してそれぞれにラベルを付けることでそれを行うことができますaria-label。

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

または、<nav>ラベル付け要素として識別できる画面上に表示されるテキストの1つである場合、aria-labelledby次のように使用できます。

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

複数のナビゲーションランドマークの使用について詳しくは、こちらをご覧ください。

— ルカランカ
ソース