3.3.1 エラーの特定

要件

入力エラーが自動的に検出された場合は、エラーが発生している項目を特定し、その内容をテキストで説明する必要があります。

内容の詳細

ユーザーがフォームや入力フィールドでエラーを起こしたときに、以下の点が重要です

• どの項目にエラーがあるのか明確にする（例：「メールアドレス」フィールド）
• なぜエラーなのかを説明する（例：「@が含まれていません」）

具体例

達成例

• 「パスワード」欄に入力がない → 「パスワードを入力してください」と表示
• 「メールアドレス」欄に user@ とだけ入力 → 「正しいメールアドレスの形式で入力してください」と表示
• エラー項目に aria-describedby で説明を関連づけ、スクリーンリーダーでも通知される

未達成例

• 「エラーがあります」だけの曖昧な表示
• どの項目がエラーなのかハイライトのみで示し、テキスト説明がない
• 単に alert(‘エラー’) だけで、詳細が不明

この基準の目的

利点	説明
視覚障害者	スクリーンリーダーを通してエラーの場所と内容を正確に認識可能
認知障害者	エラー修正のための理解負荷が軽減され、操作がスムーズに
一般ユーザー	入力時のフラストレーションが減り、離脱防止にも寄与

実装ポイント

項目	方法
フィールド単位でのエラー表示	該当のinput要素近くにエラーメッセージを出す
エラーラベル	aria-invalid="true" や aria-describedby で関連付け
スタイル補助	赤枠やアイコンなど視覚的な強調も併用（ただし色だけに頼らない）
エラーメッセージの明瞭化	単語だけでなく、ユーザーがどうすればよいかを具体的に書く

まとめ

項目	内容
達成基準	3.3.1 エラーの特定
レベル	A
対象	フォーム入力などユーザー操作のあるインターフェース
要件	入力エラーがある場合に、場所と内容をテキストで明示すること
利点	修正のしやすさ向上、スクリーンリーダー対応、UX改善

一覧に戻る