diff options
Diffstat (limited to 'files/ja/web/accessibility/aria')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/navigation_role/index.html | 48 |
1 files changed, 26 insertions, 22 deletions
diff --git a/files/ja/web/accessibility/aria/roles/navigation_role/index.html b/files/ja/web/accessibility/aria/roles/navigation_role/index.html index 80bdc3d70a..53284b8024 100644 --- a/files/ja/web/accessibility/aria/roles/navigation_role/index.html +++ b/files/ja/web/accessibility/aria/roles/navigation_role/index.html @@ -7,11 +7,9 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role --- -<p>\{{ariaref}}</p> +<p><span class="seoSummary">ナビゲーション (<code>navigation</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、ウェブサイトやページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用します。</span></p> -<p><span class="seoSummary"><code>navigation</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、ウェブサイトまたはページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用されます。</span></p> - -<pre class="brush: html"><div role="navigation" aria-label="メインナビゲーション"> +<pre class="brush: html"><div role="navigation" aria-label="メイン"> <!-- 主要なウェブサイトの場所へのリンクのリスト --> </div> </pre> @@ -20,19 +18,19 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <h2 id="Description" name="Description">説明</h2> -<p><code>navigation</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 HTML の <code><nav></code> 要素と同様に、<code>navigation</code> ランドマークは、ウェブサイトまたはページコンテンツのナビゲーション（navigation）に使用するリンクのグループ（例えば、リスト）を識別する手段を提供します。 ページに複数の <code>navigation</code> ランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用します。</p> +<p>ナビゲーション (<code>navigation</code>) ロールは、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 HTML の <code><nav></code> 要素と同様に、ナビゲーションランドマークは、ウェブサイトまたはページコンテンツのナビゲーションに使用するリンクのグループ (例えば、リスト) を識別する手段を提供します。 1つのページに複数のナビゲーションランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用してください。</p> -<p><code>navigation</code> ランドマークを定義するには、HTML5 の {{htmlelement("nav")}} 要素を使用することをお勧めします。 HTML5 の <code><nav></code> 要素のテクニックが使用されていない場合は、<code>role="navigation"</code> 属性を使用して <code>navigation</code> ランドマークを定義します。</p> +<p>ナビゲーションランドマークを定義するには、HTML5 の <a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code> 要素</a>を使用することをお勧めします。 HTML5 の <code><nav></code> 要素の手法を使用しない場合は、<code>role="navigation"</code> 属性を使用してナビゲーションランドマークを定義してください。</p> <div class="note"> -<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation </code>ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +<p><a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code> 要素</a>を使用すると、自動的にセクションがナビゲーション (<code>navigation</code>) ロールを持つことを伝えることができます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。</p> </div> <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> <dl> <dt>aria-label</dt> - <dd>ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読むので、"navigation" という用語を省略します。</dd> + <dd>ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読み上げるので、「ナビゲーション」という用語を省略します。</dd> </dl> <h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> @@ -45,7 +43,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <h2 id="Examples" name="Examples">例</h2> -<pre><div role="navigation" aria-label="顧客サービス"> +<pre class="brush: html"><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 <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> -<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> <h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> -<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation</code> ロールを持つことを伝えます。 可能であれば、<code><nav></code> を代わりに使用することをお勧めします。</p> +<p><a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code> 要素</a>を使用すると、自動的にセクションがナビゲーション (<code>navigation</code>) ロールを持つことを伝えます。 可能な限り、<code><nav></code> 要素を代わりに使用することをお勧めします。</p> <h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> <h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> -<p>文書に複数の <code>navigation</code> ランドマークロールや {{htmlelement("nav")}} 要素がある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> +<p>文書内に複数のナビゲーション (<code>navigation</code>) ランドマークロールや <a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code> 要素</a>がある場合は、各ランドマークに対してラベルを付けてください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすぐに理解することができます。</p> <pre class="brush: html"><div id="main-nav" role="navigation" aria-label="メイン"> <!-- コンテンツ --> @@ -86,12 +84,12 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4> -<p>文書内の <code>navigation</code> ランドマークロールまたは {{htmlelement("nav")}} 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でメインナビゲーションが繰り返されています。</p> +<p>文書内のナビゲーション (<code>navigation</code>) ランドマークロールや <a href="/ja/docs/Web/HTML/Element/nav"><code><nav></code> 要素</a>が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、それぞれのランドマークに同じラベルを使用します。 この例としては、ページの上部と下部でメインナビゲーションを繰り返すことが挙げられます。</p> <pre class="brush: html"><header> <nav id="main-nav" aria-label="メイン"> <!-- 主要なウェブサイトの場所へのリンクのリスト --> - </div> + </nav> </header> ... @@ -105,14 +103,14 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> -<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="主要なナビゲーション"</code> の <code>role="navigation"</code> の宣言は、"navigation 主要なナビゲーション" として重複してアナウンスすることができます。</p> +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="主要なナビゲーション"</code> の <code>role="navigation"</code> の宣言は、「主要なナビゲーションナビゲーション」のように重複してアナウンスされます。</p> <h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> -<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p> <ul> - <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> + <li><a href="https://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a> (英語)</li> </ul> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -124,7 +122,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <th scope="col">状態</th> </tr> <tr> - <td>{{SpecName("ARIA","#navigation","ARIA Navigtion Role")}}</td> + <td>{{SpecName("ARIA","#navigation","ARIA Navigation Role")}}</td> <td>{{Spec2('ARIA')}}</td> </tr> <tr> @@ -141,11 +139,17 @@ translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li>{{htmlelement("nav")}}: ナビゲーションセクション要素</li> + <li><a href="/ja/docs/Web/HTML/Element/nav"><nav>: ナビゲーションセクション要素</a></li> <li><a href="https://www.w3.org/TR/wai-aria/#navigation">navigation (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> - <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> - <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> - <li><a href="http://html5doctor.com/nav-element/">Semantic navigation with the nav element | HTML5 Doctor</a></li> + <li><a href="https://html5doctor.com/nav-element/">Semantic navigation with the nav element | HTML5 Doctor</a></li> </ul> + +<section id="Quick_links"> + <ol> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> |