ARIA: form ロール

フォーム (form) ランドマーク (landmark) は、(メイン (main) や検索 (search) など) 他の名前付きランドマークが適切でない場合に、全体として結合してフォームを作成する、項目とオブジェクトのコレクションを含むコンテンツのリージョンを識別します。

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

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

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

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

onsubmit

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

<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 role) には、アクセス可能な名前を付ける必要があります。 この名前により、支援技術のユーザーはフォームランドマークの目的をすばやく理解できるようになります。

role="form" を与えたのと同じ要素で、aria-labelledby、aria-label、または title を使用して、アクセス可能な名前を付けます。

role="form" の使用

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

冗長な説明

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

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

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

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

TBD

• <form>: フォーム要素
• <legend>: 凡例要素
• form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
• HTML のセクションとアウトラインの使用
• ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ
• Accessible Landmarks | scottohara.me
• Using WAI-ARIA Landmarks – 2013 | The Paciello Group

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: region ロール
   25. ARIA: row ロール
   26. ARIA: rowgroup ロール
   27. ARIA: search ロール
   28. ARIA: switch ロール
   29. ARIA: tab ロール
   30. ARIA: table ロール
   31. ARIA: textbox ロール
   32. group ロールの使用
   33. link ロールの使用
   34. log ロールの使用
   35. presentation ロールの使用
   36. progressbar ロールの使用
   37. radio ロールの使用
   38. slider ロールの使用
   39. status ロールの使用
   40. toolbar ロールの使用