意図
この達成基準の目的は、期待される入力データが何なのかを利用者が知ることができるように、コンテンツ作成者にフォーム内のコントロールを特定する説明又はラベルを提示させることである。利用者に選択肢を提供するラジオボタン、チェックボックス、コンボボックス、又は類似のコントロールの場合、利用者が実際に何を選択しているかをわかるように、それぞれの選択肢に適切なラベルが存在しなければならない。なお、特に一般的なフォーマットではない場合又は正しい入力のための特定のルールがある場合は、説明文又はラベルで、データ入力欄のデータフォーマットを明示してもよい。特に説明が長く詳細である場合は、個々のコントロールがフォーカスを受け取ったときだけそのような説明文を利用者が利用できるように作ることをコンテンツ制作者は選択してもよい。
この達成基準の意図は、ページを不要な情報だらけにしてしまうことではなく、障害のある利用者に役立つ重要な手がかり及び説明文を提供することである。情報又は指示が多すぎると、少なすぎる場合と同じくらい有害になることもある。目標は、利用者の混乱を最小限に抑えて、必要以上のナビゲーションを提供することなく、利用者がタスクを完了するために十分な情報を提供することである。
この達成基準では、ラベル又は説明が正確にマークアップされる、識別される、又はそれぞれのコントロールに関連付けられることを要求しているわけではない。この観点は、1.3.1：情報及び関係性で個別に扱われる。なお、コンテンツが達成基準 1.3.1 に失敗している (ラベル又は説明が正しくマークアップ、識別、又は関連付けられていない) 場合でも、この達成基準には合格している (関連するラベル及び説明が提供されている) 場合がある。
さらに、この達成基準では、フォームのコントロール及び入力欄にアクセシブルな名前 (accessible name) 又は説明を提供するための代替方法が使用されているかどうかは考慮されない。この観点は、4.1.2: 名前 (name)・役割 (role)・値 (value) で個別に扱われる。コントロール及び入力欄が適切なアクセシブルな名前 (accessible name) 又は説明 (例えば、aria-label = "..."を使用する) を持ち、よって達成基準 4.1.2 に合格することが可能であるが、この達成基準には失敗する (支援技術を使用しているユーザーだけでなく、すべてのユーザーにラベル又は指示が提示されていない) 場合がある。
この達成基準は、データ入力に関連しないリンク又はその他のコントロール (展開／折りたたみウィジェット、類似のインタラクティブなコンポーネントなど) には適用されない。
この達成基準では、データ入力及び送信のための、コントロール及び入力欄にラベルをつけることが求められているが、これらのラベルが十分に明確で説明的であるかどうかは、2.4.6：見出し及びラベルを理解するで個別に扱われる。
メリット
- 明確で曖昧さがないラベル及び説明（予想されるデータフォーマットの例を含む）を提供すると、すべての利用者、特に認知障害、言語障害、学習障害のある利用者が、情報を正しく入力するのに役立つ。
- 明確で曖昧さがないラベル及び説明（必須フィールドの明確な識別を含む）を提供することにより、利用者が不完全又は誤ったフォーム送信を行うことを防ぐことができる。これにより、利用者は送信エラーを修正するためにページ/フォームをもう一度ナビゲーションする必要がなくなる。
事例
- テキストフィールドがあり、利用者に米国の州名を 2 文字の略語で入力するように求めている。そのテキストフィールドにはリンクがあり、ポップアップウィンドウを開いて、アルファベット順に並んだ州名と略語の一覧を提供している。
- 日付を入力するテキストフィールドに、その日付の正確なフォーマットを示す初期値がある。
- 名を入力するテキストフィールドが「名」というラベルではっきりと示されていて、姓を入力するテキストフィールドには「姓」というラベルがあり、利用者がどちらを入力すべきなのか迷わないようにしている。
- 米国の電話番号が、エリアコード、局番、そして番号の三つのテキストフィールドに分かれている。エリアコードのテキストフィールドには括弧が付いていて、局番と番号のテキストフィールドの間にはハイフンが入っている。この表記法は、米国の電話番号フォーマットに馴染みのある利用者には視覚的な手がかりを提供していることになるが、テキストフィールドのラベル付けとしてはこの表記法だけでは不十分である。また、「電話番号」という一つのラベルも、三つのテキストフィールドすべてをラベル付けすることはできない。これに対処するために、三つのテキストフィールドを fieldset 要素でグループ化して、legend 要素で「電話番号」というラベルを付けている。さらに、テキストフィールドに（この表記法に加えて）視覚的なラベルを提供することはデザイン上不可能なので、title 属性を用いて、三つのテキストフィールドそれぞれに視覚的には認識できないラベルを提供している。三つのテキストフィールドそれぞれの属性値は、「エリアコード」、「局番」、そして「番号」となっている。
- 必須フィールドと任意フィールドの両方を含むフォームでは、必須フィールド及び／又は任意フィールドが明確にラベル付けされている。
達成方法
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
G131: 説明的なラベルを提供する かつ 以下のうちからいずれか一つ:
- ARIA1: ユーザインタフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する
- ARIA9: 複数のテキストノードをつなげて一つのラベルにするために、aria-labelledby を使用する
- ARIA17: 関連するフォームコントロールを特定するために、グルーピングロールを使用する
- G89: 期待されるデータ書式及び入力例を提供する
- G184: フォーム又はテキストフィールド一式の先頭に、必須の入力を記述するテキストの説明を提供する
- G162: 関係性を最大限に予測できるようにするためにラベルを配置する
- G83: 入力が完了していない必須項目を特定するために、テキストの説明を提供する
- H90: label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する
- PDF5: PDF フォームで必須項目のフォームコントロールを示す
- H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する
- PDF10: PDF 文書内のインタラクティブなフォームコントロールにラベルを付ける
- H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する
- G167: テキストフィールドの目的をラベル付けするために隣接するボタンを用いる
上記のリストの一番最後にある達成方法は、「最後の手段」として考え、その他の達成方法をページに適用することができないときだけに用いるべきである。より広範囲の利用者層にとってのアクセシビリティを向上させるという意味でも、一番最後の達成方法以外の達成方法を推奨する。
参考達成方法
適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。
失敗例
以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
重要な用語
文字又はグリフの空間的配置によって作られた図画 (典型的には、ASCII で定義されている 95 の印字可能文字から作られる)。
ユーザエージェントとして機能する、又は主流のユーザエージェントと一緒に機能するハードウェア及び／又はソフトウェアで、主流のユーザエージェントで提供されている機能以上の機能を、障害のある利用者の要求を満たすために提供するもの。
支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。
支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。
主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害者を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。
この文書の文脈において重要な支援技術としては、以下のものが挙げられる:
- 画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
- スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
- 音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
- 音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。
- 代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
- 代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
ユーザエージェントによって利用者に伝達される情報及び感覚的な体験。コンテンツの構造、提示、及びインタラクションを定義するコードやマークアップを含む。
人間とコミュニケーションをとるために話される、書かれる、又は (視覚的もしくは触覚的な手段で) 手話にされる言語。
手話も参照。
テキスト、又はテキストによる代替を伴うコンポーネントで、ウェブコンテンツ内のコンポーネントを識別するために利用者に提示されているもの。
名前 (name) は隠されていて、支援技術に対してだけ公開される場合がある一方で、ラベルはすべての利用者に提示される。多くの場合 (すべてではないが)、名前 (name) とラベルは同じである。
ラベルという用語は、HTML における label 要素だけに限定されない。
ソフトウェアが、ウェブコンテンツのコンポーネントを利用者に識別させることができるテキスト。
ラベルはすべての利用者に提示される一方で、名前 (name) は隠されていて、支援技術に対してだけ明らかにされる場合もある。多くの場合 (すべてではないが)、ラベルと名前 (name) は同じである。
これは、HTML の name 属性とは関係がない。
プログラムによる解釈が可能な文字の並びではないコンテンツ、又は文字の並びが自然言語においても何をも表現していないコンテンツ。
これには、 (文字による図画である) ASCII アート、顔文字、 (文字を置き換える) リートスピーク、文字を表現している画像が含まれる。
利用者が知覚できる形式でコンテンツをレンダリングすること。
支援技術を含む様々なユーザエージェントが抽出でき、利用者に様々な感覚モダリティで提示できるような形のデータがコンテンツ制作者によって提供されたとき、そのデータがソフトウェアによって解釈されること。
マークアップ言語で、一般に入手可能な支援技術が直接アクセスできる要素と属性から解釈される。
非マークアップ言語の技術特有のデータ構造から解釈され、一般に入手可能な支援技術がサポートするアクセシビリティ API を通じて支援技術に提供される。
意味を伝えるために、手と腕の動き、顔の表情又は身体の姿勢の組み合わせを用いる言語。
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
非テキストコンテンツとプログラムで関連付けられるテキスト、又は非テキストコンテンツとプログラムで関連付けられるテキストから参照されるテキスト。プログラムで関連付けられたテキストとは、その場所を、非テキストコンテンツからプログラムによる解釈が可能なテキストである。
チャートの画像があり、その直後の段落にテキストによる説明がある。チャートに対する短いテキストによる代替で後に説明があることを示している。
より詳細な情報は、テキストによる代替を理解する を参照。
ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。
ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (支援技術も含む)。
単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。
どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。
このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。
単体のウェブリソースであり、埋め込まれている画像及びメディアのすべてを含んだもの。
Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信トレイ、連絡先、カレンダーがある。受信トレイ、連絡先、又はカレンダーを表示するリンク又はボタンが提供されているが、全体としてページの URI は変更されない。
カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。
ブラウザで "http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは 1 ページだけのウェブサイトかもしれないし、ウェブサイトの中のほんの 1 ページなのかもしれない。