契約への同意、送金、個人情報の送信、登録データの削除は、押し間違いや入力漏れの影響が大きい操作です。
Webアクセシビリティにおけるエラー防止は、利用者の注意力だけに頼らず、内容を確認し、誤りを直してから確定できる操作の流れを設計することです。
ここでは、入力前、入力中、確定前の三つの段階に分けて対策を整理します。基準の位置づけを先に確認したい場合は、サイト内の「エラー防止（法的、財務、データ）」の基準解説も参照できます。
対象となる操作と確認内容
すべての入力欄に同じ強さの確認を加えると、かえって操作が長くなります。
まず、確定後の影響が大きい操作を洗い出し、その操作で利用者が見直すべき情報を決めます。
| 操作の種類 | 場面の例 | 確認したい内容 |
|---|---|---|
| 法務に関わる操作 | 契約や規約への同意 | 同意する対象、選択内容、確定操作 |
| 財務に関わる操作 | 振込や支払い情報の送信 | 送信先、金額、入力した情報 |
| データに関わる操作 | 個人情報の送信、登録内容の変更や削除 | 対象となる情報、変更内容、実行する処理 |
「確認してください」とだけ表示しても、利用者はどこを見直せばよいか判断できません。
操作の種類に応じて、対象、内容、結果の三点が分かる確認画面にします。
入力前に迷いを減らす
エラー防止は、送信ボタンを押した後から始まるものではありません。
入力欄の目的、必須か任意か、受け付ける形式を入力前に理解できれば、やり直しを減らせます。
- 入力欄ごとに、何を入力する欄なのか分かるラベルを付ける。
- 必須項目を明示し、必須であることを色だけで伝えない。
- 日付や番号などに形式の指定がある場合は、入力例を近くに示す。
- 長い手続きでは、必要な情報や手順を開始前に知らせる。
ラベルと入力欄の対応を実装から確認する場合は、フォームラベルの付け方で詳しく確認できます。
入力中のエラーを直しやすくする
入力内容の自動検証は、誤りを見つけるだけでは足りません。
どの項目に何の問題があり、どう直せばよいかを、入力欄と対応する具体的な文で示します。
たとえば「入力に誤りがあります」ではなく、「メールアドレスに@を含めてください」のように、修正方法まで判断できる文にします。
- エラーがある項目名を示す。
- 受け付けられなかった理由と修正方法を示す。
- 色の変化だけに頼らず、文章でもエラーを伝える。
- エラーがない項目の入力値は消さず、該当箇所だけを直せるようにする。
入力前の案内から送信前の確認までを通して見直すときは、フォームの入力支援に関する解説も役立ちます。
確定前に内容を見直せるようにする
確認画面では、利用者が入力した内容を読みやすい順序で示し、元の入力画面へ戻って訂正できるようにします。
戻ったときに入力済みの内容が失われると、訂正そのものが新たな負担になるため、入力値を保ったまま修正できる流れが必要です。
- 確認画面に、確定対象となる情報を省略せず表示する。
- 項目ごと、または入力画面へ戻る訂正手段を用意する。
- 最終ボタンは「送信」だけで済ませず、「この内容で振り込む」「登録情報を削除する」など結果が分かる文にする。
- 確定する操作と戻る操作を、見分けやすい名称と配置にする。
確認チェックボックスは、規約への同意など、利用者が意思を明示する場面に向いています。
ただし、チェックを付けるだけでは口座番号や金額の誤りを見つけられないため、入力内容を見直す確認画面の代わりにはなりません。
四つの対策を使い分ける
確認画面、自動検証、確認チェック、自動保存は、同じエラーを防ぐものではありません。
それぞれの役割を分けて設計すると、必要な場所に必要な仕組みを置けます。
| 対策 | 主な役割 | 設計時の注意点 |
|---|---|---|
| 確認画面 | 確定前に入力内容と処理を見直す | 元の画面へ戻って訂正できるようにする |
| 自動検証とエラー表示 | 形式の違いや未入力を見つけ、修正を助ける | 項目名、理由、直し方を文章で示す |
| 確認チェック | 同意や確認の意思を明示する | 入力内容そのものの確認とは分けて考える |
| 自動保存と下書き | 長い入力の中断やページ離脱による損失を抑える | 保存された状態と再開方法を利用者に知らせる |
場面ごとの操作フロー
振込や支払い
- 入力欄の意味と形式を示す。
- 未入力や形式の違いがあれば、該当項目と直し方を示す。
- 送信先、金額、入力した情報を確認画面にまとめる。
- 訂正する操作と確定する操作を分ける。
契約や規約への同意
- 同意の対象と選択肢を明示する。
- 必要な場合に確認チェックを求める。
- 最終確認で、同意する対象と確定操作をもう一度示す。
登録データの変更や削除
- 変更または削除する対象を具体的に示す。
- 処理後に何が変わるのかを確定前に示す。
- 対象や操作が違っていれば戻れるようにする。
公開前のチェックリスト
- 影響の大きい操作と、確認すべき情報を洗い出したか。
- 入力欄のラベル、必須項目、形式を入力前に理解できるか。
- エラーの項目、理由、直し方が文章で分かるか。
- 確認画面から入力内容を訂正できるか。
- 最終ボタンを読めば、実行される処理が分かるか。
- 確認チェックを、入力内容の確認の代用にしていないか。
- 長い入力では、自動保存や下書きから再開できるか。
- キーボード操作でも、入力、確認、訂正、確定の順に進めるか。
実装時に押さえる要点
利用者に「間違えないでください」と求めるだけでは、誤操作は防げません。
入力前の案内、入力中の具体的なエラー表示、確定前の確認と訂正を一続きの操作として設計します。
長い手続きには自動保存や下書きも組み合わせ、入力をやり直す負担を減らします。
当社では、Webアクセシビリティの導入と運用を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。サイト全体のアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。