Accessibility
Guidelines

3.3.3 エラーの修正を提案する

適合レベル

AA

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

概要

入力エラーを機械的に検出でき、修正方法がある場合、エラーの修正方法をユーザーに表示する。ただし、提示することでセキュリティやコンテンツの目的を損なう場合は除く。

具体例

  • 悪い例:「〇〇エラー」
  • 良い例:「〇〇エラーです。××を△△に修正してください」

よくあるエラー例と修正方法例

次によくある例を示す。サービスごとに統一した文言があるとなお良い。

  • 必須項目の入力漏れ:〇〇は必須項目です
  • 入力可能な文字以外を入力したエラー:〇〇は半角英数字のみで入力してください
    • 注釈:プログラムで置換可能なものは、エラーを出すよりもプログラム側で変換することが望ましい
  • サーバーエラー:しばらく時間をおいてから再度お試しください

セキュリティ的な例外

ID・パスワード入力の回避方法を入れてはいけない。どちらかが存在していることがわかってしまうからである。その場合は「IDまたはパスワードが間違っています」と表現をぼかすようにする。

テスト・チェック方法

  • 企画時
  • デザインレビュー
  • 実装後

実装方法

type, required, pattern, min, max属性など用いると、JavaScriptを使わなくてもフォーム検証ができる。 フォームデータの検証 - ウェブ開発を学ぶ | MDN制約の検証 - HTML | MDNが参考になる。

pattern属性によるフォーム検証

pattern属性に含めた文字列(正規表現可)のみ送信できる。

<form>
  <label for="choose">What's name is this blog service?</label>
  <input id="choose" name="service_name" required pattern="ameba blog|ameblo">
  <button>submit</button>
</form>
許可された文字以外が入力されており、指定された形式での入力を促すエラー文言がフォームの下に表示されている。
Good pattern属性を用いた入力フォームの例。「ameba blog」と「ameblo」のみ送信が可能になる。それ以外の文字列を入力して送信すると「指定されている形式で入力してください」などのvalidationエラーの文言が入力欄付近に表示される。

required属性によるフォーム検証

required属性を持つ入力項目が空のとき、送信できない。

<form>
  <label for="choose">What's name is this blog service?</label>
  <input id="choose" name="service_name" required>
  <button>submit</button>
</form>
入力が必須のフォームに文字が入力されておらず、入力を促すエラー文言がフォームの下に表示されている。
Good required属性を用いた入力フォームの例。入力が必須となっており、未入力の状態で送信すると「このフィールドを入力してください」などのvalidationエラーの文言が入力欄付近に表示される。

参考文献