3.3.1 エラーの特定 レベルA 原則3 理解可能
どこが間違い？
送信したら「入力内容に誤りがあります」。でも、どの欄の何がいけないのかは書いていない。見直しても分からず、あきらめてしまう人もいます。
さわってみよう
「登録する」を押して、どこを直せばいいか探してみよう。
ためしてみる
送信すると、フォームの上に一言だけメッセージが出ます。
まだ送信していません。
欄を直して、何度でも送信してみよう。すべて正しくなるまで、同じ一言しか出ません。
直してみよう
エラーの出し方を選んで送信し、見比べよう。どの欄の何が悪いかが文字で分かる出し方を選んだら、その説明どおりに直して登録を成功させよう。
読み上げのまね
送信したあと、見本の欄に移ると、ここに読み上げ文が出ます。
分かったこと
- 入力の誤りを見つけたら、どの欄が間違っているかを示し、何が悪いかを文字で伝える。これが 3.3.1 の求めていること。
- 枠を赤くするだけでは、色が見分けにくい人や読み上げソフトの利用者に伝わらない。色だけで情報を伝えることは 1.4.1 でも避けるよう求められている。
- 直し方が分かっているなら「例: taro@example.jp」のように示す。これは 3.3.3 エラーの修正提案（レベルAA）。
- HTML では、欄に
aria-invalid="true"を付け、説明文をaria-describedbyで結びつける方法がある。読み上げソフトが欄に移ったときに、説明までまとめて読める。 - 「2か所に誤りがあります」のような送信結果を、画面を移動しなくても読み上げさせる仕組み（
role="alert"など）は 4.1.3 ステータスメッセージに関わる。
どんな場合が「入力エラー」にあたるかなど、くわしくは WCAG 2.2 の日本語訳で確かめよう。