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

関連情報
----

* <form>: フォーム要素
* <input type="search">
* HTML のセクションとアウトラインの使用
* ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
* Using WAI-ARIA Landmarks – 2013 | The Paciello Group
* Accessible Landmarks | scottohara.me

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`