トピックを検索
どの欄が誤りか示さないエラー概要
登録フォームが送信失敗時に「入力内容をご確認ください」というバナーと入力欄の赤い枠線だけを表示するため、どの欄が誤りで何を直せばよいかが文章で示されていません。
問題
「入力内容をご確認ください」とだけ言われた人は、誤りのある欄を自分で探すしかなく、多くの人には見つけられません。
陶芸教室の会員登録フォームで、お名前、メールアドレス、郵便番号を入力し、最後に「登録する」ボタンを押します。利用者はメールアドレスを「alex@」と打ち間違え、郵便番号を空欄のまま送信します。フォームの上に「エラーが発生しました。入力内容をご確認ください。」というバナーが出て、メールアドレスと郵便番号の枠が赤くなります。フォーカスはボタンに残ったままです。マウスを使う人は赤い枠を探せますが、スクリーンリーダーでは何も聞こえません。スマートフォンでは、バナーはすでに画面の外です。
3.3.1は、入力エラーを自動的に検出した場合、エラーのある項目を特定し、そのエラーを文章で説明することを求めています。バナーは文章ですが、何も特定していません。どの欄が、なぜ誤りなのかを示していないからです。欄を示すのは枠線の色だけで、これは文章ではありません。マークアップにも無効状態やメッセージがありません。
フォームが長いほど、問題は大きくなります。短いフォームなら赤い枠が一画面に収まることもありますが、購入手続きや申込フォームでは何画面にも散らばり、一度に見渡せない人は誰でも探すことになります。
10グループ中5グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響あり）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない フォーカスは下の送信ボタンに残るため、スクリーンリーダーは上のバナーを読み上げず、入力欄に移ってもエラーは伝わりません。
- 視覚が限られる 拡大鏡ではフォームの一部しか見えないため、バナーと赤い枠線を一つずつ探す必要があります。
- 手の操作が限られる キーボードの利用者は、Tabキーでフォーム全体を戻り、各欄を確かめて誤りを探すことになります。
- 色を知覚しない 誤りのある欄を区別するのは赤い枠線だけで、ほかの枠線と同じに見えます。
- 言語・認知・学習の能力が限られる 「ご確認ください」では手がかりがなく、入力した内容を思い出して、何が誤りかを推測するしかありません。
スキャナーは空のフォームを読み込み、ラベルのある欄を確認して合格とします。この問題は送信に失敗した後にしか現れません。実際に送信するテストでも、文章の入ったバナーがあれば、エラーメッセージがあるように見えます。その文章が誤りのある欄を示しているかは、どのルールにも判断できません。AIによる修正では、バナーにrole="alert"を足すことがよくあります。スクリーンリーダーで「入力内容をご確認ください」と読み上げられ、失敗したことは伝わりますが、何が誤りかは依然として伝わりません。
試してみる
「登録する」を押し、直す箇所を探してください。
そのまま送信し、どの欄がなぜ誤りなのかが分かるか確認してください。
問題あり 直してみませんか？
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
誤りのある欄と直す内容を文章で示し、そこへ案内します。
- 1エラーのある欄すべてを、直す内容とともに文章で示す。
- 2一般的な文、色、枠線だけで、どの欄が誤りかを伝えない。
- 3送信に失敗したら、最初の問題を利用者のいる場所に示すか、そこへフォーカスを移す。
<div class="banner">エラーが発生しました。入力内容をご確認ください。</div> <form novalidate> <label for="name">お名前</label> <input id="name" name="name" autocomplete="name" value="Alex Morgan"> <label for="email">メールアドレス</label> <input id="email" name="email" type="email" autocomplete="email" class="invalid" value="alex@"> <label for="postcode">郵便番号</label> <input id="postcode" name="postcode" autocomplete="postal-code" class="invalid"> <button>登録する</button></form>バナーは失敗したことを伝えますが、何が誤りかは伝えません。invalidクラスは枠線を赤くするだけなので、誤りのある二つの欄は色でしか示されていません。
送信に失敗した後、サーバーまたはスクリプトが描画するページの例です。
フォーカスが概要に移るため、スクリーンリーダーはすぐに見出しを読み上げ、キーボードの利用者は一覧から始められます。各リンクは欄のラベルと同じ言葉で問題を示し、その欄へ移動します。入力欄のIDへのリンクは、フォーカスを欄に移します。各欄のメッセージも同じ内容を示すため、Tabキーで欄に来た人や、下へスクロールした人にも、直す内容が伝わります。
三つとも、誤りのある欄を文章で示し、3.3.1を満たします。おすすめは、各欄のメッセージと組み合わせたエラー概要です。問題の数がすぐに分かり、各欄へ移動でき、移動した先でも直す内容が分かるのはこの方法だけで、ほかの二つはそれぞれどれかが欠けています。バナーへの列挙は、まだテンプレートを変えられないときの応急処置です。最初の欄へのフォーカス移動だけで足りるのは、すべての欄が一画面に収まる短いフォームの場合です。
概要は送信後に描画する。 空の概要を置いたままにせず、キー入力のたびに更新しないでください。サーバーまたはクライアント側の検証が返すエラーの一覧から一度だけ組み立てれば、概要と各欄のメッセージが食い違いません。
フォーカスは一度だけ移す。 送信失敗の画面が描画された後に概要へフォーカスを移し、修正中には再び移さないでください。フォーカスを移す概要にrole="alert"を付けると、二重に読み上げられます。
ページタイトルでも伝える。 ページ全体を再読み込みする場合は、<title>の先頭に「エラー：」を付けます。スクリーンリーダーは最初にタイトルを読むため、結果がすぐに分かります。
欄へのリンクでは、ラベルも見えるようにする。 入力欄のIDへのリンクで欄にフォーカスは移りますが、ブラウザーによってはラベルが画面の上や固定ヘッダーの下に隠れます。固定ヘッダーより大きいscroll-margin-topを欄に付けるか、スクリプトでラベルが見える位置までスクロールします。ラジオボタンのグループでは、最初のラジオボタンへリンクし、メッセージはfieldsetの中に置きます。
欄のメッセージに「エラー：」と書く。 見える文字でも視覚的に隠したテキストでもかまいません。赤色が見えない人にも、ヒントではなくエラーだと伝わり、スクリーンリーダーの利用者には説明が変わった理由が分かります。
入力内容を残す。 パスワードやカード番号を除き、入力された値を返します。そうすれば、最初から入力し直さずに誤りだけを直せます。メッセージの書き方は、フォームエラーのガイドを参照してください。
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。欄を追加したときや、共通のフォームコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。送信後に誤りのある欄をどう知らせるかを扱い、各メッセージの書き方や、欄に移動すれば十分な一つだけの検索欄は扱いません。iframe内の決済欄など、外部のウィジェットで作られたフォームは独自の方法でエラーを伝えるため、同じ確認が必要です。実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。