web-dev-qa-db-ja.com

role = formはアクセシビリティにどのように役立ちますか?

role属性がアクセシビリティのために Bootstrap に追加されたことを読みました。<form role="form">がアクセシビリティにどのように役立つか知りたいです。この特定の使用例については、 http://getbootstrap.com/css/#forms-example を参照してください。

I Bootstrapのリポジトリで「ロール」を検索 使用できない

私の問題は、情報が冗長に見えることです。要素がformであるという概念は、HTMLタグ自体(<form>)ですでに表現されているため、次の場合にも役立ちます。要素がrole of formを再生していることを追加しますか? roleformと異なる場合はrole="..."を追加するのが理にかなっています(何がわかりませんが、ふりをしましょう)。 (特に具体的な推論やユースケースの例がない)現状のままでは、せいぜい不可解です。

68
user664833

role="form"をフォームに追加すると、スクリーンリーダーはそれをWebページ上の領域として認識します。つまり、ユーザーは自分のリージョンのクイックナビゲーションキーでフォームに簡単にジャンプできます(たとえば、JAWS 15では、このためにRを使用します)。また、スクリーンリーダーはリージョンの開始と終了をマークするため、ユーザーはフォームの開始位置と終了位置を簡単に見つけることができます。

81

comment で言及されている記事@ user664833には、role="form"<form>要素を使用すべきではないということを指摘したいと思います。 。しかし、むしろ<div>またはフォーム要素を含むことを意味的に示していない他の要素。

<form>要素は、おそらく既に適切に処理されていますスクリーンリーダー。

引用(リンク):

エレメントは既にデフォルトロールセマンティクスが公開されているため、role="form"要素ではなく、<div>などのセマンティックニュートラル要素で[<form>]を使用することをお勧めします。

6
Nelu

実際、ARIA 1.1 W3C勧告では、セクション1.4でホスト言語のセマンティクスを変更すべきでないことを明確に述べています( source ):

「ホスト言語がそのタイプのオブジェクトのセマンティック要素を提供する場合、スタイルとスクリプトを使用してオブジェクトを作成することは適切ではありません。WAI-ARIAはこれらのオブジェクトのアクセシビリティを向上できますが、ユーザーエージェントがオブジェクトをネイティブに。」

したがって、<form role='form'>の記述は冗長であるだけでなく、推奨事項に反しています。

4
Jaccoud

意味的に言えば、デフォルトのフォームは、まあ、フォームです。ただし、すべてのアクセシビリティアプリケーション(スクリーンリーダーなど)が同じように設計されているわけではなく、親フォーム要素が同じセマンティックを持つことを理解している場合でも、一部の要素(フォーム要素も)role=form属性を異なる方法で使用できますrole=form属性の有無にかかわらず意味します。

3
salmanxk