WCAG 2.2の達成基準3.3.6「エラー防止（すべて）」は、利用者が情報を送信するページで、誤った内容を確定してしまうリスクを減らすための基準です。
適合レベルはAAAであり、送信の取消、入力エラーの検査と訂正、確定前の見直しのうち、少なくとも一つを利用できるようにします。
達成基準3.3.6が求めること
この基準は、利用者に情報の送信を求めるWebページを対象とします。
問い合わせ、会員登録、購入手続きなど、利用者が入力内容を送るフォームが代表例です。
次の三つをすべて実装する必要はありません。
ページの目的と送信後の影響に合わせて、少なくとも一つを満たす仕組みを選びます。
| 方法 | 利用者に提供する機会 | 実装の例 |
|---|---|---|
| 取消可能 | 送信後の操作を取り消す | 送信をキャンセルする、削除した情報を復元する |
| 入力チェック | 入力エラーを確認し、訂正する | 誤りのある項目と理由を示し、入力画面で修正できるようにする |
| 確定前の確認 | 送信内容を見直し、確認し、訂正する | 確認画面から入力画面へ戻り、内容を修正してから確定する |
三つの方法を実装する考え方
送信後に取り消せるようにする
「取消可能」を採用する場合は、送信したという表示だけで終わらせず、利用者が操作を元に戻せる手段を用意します。
たとえば、情報を削除した直後に復元できるようにしたり、送信完了後にキャンセルの導線を示したりします。
画面上の文章を一時的に非表示にするだけでは、保存済みの情報を回復できるとは限りません。
実際のデータと操作結果が元に戻ることまで確認します。
入力エラーを示して訂正できるようにする
「入力チェック」を採用する場合は、入力データを検査し、誤りがあれば利用者に訂正の機会を提供します。
形式が合わないことを伝えるだけでは、どの項目をどう直せばよいのか判断できないことがあります。
エラーのある項目と理由を具体的に示し、入力内容を保持したまま修正できる流れにします。
この仕組みは、単に送信を止めることではなく、利用者が誤りを理解して訂正できることまでを含みます。
確定前に見直せるようにする
「確定前の確認」を採用する場合は、入力内容を一覧で見直せる確認画面を設けます。
確認画面には、確定する操作と修正に戻る操作を区別して用意します。
入力欄を読み取り専用に切り替えるだけでは、訂正の方法が利用者に伝わらないことがあります。
「修正する」など目的のわかる操作を示し、元の入力内容を失わずに戻れるようにします。
フォームごとの実装例
| 場面 | 採用する方法 | 確認する内容 |
|---|---|---|
| 問い合わせフォーム | 入力チェック | 誤りのある項目が特定され、内容を訂正して再送信できる |
| 会員登録 | 確定前の確認 | 登録内容を一覧で見直し、入力画面へ戻って修正できる |
| 情報の削除 | 取消可能 | 削除後に復元でき、操作結果が実際のデータにも反映される |
どの方法を選ぶ場合でも、利用者が次に取れる操作を明確にします。
確認画面を置くこと自体が目的ではなく、誤りに気づき、訂正し、意図した内容で手続きを完了できる流れを作ることが目的です。
よくある失敗と改善方法
確認画面から修正できない
入力内容を表示していても、修正する導線がなければ、確定前に訂正する機会を提供できません。
入力画面へ戻る操作を用意し、それまでの入力内容を保持します。
エラーの場所や直し方がわからない
「入力内容に誤りがあります」という一文だけでは、利用者は修正すべき項目を特定できません。
対象の項目と誤りの内容を具体的に示し、その場で訂正できるようにします。
復元ボタンが表示を戻すだけになっている
画面内の表示が戻っても、送信済みまたは削除済みのデータが回復していなければ、取消可能とは判断できません。
画面表示と保存データの両方で、操作を取り消せることを確かめます。
テスト方法
達成基準3.3.6は、実際の送信フローを操作して確認します。
- 対象ページが利用者に情報の送信を求めているかを確認する。
- 取消可能、入力チェック、確定前の確認のうち、どの方法で基準を満たす設計なのかを特定する。
- 意図的に誤った内容を入力し、エラーの場所と理由がわかるかを確認する。
- エラーのある内容を訂正し、再度送信できるかを確認する。
- 確認画面を採用している場合は、全項目を見直し、入力内容を保持したまま修正画面へ戻れるかを確認する。
- 取消機能を採用している場合は、送信や削除の結果を実際に元へ戻せるかを確認する。
自動テストツールでフォームの一部を確認できる場合でも、見直し、訂正、取消という一連の操作は手動で確かめます。
関連する達成基準と入力支援
法的な約束、金銭取引、利用者が管理できるデータの変更や削除などに対象を絞った基準は、WCAG 2.2「3.3.4 エラー防止（法的、財務、データ）」の解説で確認できます。
ラベル、説明、エラー表示を含むフォーム全体の設計は、WCAG 2.2で押さえる入力支援とエラー設計の基本も参考になります。
実装時のチェックリスト
- 情報送信を求めるページを洗い出している。
- 三つの方法のうち、採用する方法が決まっている。
- 入力エラーのある項目と理由が具体的に伝わる。
- 利用者が入力内容を失わずに訂正できる。
- 確認画面から入力画面へ戻れる。
- 取消機能が画面表示だけでなく実際のデータにも働く。
- 送信から訂正または取消までを手動で確認している。
まとめ
WCAG 2.2の「3.3.6 エラー防止（すべて）」では、情報送信を求めるページに、取消可能、入力チェック、確定前の確認のいずれかを用意します。
利用者が誤りに気づき、内容を直し、意図しない送信結果を避けられるところまでを一つの操作の流れとして設計します。
当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。