3.3.2 ラベル又は説明

要件

ユーザーが情報を入力するフィールドには、ラベルや説明が提供されている必要がある。
これは、何を入力すればよいかをユーザーが理解できるようにするための指針です。

内容のポイント

要素	解説
ラベル（label）	入力フィールドに付けられる識別情報（例：「名前」「メールアドレス」など）
説明（instructions）	入力方法の補足情報（例：「半角英数字で入力してください」など）
位置関係	視覚的にも論理的にもラベルが関連づいていることが重要（<label for="..."> など）

具体例

達成している例

<label for="email">メールアドレス（必須）</label>
<input type="email" id="email" name="email" required>
<small>例：example@example.com</small>

• 視覚的にもコード的にもラベルが関連づけられている
• 入力形式の説明もあり、理解しやすい

達成していない例

<input type="text" placeholder="名前">

• label が無い
• placeholder のみではスクリーンリーダーで認識されにくく、操作性が低下する

この基準の目的と利点

対象ユーザー	支援内容
視覚障害者	スクリーンリーダーでラベルを読み上げ、入力内容が明確にわかる
認知障害者	入力意図がはっきりすることで、混乱を防止
高齢者	フォームの意味が直感的に理解でき、操作ミスを減らせる

実装ポイント

項目	内容
label 要素の使用	for 属性で明示的に関連づける
aria-labelledby の使用	特殊なUIの場合に、視覚的なラベルと支援技術向けのラベルを関連付ける
インストラクションの明記	「必須」「○文字以内」など明確に書く
プレースホルダーの誤用に注意	placeholder だけに頼らない（表示されなくなる場合があるため）

まとめ

項目	内容
達成基準	3.3.2 ラベル又は説明
レベル	A
対象	ユーザー入力フィールド
要件	入力項目に対して、何を入力すべきかを明確に示すラベルや説明があること
利点	利用者の理解と操作の正確性を高める／支援技術への対応

一覧に戻る