ラベル又は説明:
達成基準 3.3.2 を理解する
この達成基準の意図
この達成基準の意図は、どのような入力データが期待されているのかを利用者が理解するように、フォーム内のコントロールを識別するための説明文又はラベルをコンテンツ制作者が配置することである。特に一般的なフォーマットではない場合、又は正しい入力のための特定のルールがある場合、入力欄のデータフォーマットを説明文又はラベルで明示してもよい。特に説明が長く詳細である場合、個々のコントロールがフォーカスを受け取ったときだけそのような説明文を利用者が利用できるように作ることをコンテンツ制作者は選択してもよい。
この達成基準の意図は、ページを不要な情報だらけにしてしまうことではなく、障害のある利用者に役立つ重要な手がかり及び説明文を提供することである。情報又は説明文が多すぎると、それは単に邪魔なものでしかない。目標は、利用者の混乱を最小限に抑えて、必要以上のナビゲーションを提供することなく、利用者がタスクを完了するために十分な情報を提供することである。
注記: input オブジェクトにラベルが提供されている場合、その input オブジェクトとラベル (又はラベルとして提供されている冗長なテキスト) の関係性は 達成基準 1.3.1 情報及び関係性を理解するによりプログラムによる解釈が可能又はテキストで利用可能でなければならない。
達成基準 3.3.2 の具体的なメリット:
input 要素と label 要素が関連付けられている場合、入力欄にフォーカスがあたったときにスクリーンリーダーによってラベルが読み上げられ、かつ、ラベル又はコントロールのクリックでコントロールが選択されるために、より大ききなコントロールのクリック範囲によって運動に障害のある利用者は助けられるだろう。
関連付けられたテキストフィールドのすぐ近くにラベルを置くことによって、画面拡大ソフトの利用者にとっては、そのテキストフィールド及びラベルがページを拡大した画面内に収まりやすくなる。
所定のデータフォーマットの例を提供することは、認知の障害、言語の障害、及び学習障害のある利用者が情報を正確に入力するのに役立つ。
必須項目をはっきりと示すことによって、キーボードだけで操作している利用者が、不完全なままフォームを送信して、再度表示されたフォームをナビゲートし、未入力だったテキストフィールドを見つけ出してから情報を入力することを回避できるようになる。
達成基準 3.3.2 の事例
テキストフィールドがあり、利用者に米国の州名を 2 文字の略語で入力するように求めている。そのテキストフィールドにはリンクがあり、ポップアップウィンドウを開いて、アルファベット順に並んだ州名と略語の一覧を提供している。
日付を入力するテキストフィールドに、その日付の正確なフォーマットを示す初期値がある。
名を入力するテキストフィールドが「名」というラベルではっきりと示されていて、姓を入力するテキストフィールドには「姓」というラベルがあり、利用者がどちらを入力すべきなのか迷わないようにしている。
米国の電話番号が、エリアコード、局番、そして番号の三つのテキストフィールドに分かれている。エリアコードのテキストフィールドには括弧が付いていて、局番と番号のテキストフィールドの間にはハイフンが入っている。この表記法は、米国の電話番号フォーマットに馴染みのある利用者には視覚的な手がかりを提供していることになるが、テキストフィールドのラベル付けとしてはこの表記法だけでは不十分である。また、「電話番号」という一つのラベルも、三つのテキストフィールドすべてをラベル付けすることはできない。これに対処するために、三つのテキストフィールドを
fieldset要素でグループ化して、legend要素で「電話番号」というラベルを付けている。さらに、テキストフィールドに（この表記法に加えて）視覚的なラベルを提供することはデザイン上不可能なので、title 属性を用いて、三つのテキストフィールドそれぞれに視覚的には認識できないラベルを提供している。三つのテキストフィールドそれぞれの属性値は、「エリアコード」、「局番」、そして「番号」となっている。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
(今のところ、文書化されていない)
達成基準 3.3.2 の達成方法及び失敗例 - ラベル又は説明
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
G131: 説明的なラベルを提供する、かつ、次のどれか一つを用いる
FLASH25: アクセシブルな名前 (accessible name) を設定することによって、フォームコントロールにラベルを付ける (Flash)
SL26: Using LabeledBy to Associate Labels and Targets in Silverlight (Silverlight)
H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する (HTML)
FLASH8: フォームコントロールのアクセシブルな名前 (accessible name) にグループ名を追加する (Flash)
H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する (HTML)
SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)
注記: 上記のリストの一番最後にある達成方法は、「最後の手段」として考え、その他の達成方法をページに適用することができないときだけに用いるべきである。より広範囲の利用者層にとってのアクセシビリティを向上させるという意味でも、一番最後の達成方法以外の達成方法を推奨する。
3.3.2 でさらに対応が望まれる達成方法 (参考)
適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。
SL19: Providing User Instructions With AutomationProperties.HelpText in Silverlight (Silverlight)
線形なフォームのデザインを提供し、同様の項目をグループ化する (リンク追加予定)
達成基準 3.3.2 のよくある失敗例
以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.2 の失敗例とみなした、よくある間違いである。