WCAG 3.3.2: ラベル又は説明
placeholderだけに説明を任せず、入力前・入力中・入力後も確認できるラベルや説明を用意します。
意図的な失敗例: 入力説明が不足している
形式や制限が事前に分かりません。
送信後にだけ形式エラーが表示される想定です。
確認観点
- 各入力欄に、目的が分かるラベルを視覚的にもプログラム的にも関連付ける
- 入力形式、全角・半角、文字数、使用できる文字、入力が必要／任意など、エラーになる前に必要な説明を提示する
- placeholderだけに説明を任せず、入力中や入力後も確認できる位置に説明を置く
人の判断が必要な例
- ラベルだけを読んで入力すべき内容が分かるか確認する
- 制約や入力例が、ポインター操作だけでなくキーボードや画面読み上げでも伝わるか確認する
- 入力が必要な項目が色だけで示されておらず、文字でも判別できるか確認する
補助ツール候補
- form-label-details
- form-structure
- required-fields
生成メモ
- 支援技術を用いた実検証が必要