【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 解説書

WCAG 2.0 解説書

本文へジャンプ

-

ラベル又は説明:
達成基準 3.3.2 を理解する

3.3.2 ラベル又は説明: コンテンツが利用者の入力を要求する場合は、ラベル又は説明文が提供されている。 (レベル A)

この達成基準の意図

この達成基準の意図は、どのような入力データが期待されているのかを利用者が理解するように、フォーム内のコントロールを識別するための説明文又はラベルをコンテンツ制作者が配置することである。特に一般的なフォーマットではない場合、又は正しい入力のための特定のルールがある場合、入力欄のデータフォーマットを説明文又はラベルで明示してもよい。特に説明が長く詳細である場合、個々のコントロールがフォーカスを受け取ったときだけそのような説明文を利用者が利用できるように作ることをコンテンツ制作者は選択してもよい。

この達成基準の意図は、ページを不要な情報だらけにしてしまうことではなく、障害のある利用者に役立つ重要な手がかり及び説明文を提供することである。情報又は説明文が多すぎると、それは単に邪魔なものでしかない。目標は、利用者の混乱を最小限に抑えて、必要以上のナビゲーションを提供することなく、利用者がタスクを完了するために十分な情報を提供することである。

注記: input オブジェクトにラベルが提供されている場合、その input オブジェクトとラベル (又はラベルとして提供されている冗長なテキスト) の関係性は 達成基準 1.3.1 情報及び関係性を理解するによりプログラムによる解釈が可能又はテキストで利用可能でなければならない。

達成基準 3.3.2 の具体的なメリット:

  • input 要素と label 要素が関連付けられている場合、入力欄にフォーカスがあたったときにスクリーンリーダーによってラベルが読み上げられ、かつ、ラベル又はコントロールのクリックでコントロールが選択されるために、より大ききなコントロールのクリック範囲によって運動に障害のある利用者は助けられるだろう。

  • 関連付けられたテキストフィールドのすぐ近くにラベルを置くことによって、画面拡大ソフトの利用者にとっては、そのテキストフィールド及びラベルがページを拡大した画面内に収まりやすくなる。

  • 所定のデータフォーマットの例を提供することは、認知の障害、言語の障害、及び学習障害のある利用者が情報を正確に入力するのに役立つ。

  • 必須項目をはっきりと示すことによって、キーボードだけで操作している利用者が、不完全なままフォームを送信して、再度表示されたフォームをナビゲートし、未入力だったテキストフィールドを見つけ出してから情報を入力することを回避できるようになる。

達成基準 3.3.2 の事例

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

(今のところ、文書化されていない)

達成基準 3.3.2 の達成方法及び失敗例 - ラベル又は説明

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

  1. G131: 説明的なラベルを提供するかつ、次のどれか一つを用いる

  2. H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する (HTML)

  3. FLASH32: フォームコントロールにテキストラベルを関連付けるために、自動ラベリングを使用する (Flash)

  4. FLASH29: フォームコンポーネントに label プロパティを設定する (Flash)

  5. FLASH25: アクセシブルな名前 (accessible name) を設定することによって、フォームコントロールにラベルを付ける (Flash)

  6. PDF10: PDF 文書内のインタラクティブなフォームコントロールにラベルを付ける (PDF)

  7. SL26: Using LabeledBy to Associate Labels and Targets in Silverlight (Silverlight)

  8. H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する (HTML)

  9. FLASH8: フォームコントロールのアクセシブルな名前 (accessible name) にグループ名を追加する (Flash)

  10. H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する (HTML)

  11. SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)

  12. G167: テキストフィールドの目的をラベル付けするために隣接するボタンを用いる

注記: 上記のリストの一番最後にある達成方法は、「最後の手段」として考え、その他の達成方法をページに適用することができないときだけに用いるべきである。より広範囲の利用者層にとってのアクセシビリティを向上させるという意味でも、一番最後の達成方法以外の達成方法を推奨する。

3.3.2 でさらに対応が望まれる達成方法 (参考)

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

達成基準 3.3.2 のよくある失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準 3.3.2 の失敗例とみなした、よくある間違いである。

重要な用語

ラベル (label)

テキスト、又はテキストによる代替を伴うコンポーネントで、ウェブコンテンツ内のコンポーネントを識別するために利用者に提示されているもの。

注記 1: 名前 (name) は隠されていて支援技術に対してだけ明らかにされる場合がある一方で、ラベルはすべての利用者に提示される。多くの場合 (すべてではないが)、名前 (name) とラベルは同じである。

注記 2: ラベルという用語は、HTML における label 要素だけに限定されない。