\{{ariaref}}
search ランドマークロールは、ページ、サイト、またはサイトのコレクションを検索するために使用されるページのセクションを識別するために使用されます。
<form role="search"> <!-- 検索入力 --> </form>
search ロールはランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 search ロールは、全体として結合して検索（search）機能を作成するアイテムおよびオブジェクトを包含するコンテナ要素に追加します。 <form> が検索フォームの場合、form ロールの代わりに search ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 search 型の <input> 要素があるなら、search ランドマークを定義する 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>
ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
{{htmlelement("form")}} 要素を role="search" の宣言とともに使用すると、最大限のサポートが得られます。
文書に複数の search ランドマークロールがある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。
<form id="site-search" role="search" aria-label="サイト全体"> <!-- 検索入力 --> </form> ... <form id="page-search" role="search" aria-label="このページ"> <!-- 検索入力 --> </form>
文書内の search ランドマークロールが文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。
<header>
<form id="site-search" role="search" aria-label="サイト全体">
<!-- 検索入力 -->
</form>
</header>
...
<footer>
<form id="site-search" role="search" aria-label="サイト全体">
<!-- 検索入力 -->
</form>
</footer>
スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="サイト全体の検索" の role="search" の宣言は、"search サイト全体の検索" として重複してアナウンスすることができます。
ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。
| 仕様 | 状態 |
|---|---|
| {{SpecName("ARIA","#search","ARIA search role")}} | {{Spec2('ARIA')}} |
| {{SpecName("ARIA Authoring Practices","#aria_lh_search","ARIA search role")}} | {{Spec2('ARIA Authoring Practices')}} |
TBD