ARIA: navigation ロール

ナビゲーション (navigation) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。

html
<div role="navigation" aria-label="メイン">
  <!-- 主要なウェブサイトの場所へのリンクのリスト -->
</div>

これはウェブサイトのメインナビゲーションです。

説明

ナビゲーション (navigation) ロールは、ランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 HTML の <nav> 要素と同様に、ナビゲーションランドマークは、ウェブサイトまたはページコンテンツのナビゲーションに使用するリンクのグループ (例えば、リスト) を識別する手段を提供します。 1 つのページに複数のナビゲーションランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の 2 つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用してください。

ナビゲーションランドマークを定義するには、HTML5 の <nav> 要素を使用することをお勧めします。 HTML5 の <nav> 要素の手法を使用しない場合は、role="navigation" 属性を使用してナビゲーションランドマークを定義してください。

メモ: <nav> 要素を使用すると、自動的にセクションがナビゲーション (navigation) ロールを持つことを伝えることができます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。

関連する WAI-ARIA のロール、ステート、プロパティ

aria-label

ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読み上げるので、「ナビゲーション」という用語を省略します。

キーボードインタラクション

無し

必要な JavaScript 機能

無し

例

html
<div role="navigation" aria-label="顧客サービス">
  <ul>
    <li><a href="#">ヘルプ</a></li>
    <li><a href="#">注文追跡</a></li>
    <li><a href="#">出荷と配達</a></li>
    <li><a href="#">返品</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">お店を探す</a></li>
  </ul>
</div>

アクセシビリティに関する懸念

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス

好ましい HTML

<nav> 要素を使用すると、自動的にセクションがナビゲーション (navigation) ロールを持つことを伝えます。 可能な限り、<nav> 要素を代わりに使用することをお勧めします。

ランドマークのラベル付け

複数のランドマーク

文書内に複数のナビゲーション (navigation) ランドマークロールや <nav> 要素がある場合は、各ランドマークに対してラベルを付けてください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすぐに理解することができます。

html
<div id="main-nav" role="navigation" aria-label="メイン">
  <!-- コンテンツ -->
</div>

...

<nav id="footer-nav" aria-label="フッター">
  <!-- コンテンツ -->
</nav>

繰り返されるランドマーク

文書内のナビゲーション (navigation) ランドマークロールや <nav> 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、それぞれのランドマークに同じラベルを使用します。 この例としては、ページの上部と下部でメインナビゲーションを繰り返すことが挙げられます。

html
<header>
  <nav id="main-nav" aria-label="メイン">
    <!-- 主要なウェブサイトの場所へのリンクのリスト -->
  </nav>
</header>

...

<footer>
  <nav id="footer-nav" aria-label="メイン">
    <!-- 主要なウェブサイトの場所へのリンクのリスト -->
  </nav>
</footer>

冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="主要なナビゲーション" の role="navigation" の宣言は、「主要なナビゲーションナビゲーション」のように重複してアナウンスされます。

追加された利点

ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# navigation
Unknown specification

スクリーンリーダーのサポート

TBD

関連情報

  1. WAI-ARIA ロール
    1. alertdialog ロールの使用
    2. ARIA: alert ロール
    3. ARIA: application ロール
    4. ARIA: article ロール
    5. ARIA: banner ロール
    6. ARIA: button ロール
    7. ARIA: cell ロール
    8. ARIA: checkbox ロール
    9. ARIA: complementary ロール
    10. ARIA: contentinfo ロール
    11. ARIA: dialog ロール
    12. ARIA: document ロール
    13. ARIA: feed ロール
    14. ARIA: figure ロール
    15. ARIA: form ロール
    16. ARIA: generic ロール
    17. ARIA: grid ロール
    18. ARIA: gridcell ロール
    19. ARIA: heading ロール
    20. ARIA: img ロール
    21. ARIA: list ロール
    22. ARIA: listbox ロール
    23. ARIA: listitem ロール
    24. ARIA: main ロール
    25. ARIA: navigation ロール
    26. ARIA: none ロール
    27. ARIA: option ロール
    28. ARIA: radio ロール
    29. ARIA: region ロール
    30. ARIA: row ロール
    31. ARIA: rowgroup ロール
    32. ARIA: search ロール
    33. ARIA: spinbutton ロール
    34. ARIA: switch ロール
    35. ARIA: tab ロール
    36. ARIA: table ロール
    37. ARIA: term ロール
    38. ARIA: textbox ロール
    39. ARIA: tooltip ロール
    40. group ロールの使用
    41. link ロールの使用
    42. log ロールの使用
    43. presentation ロールの使用
    44. progressbar ロールの使用
    45. slider ロールの使用
    46. status ロールの使用
    47. toolbar ロールの使用