\{{ariaref}}
+ナビゲーション (navigation) ランドマークロールは、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。
navigation ランドマークロールは、ウェブサイトまたはページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用されます。
<div role="navigation" aria-label="メインナビゲーション"> +<div role="navigation" aria-label="メイン"> <!-- 主要なウェブサイトの場所へのリンクのリスト --> </div>@@ -20,19 +18,19 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role説明
-+
navigationロールはランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 HTML の<nav>要素と同様に、navigationランドマークは、ウェブサイトまたはページコンテンツのナビゲーション（navigation）に使用するリンクのグループ（例えば、リスト）を識別する手段を提供します。 ページに複数のnavigationランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用します。ナビゲーション (
-navigation) ロールは、ランドマークロールです。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 HTML の<nav>要素と同様に、ナビゲーションランドマークは、ウェブサイトまたはページコンテンツのナビゲーションに使用するリンクのグループ (例えば、リスト) を識別する手段を提供します。 1つのページに複数のナビゲーションランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用してください。+
navigationランドマークを定義するには、HTML5 の {{htmlelement("nav")}} 要素を使用することをお勧めします。 HTML5 の<nav>要素のテクニックが使用されていない場合は、role="navigation"属性を使用してnavigationランドマークを定義します。ナビゲーションランドマークを定義するには、HTML5 の
<nav>要素を使用することをお勧めします。 HTML5 の<nav>要素の手法を使用しない場合は、role="navigation"属性を使用してナビゲーションランドマークを定義してください。-{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが
+navigationロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。
<nav>要素を使用すると、自動的にセクションがナビゲーション (navigation) ロールを持つことを伝えることができます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。関連する WAI-ARIA のロール、ステート、プロパティ
<div role="navigation" aria-label="顧客サービス">
+<div role="navigation" aria-label="顧客サービス">
<ul>
<li><a href="#">ヘルプ</a></li>
<li><a href="#">注文追跡</a></li>
@@ -59,19 +57,19 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role
アクセシビリティに関する懸念
-ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
+ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
ベストプラクティス
好ましい HTML
-{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが navigation ロールを持つことを伝えます。 可能であれば、<nav> を代わりに使用することをお勧めします。
+<nav> 要素を使用すると、自動的にセクションがナビゲーション (navigation) ロールを持つことを伝えます。 可能な限り、<nav> 要素を代わりに使用することをお勧めします。
ランドマークのラベル付け
複数のランドマーク
-文書に複数の navigation ランドマークロールや {{htmlelement("nav")}} 要素がある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。
+文書内に複数のナビゲーション (navigation) ランドマークロールや <nav> 要素がある場合は、各ランドマークに対してラベルを付けてください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすぐに理解することができます。
<div id="main-nav" role="navigation" aria-label="メイン">
<!-- コンテンツ -->
@@ -86,12 +84,12 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role
繰り返されるランドマーク
-文書内の navigation ランドマークロールまたは {{htmlelement("nav")}} 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でメインナビゲーションが繰り返されています。
+文書内のナビゲーション (navigation) ランドマークロールや <nav> 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、それぞれのランドマークに同じラベルを使用します。 この例としては、ページの上部と下部でメインナビゲーションを繰り返すことが挙げられます。
<header>
<nav id="main-nav" aria-label="メイン">
<!-- 主要なウェブサイトの場所へのリンクのリスト -->
- </div>
+ </nav>
</header>
...
@@ -105,14 +103,14 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role
冗長な説明
-スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="主要なナビゲーション" の role="navigation" の宣言は、"navigation 主要なナビゲーション" として重複してアナウンスすることができます。
+スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="主要なナビゲーション" の role="navigation" の宣言は、「主要なナビゲーションナビゲーション」のように重複してアナウンスされます。
追加された利点
-ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。
+ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。