ARIA: form ロール

{{ariaref}}

form ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。

<div role="form" id="contact-info" aria-label="連絡先">
  <!-- フォームのコンテンツ -->
</div>

これは、ユーザーの連絡先を収集して保存するフォームです。

重要: 本当に正当な理由がない限り、HTML の <form> 要素を使用してフォームのコントロールを格納するべきです。

説明

form ロールは、フォーム（form）を識別するためのランドマークです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 form ランドマークは、他の指名されたランドマークが適切でない場合（例えば、main や search）に、全体としてフォームを作成するために組み合わせるアイテムとオブジェクトのコレクションを含む領域を識別します。

<form> 要素を使用すると、アクセス可能な名前がある場合、自動的にセクションに contentinfo ロールと form ランドマークを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。

可能であれば、HTML の <form> 要素を使用してください。 <form> 要素は、アクセス可能な名前（例えば、aria-labelledby、aria-label、または title）がある場合、form ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに固有のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、すべてのユーザーに表示するべきです。 検索機能にフォームが使用されている場合は、form ランドマークの代わりに search ランドマークを使用します。

ページの領域を特定するには、role="form" を使用します。 すべてのフォームのフィールドを識別するためにそれを使用しないでください。 <form> の代わりに form ランドマークを使用している場合でも、<button>、<input>、<select>、<textarea> などのネイティブな HTML フォームのコントロールを使用することをお勧めします。

関連する WAI-ARIA のロール、ステート、プロパティ

ロールに固有のステートやプロパティはありません。

キーボードインタラクション

ロールに固有のキーボードインタラクションはありません。

必要な JavaScript 機能

onsubmit
onSubmit イベントハンドラは、フォームの送信時に発生するイベントを処理します。 <form> 以外のものは送信できませんので、XMLHTTPRequest などの代替データ送信メカニズムを構築するには、JavaScript を使用する必要があります。

例

<div role="form" id="send-comment" aria-label="コメントを追加">
  <label for="username">ユーザー名</label>
  <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text">

  <label for="email">電子メール</label>
  <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text">

  <label for="comment">コメント</label>
  <textarea id="comment" name="comment"></textarea>

  <input value="コメント" type="submit"> 
</div>

代わりに <form> を使用することをお勧めします。

<form id="send-comment" aria-label="コメントを追加">
  ....
</form>

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

控えめに使用する

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

入力はフォームではない

すべてのフォーム要素（入力、テキスト領域、選択など）で role="form" を宣言する必要はありません。 フォーム要素をラップする HTML 要素で宣言するべきです。 理想的には、<form> 要素をラップ要素として使用し、role="form" を宣言しないでください。

フォームを使用して検索する場合は、より専門化した role="search" 値を使用する必要があります。

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

それそれの <form> 要素と form ランドマークロールには、ラベルが必要です。 このラベルで、支援技術のユーザーがフォームの目的をすばやく理解することができます。

フォームにラベルを付けるには、2つの方法があります。 <legend> 要素は、<form> 要素の直接の子孫として使用します。role="form" の宣言を使用している場合、role="form" が宣言されている要素に適用される aria-label を使用します。 理想的には、フォームにラベルを付けるには、<form> と <legend> のテクニックを使用します。
（訳注：<legend> は <fieldset> の最初の子でなければならないとある。）

<form> 要素の使用

<form id="address">
  <legend>あなたの住所を更新してください</legend>
  <!-- フォームのコンテンツ -->
</form>

role="form" の使用

<div role="form" id="gift-cards" aria-label="ギフトカードを購入する">
  <!-- フォームのコンテンツ -->
</div>

冗長な説明

スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、aria-label="お問い合わせフォーム" の role="form" の宣言は、"form お問い合わせフォーム" として重複してアナウンスすることができます。

ベストプラクティス

好ましい HTML

<form> 要素を使用すると、自動的にセクションが form ロールを持つことを伝えます。 可能であれば、<form> を代わりに使用することをお勧めします。

追加された利点

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

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA Form Role の定義		 勧告
WAI-ARIA Authoring Practices
Role Form の定義		 草案

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

TBD

関連情報