diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles/search_role/index.html')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/search_role/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.html b/files/ja/web/accessibility/aria/roles/search_role/index.html new file mode 100644 index 0000000000..df6ac80cd3 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/search_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: search ロール' +slug: Web/Accessibility/ARIA/Roles/Search_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Search_role +--- +<p>\{{ariaref}}</p> + +<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" name="Description">説明</h2> + +<p><code>search</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>search</code> ロールは、全体として結合して検索（search）機能を作成するアイテムおよびオブジェクトを包含するコンテナ要素に追加します。 <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>があるなら、<code>search</code> ランドマークを定義する HTML 要素があります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><form id="search" role="search"> +</span> <label for="search-input">このサイトを検索</label> + <input type="search" id="search-input" name="search" spellcheck="false"> + <input value="検索する" type="submit"> +<span class="tag"></form></span> +</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("form")}} 要素を <code>role="search"</code> の宣言とともに使用すると、最大限のサポートが得られます。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="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" name="Repeated_landmarks">繰り返されるランドマーク</h4> + +<p>文書内の <code>search</code> ランドマークロールが文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。</p> + +<pre class="brush: html"><header> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</header> + +... + +<footer> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</footer> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="サイト全体の検索"</code> の <code>role="search"</code> の宣言は、"search サイト全体の検索" として重複してアナウンスすることができます。</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","#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" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("form")}}: フォーム要素</li> + <li><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></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> +</ul> |