LEARN BY EXAMPLE
3.3.1 エラーの特定 レベル A
どの入力に何の誤りがあるかを伝える。
概要
入力エラーを自動で見つけた場合は、誤りのある項目とその内容をテキストで伝えます。 赤い枠や「エラーです」だけで済ませず、例えば「メールアドレスの形式が正しくありません」と説明します。
何のエラーか、文章でわかる?
利用者が困る例 「エラーです」と赤い枠だけ
イベントのお申し込み
エラーです。
- メールアドレス
- taro.example.com
何が間違っている?
エラーの内容が文章で説明されていません。
改善した例 項目と誤りの内容をテキストで伝える
イベントのお申し込み
入力に誤りがあります。
- メールアドレス
- taro.example.com
メールアドレスの形式が正しくありません。
入力内容を確認メールアドレスの形式の誤りとわかる。
枠の色がわからなくても、文章から把握できます。
達成できないと起こる問題の例
イベントの申込フォームで、メールアドレスとして「taro.example.com」を入力したところ、形式の誤りが検出されました。画面には「エラーです」とだけ表示され、入力欄に赤い枠が付きます。
スクリーンリーダーを使う利用者には、枠の色の変化が伝わりません。「エラーです」という文章を読んでも、入力形式の問題なのか、別の問題なのかがわかりません。
達成するための改善例
同じ入力欄の近くに「メールアドレスの形式が正しくありません」と表示します。文章から、誤りのある項目がメールアドレスであり、形式に問題があることがわかります。
赤い枠を併用してもかまいません。色の変化に気づけなくても、文章から誤りを把握できます。
確認のポイント
- 必須項目の入力忘れや、入力形式の誤りが自動で見つかったとき、文章で説明していますか。
- エラーメッセージから、どの項目に何の誤りがあるかわかりますか。
- 赤い枠やアイコンなど、見た目だけでエラーを示していませんか。
- 「エラーです」「入力に問題があります」だけで終わり、誤りの内容が抜けていませんか。
条件と補足
自動で入力エラーが見つかったときの基準
この基準は、フォームなどが入力エラーを自動的に検出した場合に適用します。すべての誤りを自動で検出する機能を付けることまでは、この基準だけでは求めていません。
入力エラーには必須項目の入力忘れや、決められた形式・許可された値に合わない入力が含まれます。例えば、必須の氏名が空なら「氏名が入力されていません」、日付の範囲が決まっているなら「日付が指定できる範囲を超えています」と説明します。
エラーを表示する場所は一つに決まっていない
図では項目の近くに説明を置いています。ほかにも、フォームの先頭にエラーの一覧を置くなどの方法があります。どの方法でも、誤りのある項目を特定し、内容をテキストで説明する必要があります。
誤りの説明と、直し方の提案
3.3.1では、どの項目に何の誤りがあるかを伝えます。「メールアドレスの形式が正しくありません」は、その説明の例です。
「例:taro@example.comの形式で入力してください」のような直し方の提案は、3.3.3「エラー修正の提案」で別に確認します。3.3.3では、修正方法がわかっている場合に提案を伝えます。ただし、伝えるとセキュリティやコンテンツの目的を損なう場合は除きます。両方の基準を満たす説明にすることもできます。
項目との関連付けや、変化の伝わり方も確認する
実際のフォームでは、エラー文と入力欄の関係がスクリーンリーダーにも伝わることや、エラーが発生したことに気づけることも確認します。これらは1.3.1や4.1.3などの関連する基準と併せて扱います。
特定の読み上げ通知の方法を使うことや、エラーの項目へ自動的にフォーカスを移すことが、3.3.1で一律に求められるわけではありません。表示の方法やタイミングに合わせて実装します。
ここで示した改善例は入力エラーの項目と内容をテキストで伝えることについてのものです。フォームやサイト全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体:3.3.1 Error Identification(要件)
- WAIC:3.3.1 エラーの特定の解説(日本語訳)
- W3C:Understanding 3.3.1(英語公開版)
- W3C:G83 未入力の必須項目をテキストで示す方法(実装例)
- W3C:G85 入力形式や値の誤りをテキストで示す方法(実装例)
テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。
出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。