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>
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>
