ARIA: search ロール

検索 (search) ランドマークロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。

html

<form role="search">
  <!-- 検索入力 -->
</form>

説明

検索 (search) ロールは、ランドマークです。ランドマークは、支援技術によって使用され、文書の大きなセクションを素早く識別してナビゲートすることができます。検索 (search) ロールは、全体として組み合わせて検索機能を作成する項目およびオブジェクトを含むコンテナー要素に追加します。 <form> が検索フォームの場合、フォーム (form) ロールの代わりに検索 (search) ロールを使用します。文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 search 型の <input> 要素はありますが、検索ランドマークを定義する HTML 要素はありません。

例

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>

アクセシビリティに関する懸念

ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

ベストプラクティス

好ましい HTML

<form> 要素を検索ロール (role="search") の宣言と共に使用することで、最大限のサポートが提供されます。

ランドマークのラベル付け

複数のランドマーク

文書内に複数の検索 (search) ランドマークロールがある場合は、各ランドマークにラベルを付けます。このラベルで、支援技術のユーザーがそれぞれのランドマークの目的を素早く理解することができます。

html

<form id="site-search" role="search" aria-label="サイト全体">
  <!-- 検索入力 -->
</form>

...

<form id="page-search" role="search" aria-label="このページ">
  <!-- 検索入力 -->
</form>

繰り返されるランドマーク

文書内で検索 (search) ランドマークロールが繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。この例では、ページの上部と下部でサイト全体の検索が繰り返されています。

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>

冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。このため、ラベルでランドマークが何であるかを説明する必要はありません。例えば、aria-label="サイト全体の検索" を使用した検索ロール (role="search") の宣言は、「サイト全体の検索検索」として重複してアナウンスされることがあります。

追加された利点

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

ランドマークブラウザー拡張（英語）

仕様

Specification
Accessible Rich Internet Applications (WAI-ARIA) # search
Unknown specification

スクリーンリーダーのサポート

TBD