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