files/ja/web/accessibility/aria/roles/navigation_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

---
title: 'ARIA: navigation ロール'
slug: Web/Accessibility/ARIA/Roles/Navigation_Role
tags:
  - ARIA
  - ARIA Role
  - 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>

<pre class="brush: html">&lt;div role="navigation" aria-label="メインナビゲーション"&gt;
  &lt;!-- 主要なウェブサイトの場所へのリンクのリスト --&gt;
&lt;/div&gt;
</pre>

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

<h2 id="Description" name="Description">説明</h2>

<p><code>navigation</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 HTML の <code>&lt;nav&gt;</code> 要素と同様に、<code>navigation</code> ランドマークは、ウェブサイトまたはページコンテンツのナビゲーション（navigation）に使用するリンクのグループ（例えば、リスト）を識別する手段を提供します。 ページに複数の <code>navigation</code> ランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用します。</p>

<p><code>navigation</code> ランドマークを定義するには、HTML5 の {{htmlelement("nav")}} 要素を使用することをお勧めします。 HTML5 の <code>&lt;nav&gt;</code> 要素のテクニックが使用されていない場合は、<code>role="navigation"</code> 属性を使用して <code>navigation</code> ランドマークを定義します。</p>

<div class="note">
<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <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>
</dl>

<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>

<p>無し</p>

<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>

<p>無し</p>

<h2 id="Examples" name="Examples">例</h2>

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

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2>

<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>&lt;nav&gt;</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>

<pre class="brush: html">&lt;div id="main-nav" role="navigation" aria-label="メイン"&gt;
  &lt;!-- コンテンツ --&gt;
&lt;/div&gt;

...

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

<h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4>

<p>文書内の <code>navigation</code> ランドマークロールまたは {{htmlelement("nav")}} 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でメインナビゲーションが繰り返されています。</p>

<pre class="brush: html">&lt;header&gt;
  &lt;nav id="main-nav" aria-label="メイン"&gt;
    &lt;!-- 主要なウェブサイトの場所へのリンクのリスト --&gt;
  &lt;/div&gt;
&lt;/header&gt;

...

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

<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4>

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

<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>

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

<ul>
 <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li>
</ul>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
  </tr>
  <tr>
   <td>{{SpecName("ARIA","#navigation","ARIA Navigtion Role")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
  <tr>
   <td>{{SpecName("ARIA Authoring Practices","#aria_lh_navigation","Navigation Landmark Role")}}</td>
   <td>{{Spec2('ARIA Authoring Practices')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>

<p>TBD</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{htmlelement("nav")}}: ナビゲーションセクション要素</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="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>
</ul>