form ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。
フォーム (form) ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。
<div role="form" id="contact-info" aria-label="連絡先"> <!-- フォームのコンテンツ --> @@ -19,24 +17,20 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Roleこれは、ユーザーの連絡先を収集して保存するフォームです。
-重要: 本当に正当な理由がない限り、HTML の {{htmlelement("form")}} 要素を使用してフォームのコントロールを格納するべきです。
+重要: 十分に正当な理由がない限り、ARIA の フォーム (
form) ロールではなく、HTML の {{htmlelement("form")}} 要素を使用してフォームコントロールを格納してください。 HTML の<form>要素は、支援技術にフォームがあることを伝えるのに十分です。説明
-+
formロールは、フォーム（form）を識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。formランドマークは、他の指名されたランドマークが適切でない場合（例えば、mainやsearch）に、全体としてフォームを作成するために組み合わせるアイテムとオブジェクトのコレクションを含む領域を識別します。フォーム (
-form) ランドマーク (landmark) は、(メイン (main) や検索 (search) など) 他の名前付きランドマークが適切でない場合に、全体として結合してフォームを作成する、項目とオブジェクトのコレクションを含むコンテンツのリージョンを識別します。
{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前がある場合、自動的にセクションに contentinfo ロールと form ランドマークを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。
{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前が提供されている場合、コンテンツのセクションがフォーム (form) ランドマークとして自動的に伝えられます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を使用することを常に好むべきです。
可能であれば、HTML の {{htmlelement("form")}} 要素を使用してください。 <form> 要素は、アクセス可能な名前（例えば、aria-labelledby、aria-label、または title）がある場合、form ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに固有のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、すべてのユーザーに表示するべきです。 検索機能にフォームが使用されている場合は、form ランドマークの代わりに search ランドマークを使用します。
可能であれば、HTML の {{htmlelement("form")}} 要素を使用してください。 <form> 要素は、アクセス可能な名前 (aria-labelledby、aria-label、title など) がある場合にフォーム (form) ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに一意のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、全てのユーザーに表示するべきです。 フォームを検索機能に使用する場合は、フォーム (form) ランドマークの代わりに検索 (search) ランドマークを使用してください。
ページの領域を特定するには、role="form" を使用します。 すべてのフォームのフィールドを識別するためにそれを使用しないでください。 <form> の代わりに form ランドマークを使用している場合でも、<button>、<input>、<select>、<textarea> などのネイティブな HTML フォームのコントロールを使用することをお勧めします。
role="form" は、ページのリージョンを識別するために使用し、フォームフィールドそれぞれを識別するために使用しないでください。 <form> の代わりにフォーム (form) ランドマークを使用している場合でも、<button>、<input>、<select>、<textarea> などのネイティブな HTML フォームコントロールを使用することをお勧めします。
onsubmit<form> 以外のものは送信できませんので、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築するには、JavaScript を使用する必要があります。<form> でないものは送信できないため、JavaScript を使用して、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築する必要があります。<div role="form" id="send-comment" aria-label="コメントを追加"> +<div role="form" id="send-comment" aria-label="コメントを追加"> <label for="username">ユーザー名</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> @@ -66,75 +60,60 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Role <textarea id="comment" name="comment"></textarea> <input value="コメント" type="submit"> -</div> +</div>代わりに
-<form>を使用することをお勧めします。<form id="send-comment" aria-label="コメントを追加"> +<form id="send-comment" aria-label="コメントを追加"> .... -</form> +</form>アクセシビリティに関する懸念
控えめに使用する
-ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
+ランドマークロールは、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
入力はフォームではない
-すべてのフォーム要素（入力、テキスト領域、選択など）で
+role="form"を宣言する必要はありません。 フォーム要素をラップする HTML 要素で宣言するべきです。 理想的には、{{htmlelement("form")}} 要素をラップ要素として使用し、role="form"を宣言しないでください。フォーム要素（入力、テキスト領域、選択など）それぞれで
role="form"を宣言する必要はありません。 それは、フォーム要素を包む HTML 要素で宣言するべきです。 理想的には、包む要素として {{htmlelement("form")}} 要素を使用し、role="form"を宣言しないでください。検索
-フォームを使用して検索する場合は、より専門化した
+role="search"値を使用する必要があります。フォームを検索に使用する場合は、より専門化した
role="search"値を使用するべきです。ランドマークのラベル付け
-それそれの {{htmlelement("form")}} 要素と
- -formランドマークロールには、ラベルが必要です。 このラベルで、支援技術のユーザーがフォームの目的をすばやく理解することができます。フォームにラベルを付けるには、2つの方法があります。 {{htmlelement("legend")}} 要素は、
+<form>要素の直接の子孫として使用します。role="form"の宣言を使用している場合、role="form"が宣言されている要素に適用される aria-label を使用します。 理想的には、フォームにラベルを付けるには、<form>と<legend>のテクニックを使用します。
- （訳注：<legend>は<fieldset>の最初の子でなければならないとある。）ランドマークとして公開する必要がある、それぞれの {{htmlelement("form")}} 要素とフォームロール (form
-role) には、アクセス可能な名前を付ける必要があります。 この名前により、支援技術のユーザーはフォームランドマークの目的をすばやく理解できるようになります。- -
<form>要素の使用<form id="address"> - <legend>あなたの住所を更新してください</legend> - <!-- フォームのコンテンツ --> -</form> -+
role="form"を与えたのと同じ要素で、aria-labelledby、aria-label、またはtitleを使用して、アクセス可能な名前を付けます。-
role="form"の使用<div role="form" id="gift-cards" aria-label="ギフトカードを購入する"> +<div role="form" id="gift-cards" aria-label="ギフトカードの購入"> <!-- フォームのコンテンツ --> </div>冗長な説明
-スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、
+aria-label="お問い合わせフォーム"のrole="form"の宣言は、"form お問い合わせフォーム" として重複してアナウンスすることができます。スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、
role="form"の宣言にaria-label="お問い合わせフォーム"を使用した場合、「お問い合わせフォームフォーム」として重複してアナウンスすることがあります。ベストプラクティス
好ましい HTML
-{{htmlelement("form")}} 要素を使用すると、自動的にセクションが
+formロールを持つことを伝えます。 可能であれば、<form>を代わりに使用することをお勧めします。{{htmlelement("form")}} 要素を使用すると、セクションがフォーム (
form) ロールを持つことを自動的に伝えます。 可能であれば、<form>を代わりに使用することをお勧めします。追加された利点
-ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。
+ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。