ARIA: form ロール
フォーム (form
) ランドマークロールは、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。
<div role="form" id="contact-info" aria-label="連絡先">
<!-- フォームのコンテンツ -->
</div>
これは、ユーザーの連絡先を収集して保存するフォームです。
警告:
十分に正当な理由がない限り、ARIA の フォーム (form
) ロールではなく、HTML の <form>
要素を使用してフォームコントロールを格納してください。 HTML の <form>
要素は、支援技術にフォームがあることを伝えるのに十分です。
説明
フォーム (form
) ランドマーク (landmark) は、(メイン (main
) や検索 (search
) など) 他の名前付きランドマークが適切でない場合に、全体として結合してフォームを作成する、項目とオブジェクトのコレクションを含むコンテンツのリージョンを識別します。
メモ: <form>
要素を使用すると、アクセス可能な名前が提供されている場合、コンテンツのセクションがフォーム (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>
でないものは送信できないため、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="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="お問い合わせフォーム"
を使用した場合、「お問い合わせフォームフォーム」として重複してアナウンスすることがあります。
ベストプラクティス
好ましい HTML
<form>
要素を使用すると、セクションがフォーム (form
) ロールを持つことを自動的に伝えます。 可能であれば、<form>
を代わりに使用することをお勧めします。
追加された利点
ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。
- ランドマークブラウザー拡張(英語)
仕様書
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # form |
Unknown specification |
スクリーンリーダーのサポート
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
- WAI-ARIA ロール
alertdialog ロールの使用
ARIA: alert ロール
ARIA: application ロール
ARIA: article ロール
ARIA: banner ロール
ARIA: button ロール
ARIA: cell ロール
ARIA: checkbox ロール
ARIA: complementary ロール
ARIA: contentinfo ロール
ARIA: dialog ロール
ARIA: document ロール
ARIA: feed ロール
ARIA: figure ロール
ARIA: form ロール
ARIA: generic ロール
ARIA: grid ロール
ARIA: gridcell ロール
ARIA: heading ロール
ARIA: img ロール
ARIA: list ロール
ARIA: listbox ロール
ARIA: listitem ロール
ARIA: main ロール
ARIA: navigation ロール
ARIA: none ロール
ARIA: option ロール
ARIA: radio ロール
ARIA: region ロール
ARIA: row ロール
ARIA: rowgroup ロール
ARIA: search ロール
ARIA: spinbutton ロール
ARIA: switch ロール
ARIA: tab ロール
ARIA: table ロール
ARIA: term ロール
ARIA: textbox ロール
ARIA: tooltip ロール
group ロールの使用
link ロールの使用
log ロールの使用
presentation ロールの使用
progressbar ロールの使用
slider ロールの使用
status ロールの使用
toolbar ロールの使用