フォームの入力エラーは、「間違っています」と知らせるだけでは解決しません。 利用者が入力を完了できるように、エラーがある項目、問題の内容、直し方を具体的に伝える必要があります。
ウェブアクセシビリティにおけるエラー修正の提案とは、入力内容に問題があるときに、利用者が修正できる情報を示すことです。 この記事では、分かりやすいメッセージの作り方と、画面表示や読み上げで伝える際の実装ポイントを整理します。
エラーの識別と修正の提案
エラー対応には、「どこで何が起きたかを知らせること」と「どう直すかを示すこと」という二つの役割があります。 前者にあたるエラーの識別だけで終わらせず、次の操作が分かるところまで案内すると、利用者は迷わず修正しやすくなります。
- エラー箇所：どの入力項目に問題があるかを示します。
- エラーの内容：入力必須、桁数、形式など、満たしていない条件を示します。
- 修正方法：正しい形式や入力例を示します。
「入力内容に誤りがあります」だけでは、利用者が原因を探し直さなければなりません。 項目名と条件を同じメッセージに含めると、確認する範囲が明確になります。
分かりやすいエラーメッセージの作り方
エラーメッセージは、短さよりも修正に必要な情報がそろっているかを優先します。 専門用語やシステム側の都合を示す表現は避け、利用者が入力欄を見ながら判断できる言葉に置き換えます。
| 伝わりにくい表示 | 修正しやすい表示 | 補った情報 |
|---|---|---|
| 入力エラーです | 電話番号は10桁で入力してください | 対象項目と桁数 |
| 日付が正しくありません | 日付はYYYY/MM/DD形式で入力してください | 正しい入力形式 |
ただし、桁数や日付形式はフォームごとの入力条件に合わせます。 画面に表示する案内と実際の入力判定が食い違わないように確認してください。
文言の組み立て方を詳しく確認したい場合は、エラーメッセージとマイクロコピーのアクセシビリティも参考になります。
画面表示と読み上げで伝える実装
入力欄の近くに説明を置く
エラーメッセージは、該当する入力欄の近くに表示します。 離れた場所にだけ表示すると、どの項目に対応する説明なのか分かりにくくなります。
入力欄と説明文は、aria-describedbyで関連付けられます。
画面上の位置だけに頼らず、入力欄と説明の関係をコードでも示す方法です。
<label for="phone">電話番号</label>
<input id="phone" aria-describedby="phone-error">
<p id="phone-error">電話番号は10桁で入力してください。</p>表示の変化をスクリーンリーダーへ伝える
入力後にエラーメッセージが追加される場合は、画面の変化が見えない利用者にも内容が伝わるようにします。
既存記事で挙げていたaria-liveは、更新されたメッセージを読み上げへ伝えるために使えます。
aria-liveを付けるだけで、メッセージの内容まで分かりやすくなるわけではありません。
「エラー」の一語で済ませず、項目名、原因、修正方法を本文として用意します。
色だけに頼らず、文字でも示す
赤い枠やエラーアイコンは、エラー箇所を見つける補助になります。 一方で、色やアイコンだけでは意味が伝わらない場合があるため、「電話番号は10桁で入力してください」のような文字情報を併記します。
リアルタイムの確認を使うときの考え方
リアルタイムバリデーションとは、送信後だけでなく、入力中や入力直後にも内容を確認して結果を示す方法です。 早い段階で修正の手掛かりを示せるため、長いフォームでもエラー箇所を見つけやすくなります。
この方法でも、表示する条件とメッセージの内容を一致させる必要があります。 利用者がまだ入力している途中なのか、入力条件を満たしていないのかを区別し、修正に必要な案内を具体的に示します。
ラベル、入力支援、入力判定を含むフォーム全体の設計は、フォームのアクセシビリティ完全ガイドで確認できます。
実装時のチェックリスト
- どの入力項目に問題があるかを、項目名で示しているか。
- 満たしていない入力条件を、具体的な言葉で示しているか。
- 正しい形式や入力例を、必要に応じて示しているか。
- エラーメッセージを該当する入力欄の近くに置いているか。
aria-describedbyで入力欄と説明を関連付けているか。- 動的に表示するメッセージを、
aria-liveなどで読み上げへ伝えているか。 - 色やアイコンだけでエラーを示さず、文字でも説明しているか。
- 案内した入力条件と、実際の判定内容が一致しているか。
エラーから修正までを一続きで案内する
エラー修正の提案は、利用者を責める表示ではなく、入力を完了するための案内です。 エラー箇所、原因、直し方を一続きで伝え、画面表示と読み上げの両方で確認できるようにすると、フォームの利用を続けやすくなります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。 アクセシビリティ向上にご興味がある方は、詳細をご覧ください。