エラーメッセージ　［フォーム］

エラーメッセージは、エラーになっている項目を明示し、エラーの内容を説明しているか

解説

入力フォームでエラーメッセージを提示する際は、ユーザーがエラーに気づくように、どの項目がなぜエラーになっているのかをユーザーに分かりやすく説明します。

エラーメッセージは、できる限り具体的な内容にします。例えば、「エラーがあります。」や「入力内容が正しくありません。」といったエラーメッセージでは、具体性に欠けるため、ユーザーがフォームの入力を途中であきらめてしまう可能性があります。

また、エラー画面を提示する場合、入力画面のフォームを再度表示して、エラーになっているテキストフィールドだけ色を変えたりしただけでは、ユーザーはエラーが発生していることに気づかないこともあります。スクリーンリーダーのユーザーは、ページタイトルや大見出しなどでエラー画面であることが説明されていないと、エラーになっていることに気づかないかもしれません。

そのような場合、ユーザーは単にそのフォームがうまく動作していないのだと考えて、エラーが発生していることに気づく前に、そのフォームを送信すること自体をあきらめてしまうこともあります。

エラーメッセージが分かりやすいかどうかだけでも、ユーザーがフォーム送信を完了できる確率は変わってきます。エラーメッセージは具体的に分かりやすくテキストで提供し、エラー画面を提示する場合はページタイトルや大見出しでもエラー画面であることを示すようにしましょう。

事例 1. エラーメッセージ

悪い例 1.

エラーの内容や修正方法を説明していないため、ユーザーはエラーを修正できずにフォーム送信をあきらめてしまう可能性がある。例えば、次のようなエラーメッセージでは、ユーザーはエラーを修正できないかもしれない。

  • 入力エラーです。
  • 入力内容が正しくありません。
  • 「○○（○○は項目名）」に誤りがあります。
  • 正しく入力してください。

良い例 1.

エラーの内容や修正方法を具体的に説明しているので、ユーザーはエラーを修正することができる。

  • 「○○（○○は項目名）」は必須項目です。忘れずに入力してください。
  • メールアドレスの書式に誤りがあります。メールアドレスを正しく入力しなおしてください。
  • ハイフンが入力されています。ハイフンなしで入力しなおしてください。
  • 何も選択されていません。該当するものを少なくとも一つ以上選択してください。

WCAG 2.0の達成基準

3.3.1 エラーの特定（レベル A）
入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、そのエラーが利用者にテキストで説明される。

3.3.3 エラー修正の提案（レベル AA）
入力エラーが自動的に検出され、修正方法を提案できる場合、その提案が利用者に提示される。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。

WCAG 2.0「ガイドライン 3.3 入力支援」

参考