ラベル又は説明文:
達成基準 3.3.2 を理解する
この達成基準の意図
この達成基準の意図は、利用者が入力を求められた際にミスをしないようにすることである。ミスをしないようにするためには、情報を入力するためのシンプルな説明文と手がかりを提供することが、よいユーザーインタフェースデザインである。ある種の障害のある利用者は、障害のない利用者よりもミスをしてしまうことが多かったり、エラーを修正するのがより困難であったりするため、ミスをしないようにすることは障害のある利用者に対しては重要なことである。障害のある利用者は、ページと情報のやりとりをする際に、十分に説明されたフォーム及び手順を頼りにしている。例えば、全盲の利用者は、どんな情報をテキストフィールドに入力すべきなのか、そしてどんな選択肢があるのかを正確に知る必要がある。フォームのコントロールに視覚的に関連付けられているシンプルな説明文は、 認知の障害のある利用者又は画面拡大ソフトを使用している利用者の役に立つ。
この達成基準の意図は、ページを不要な情報だらけにしてしまうことではなく、障害のある利用者に役立つ重要な手がかり及び説明文を提供することである。情報又は説明文が多すぎると、それは単に邪魔なものでしかない。目標は、利用者の混乱を最小限に抑えて、必要以上のナビゲーションを提供することなく、利用者がタスクを完了するために十分な情報を提供することである。
達成基準 3.3.2 の具体的なメリット
label 要素を用いて input 要素とラベルを関連付けることによって、テキストフィールドがフォーカスを受け取ると、スクリーンリーダーがそのテキストフィールドのラベルを読み上げるようになる。
関連付けられたテキストフィールドのすぐ近くにラベルを置くことによって、画面拡大ソフトの利用者にとっては、そのテキストフィールド及びラベルがページを拡大した画面内に収まりやすくなる。
所定のデータフォーマットの例を提供することは、認知の障害、言語の障害、及び学習障害のある利用者が情報を正確に入力するのに役立つ。
必須項目をはっきりと示すことによって、キーボードだけで操作している利用者が、不完全なままフォームを送信して、再度表示されたフォームをナビゲートし、未入力だったテキストフィールドを見つけ出してから情報を入力することを回避できるようになる。
達成基準3.3.2 の事例
テキストフィールドがあり、利用者に米国の州名を2文字の略語で入力するように求めている。そのテキストフィールドにはリンクがあり、ポップアップウィンドウを開いて、アルファベット順に並んだ州名と略語の一覧を提供している。
日付を入力するテキストフィールドに、その日付の正確なフォーマットを示す初期値がある。
名を入力するテキストフィールドが「名」というラベルではっきりと示されていて、姓を入力するテキストフィールドには「姓」というラベルがあり、利用者がどちらを入力すべきなのか迷わないようにしている。
米国の電話番号が、エリアコード、局番、そして番号の3つのテキストフィールドに分かれている。エリアコードのテキストフィールドには括弧が付いていて、局 番と番号のテキストフィールドの間にはハイフンが入っている。この表記法は、米国の電話番号フォーマットに馴染みのある利用者には視覚的な手がかりを提供していることになるが、テキストフィールドのラベル付けとしてはこの表記法だけでは不十分である。また、「電話番号」という一つのラベルも、3つのテキストフィールドすべてをラベル付けすることはできない。これに対処するために、3つのテキストフィールドを
fieldset
要素でグループ化して、legend
要素で「電話番号」というラベルを付けている。さらに、テキストフィールドに(この表記法に加えて)視覚的なラベルを提供することはデザイン上不可能なので、title 属性を用いて、3つのテキストフィールドそれぞれに視覚的には認識できないラベルを提供している。3つのテキストフィールドそれぞれの属性値は、「エリアコード」、「局番」、そして「番号」となっている。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
(まだ文書化されていない)
達成基準3.3.2 の実装方法及び不適合事例 - ラベル又は説明文
この節にある番号付の項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する実装方法、又は複数の実装方法の組合せを表している。WCAG 2.0 適合要件のすべてが満たされている場合にのみ、次に挙げる実装方法により、この達成基準を満たすことができる。
達成基準を満たすことのできる実装方法
G131: 目的や内容が分かるラベルを提供する 、かつ、次のどれか一つを用いる
H71: fieldset 要素及び legend 要素を用いて、フォーム・コントロールのグループに関する説明を提供する (HTML)
H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する (HTML)
注記: 上記のリストの一番最後にある実装方法は、「最後の手段」として考え、その他の実装方法をページに適用することができないときだけに用いるべきである。より広範囲の利用者層にとってのアクセシビリティを向上させるという意味でも、一番最後の実装方法以外の実装方法を推奨する。
達成基準 3.3.2 でさらに対応が望まれる実装方法(参考)
適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な実装方法もあわせて検討するとよい。ただし、すべての状況において、すべての実装方法が使用可能、または効果的であるとは限らない。
ARIA1: Accessible Rich Internet Applicationを用いたプロパティによって、ラベルを説明し、プログラムが解釈可能にする (ARIA)
ARIA4: Accessible Rich Internet Applicationsを用いてフォーム中の入力が必須のフィールドを明示する (ARIA)
線形なフォームのデザインを提供し、同様の項目をグループ化する(リンク追加予定)
達成基準 3.3.2 のよくある不適合事例
以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.2 に適合していないとみなした、よくある不適合事例である。