フォームのエラー修正を分かりやすく伝える方法｜ウェブアクセシビリティの実装ポイント

greeden

2年前

フォームの入力エラーは、「間違っています」と知らせるだけでは解決しません。利用者が入力を完了できるように、エラーがある項目、問題の内容、直し方を具体的に伝える必要があります。

ウェブアクセシビリティにおけるエラー修正の提案とは、入力内容に問題があるときに、利用者が修正できる情報を示すことです。この記事では、分かりやすいメッセージの作り方と、画面表示や読み上げで伝える際の実装ポイントを整理します。

エラーの識別と修正の提案

エラー対応には、「どこで何が起きたかを知らせること」と「どう直すかを示すこと」という二つの役割があります。前者にあたるエラーの識別だけで終わらせず、次の操作が分かるところまで案内すると、利用者は迷わず修正しやすくなります。

「入力内容に誤りがあります」だけでは、利用者が原因を探し直さなければなりません。項目名と条件を同じメッセージに含めると、確認する範囲が明確になります。

エラーメッセージは、短さよりも修正に必要な情報がそろっているかを優先します。専門用語やシステム側の都合を示す表現は避け、利用者が入力欄を見ながら判断できる言葉に置き換えます。

伝わりにくい表示	修正しやすい表示	補った情報
入力エラーです	電話番号は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桁で入力してください」のような文字情報を併記します。

リアルタイムバリデーションとは、送信後だけでなく、入力中や入力直後にも内容を確認して結果を示す方法です。早い段階で修正の手掛かりを示せるため、長いフォームでもエラー箇所を見つけやすくなります。

この方法でも、表示する条件とメッセージの内容を一致させる必要があります。利用者がまだ入力している途中なのか、入力条件を満たしていないのかを区別し、修正に必要な案内を具体的に示します。

ラベル、入力支援、入力判定を含むフォーム全体の設計は、フォームのアクセシビリティ完全ガイドで確認できます。

エラー修正の提案は、利用者を責める表示ではなく、入力を完了するための案内です。エラー箇所、原因、直し方を一続きで伝え、画面表示と読み上げの両方で確認できるようにすると、フォームの利用を続けやすくなります。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方は、詳細をご覧ください。