修正方法がわからないフォームエラー
送信後に入力欄の枠が赤くなりますが、エラーの説明がありません。
問題
エラーがあることは分かっても、何を直せばよいか分かりません。
場面 枠線が赤くなるだけで、説明がない。 詳しく読む閉じる
形式が誤ったメールアドレスを送信すると、画面は変わらず、入力欄の枠だけが赤くなります。入力内容は残りますが、どう修正すればよいか説明がありません。
確認できる問題 色だけでエラーを示している。 詳しく読む閉じる
送信できなかったことを色だけで示しています。入力欄に関連付けたエラーメッセージがないため、スクリーンリーダーでその欄に戻っても、修正方法が分かりません。
利用者への影響 色の変化や、求められる形式が分からない人。 詳しく読む閉じる
色の変化を見分けにくい利用者は、送信できなかったことに気づけません。エラーに気づいても、正しい入力形式が分からない場合があります。
自動チェックとAIの限界 ラベルは合格でも、送信失敗後の状態は確認されない。 詳しく読む閉じる
初期表示だけのチェックでは、ラベルを確認できても、送信エラー時の問題を見落とすことがあります。AIでアラートを追加した場合も、読み上げの繰り返しや入力のたびのフォーカス移動が、かえって修正の妨げになることがあります。
試してみる
空のまま送信し、直す箇所を探してください。
空のまま送信し、何が問題かが分かるか確認してください。
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
エラーの内容を入力欄の近くに文章で示し、そこへ案内します。
- 1
aria-describedbyとaria-invalidで、メッセージを入力欄に関連付ける。 - 2送信に失敗したら、エラー概要か入力欄へフォーカスを移す。
- 3入力内容は残し、サーバー側でも検証する。
<input name="email" placeholder="メール" class="invalid"><label for="email">メールアドレス（必須）</label><p id="email-hint">お知らせを受け取るアドレスを入力してください。</p><input id="email" name="email" type="email" autocomplete="email" required aria-invalid="true" aria-describedby="email-hint email-error"><p id="email-error">[email protected]のような形式で入力してください。</p>html
<section id="error-summary" tabindex="-1" aria-labelledby="error-title"> <h2 id="error-title">入力内容をご確認ください</h2> <ul><li><a href="#email">メールアドレスの形式を確認してください</a></li></ul></section>js
// 送信失敗の画面が描画された後に実行します。document.getElementById('error-summary')?.focus();この修正で直る理由
入力するとプレースホルダーが消えます。クラスだけでは、エラーの意味や修正方法が伝わりません。枠線の色では、何を直せばよいかを説明できません。
次は検証でエラーが見つかった後の表示例です。
エラーを検出したら aria-invalid="true" を設定します。修正後は aria-invalid を削除するか false にし、古いエラーメッセージと、aria-describedby 内のそのIDも除去します。ヒントの関連付けは残します。
初期表示で、まだ操作していない欄をエラーにしないでください。エラー文はツールチップだけでなく入力欄の近くに表示し、色以外でも分かるように、アイコンや「エラー」という言葉を添えます。
送信後にエラーへ移動できるようにする
複数のエラーがある場合は、入力欄より前に概要を表示します。送信失敗後に概要を描画し、そこへフォーカスを移します。概要のリンクから、該当する入力欄へ直接移動できます。
入力欄が一つだけのフォームなら、その欄へフォーカスを移せば十分です。キーを押すたびにフォーカスを移動しないでください。強制的なフォーカス移動と、複数の割り込み読み上げを重ねると、かえって分かりにくくなることがあります。
入力内容を保つ
サーバーで再検証し、正しく入力された内容を残したまま、具体的なエラーを返します。値をHTMLに入れるときはエスケープします。パスワードなどの機密情報を安易に再表示しないでください。
送信成功時は古いエラーを除去し、完了を伝えます。フォーカスを動かさずに画面を更新する場合は、適切なステータス領域も検討します。
修正の確認
マウスを使わない6つの確認
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のフォームコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。アプリケーション固有のデータ処理は省略しています。実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料： www.w3.org
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。