blob: d0bab247b21e49543ba4afce1579ddac860c3e3c (
plain)
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
|
---
title: 'ARIA: search ロール'
slug: Web/Accessibility/ARIA/Roles/Search_role
tags:
- ARIA
- ARIA Role
- Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Search_role
---
<p><span class="seoSummary">検索 (<code>search</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。</span></p>
<pre class="brush: html"><form role="search">
<!-- 検索入力 -->
</form>
</pre>
<h2 id="Description">説明</h2>
<p>検索 (<code>search</code>) ロールは、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを素早く識別してナビゲートすることができます。 検索 (<code>search</code>) ロールは、全体として組み合わせて検索機能を作成する項目およびオブジェクトを含むコンテナー要素に追加します。 <code><form></code> が検索フォームの場合、フォーム (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code>) ロールの代わりに検索 (<code>search</code>) ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 <a href="/ja/docs/Web/HTML/Element/input/search"><code>search</code> 型の <code><input></code> 要素</a>はありますが、検索ランドマークを定義する HTML 要素はありません。</p>
<h2 id="Examples">例</h2>
<pre class="brush: html"><form id="search" role="search">
<label for="search-input">このサイトを検索</label>
<input type="search" id="search-input" name="search" spellcheck="false">
<input value="検索する" type="submit">
</form>
</pre>
<h2 id="Accessibility_concerns">アクセシビリティに関する懸念</h2>
<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p>
<h2 id="Best_practices">ベストプラクティス</h2>
<h3 id="Prefer_HTML">好ましい HTML</h3>
<p><a href="/ja/docs/Web/HTML/Element/form"><code><form></code> 要素</a>を検索ロール (<code>role="search"</code>) の宣言と共に使用することで、最大限のサポートが提供されます。</p>
<h3 id="Labeling_landmarks">ランドマークのラベル付け</h3>
<h4 id="Multiple_landmarks">複数のランドマーク</h4>
<p>文書内に複数の検索 (<code>search</code>) ランドマークロールがある場合は、各ランドマークにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的を素早く理解することができます。</p>
<pre class="brush: html"><form id="site-search" role="search" aria-label="サイト全体">
<!-- 検索入力 -->
</form>
...
<form id="page-search" role="search" aria-label="このページ">
<!-- 検索入力 -->
</form>
</pre>
<h4 id="Repeated_landmarks">繰り返されるランドマーク</h4>
<p>文書内で検索 (<code>search</code>) ランドマークロールが繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。</p>
<pre class="brush: html"><header>
<form id="site-search-top" role="search" aria-label="サイト全体">
<!-- 検索入力 -->
</form>
</header>
...
<footer>
<form id="site-search-bottom" role="search" aria-label="サイト全体">
<!-- 検索入力 -->
</form>
</footer>
</pre>
<h4 id="Redundant_descriptions">冗長な説明</h4>
<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="サイト全体の検索"</code> を使用した検索ロール (<code>role="search"</code>) の宣言は、「サイト全体の検索検索」として重複してアナウンスされることがあります。</p>
<h3 id="Added_benefits">追加された利点</h3>
<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p>
<ul>
<li><a href="https://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li>
</ul>
<h2 id="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
</tr>
<tr>
<td>{{SpecName("ARIA","#search","ARIA search role")}}</td>
<td>{{Spec2('ARIA')}}</td>
</tr>
<tr>
<td>{{SpecName("ARIA Authoring Practices","#aria_lh_search","ARIA search role")}}</td>
<td>{{Spec2('ARIA Authoring Practices')}}</td>
</tr>
</tbody>
</table>
<h2 id="Screen_reader_support">スクリーンリーダーのサポート</h2>
<p>TBD</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/HTML/Element/form"><form>: フォーム要素</a></li>
<li><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></li>
<li><a href="/ja/docs/orphaned/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>
</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>
|
