Accessibility
Guidelines

3.3.1 エラーを特定できる

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

入力エラーが自動的に検出された場合は、エラーとなっている箇所が特定され、ユーザーにテキストで説明される。

エラーメッセージは、以下のような方法でわかりやすく、見やすい場所に配置すること。

  • 各componentの近くにエラーテキストを表示するUIにする
  • エラーの理由を具体的に説明する
    • 詳細なエラーを伝えることが難しい場合、ヘルプページへのリンクなどを用意する
  • ログインに必要なメールアドレスとパスワードを入力するフォームが表示されている。メールアドレス入力欄には「ameba@example.com」という文字が入力されているが、パスワード入力欄には何も入力されていないため画面上部に「エラーがあります」という文言が表示されている。
    Bad エラーとなっている項目と無関係な位置にエラーメッセージを表示している。また、エラーの該当箇所や理由を説明していない。ユーザーはエラーの原因を推測し、入力箇所を探す必要がある。
  • ログインに必要なメールアドレスとパスワードを入力するフォームが表示されている。メールアドレス入力欄には「ameba@example.com」という文字が入力されているが、パスワード入力欄には何も入力されていないためパスワード入力欄の直下に「項目が未入力です」という文言が表示されている。
    Good エラーとなっている入力項目の近くにエラーメッセージを表示している。また、エラーの理由を具体的に説明している。

テスト・チェック方法

  • 企画時、デザイン時、実装時に、以下をチェックする
    • エラー箇所の洗い出し
    • エラー文言の検討
    • エラー文言の表示位置
  • テスト時
    • エラー発生時に、エラーの箇所が示され、解消手段がテキストで示されているか

参考文献