この記事でわかること

  • 取り返しのつきにくい送信の前に、確認や取り消しの手段を求める、WCAGの達成基準3.3.4
  • 基準の対象になる送信と、対象にならない保存
  • 取り消す・確かめて直す・確定の前に確認する、の3つの方法と、W3Cの技法
  • 確認画面にチェックボックスと2つのボタンを置く書き方と、キーボードで確かめた結果

申し込みや支払いのフォームでは、送信ボタンを押した後に、日付や数量のまちがいに気づいても取り消せないことがあります。この記事では、送る前に内容を見直して直せる、送った後に取り消せる、といった手段を、アクセシビリティの基準に沿って整理します。

根拠にしたのは、W3Cが公開しているWCAG 2.2の本文と3.3.4の解説(Understanding)、技法G98・G99・G155・G164・G168のページで、どれも2026年10月27日に原文を読みました。例のHTMLは、作業PCのChromeで開き、キーの操作で動きを見ています。契約や支払いについての法律の決まりと、特定のツールやスクールの紹介は扱いません。

先に結論: 確定の前に止まれるか、後から戻せるようにする

先に結論を書くと、契約・支払い・データの削除のように取り返しのつきにくい送信では、取り消せる・確かめて直せる・確定の前に確認できる、のどれかを用意します。 W3Cの技法と、それぞれの方法は次のとおりです。

技法 方法
G164 期間内なら取り消せる
G99 消した情報を戻せる
G98 送る前に見直して直す
G155 確認のチェックを置く
G168 続けるかを確かめる

申し込みの前の確認に関わるアクセシビリティの基準

WCAGの達成基準3.3.4は、誤りを防ぐことを扱う、レベルAAの基準です。利用者にとって法的な約束や金銭の取引が起きるページ、データを書き換えたり消したりするページ、テストの答えを送るページでは、次のどれか1つを満たすことを求めています。

  • 取り消せる: 送信を取り消すことができる
  • 確かめられる: 利用者が入れたデータの入力のまちがいを確かめ、直す機会がある
  • 確認できる: 送信を確定する前に、情報を見直し、確かめ、直すしくみがある

W3Cの解説では、この基準のねらいを、取り消せない操作でのまちがいが、障害のある人に重い結果をもたらさないようにすることだとしています。読むことに障害のある人は数字や文字を入れ替えてしまうことがあり、体を動かすことに障害のある人はキーを押しまちがえることがある、としています。

基準の対象になる送信と、対象にならない保存

WCAGの用語の定義では、法的な約束(legal commitments)は、法的な拘束や利益が利用者に生じる取引のことで、あらゆる種類の契約などが例に挙げられています。解説の例では、払い戻しのできない航空券の購入や、株の注文を出すことを、重い結果をともなう金銭の取引に挙げています。

データの書き換えや削除については、ファイルや記録を消すような、まとまったデータの損失を防ぐことがねらいで、保存のたびに確認を求めることではないとしています。利用者が自分で変えたり消したりできるデータの例には、アカウントの電話番号や住所の更新、過去の請求書の記録の削除が挙がっています。

3つの方法と、W3Cの技法

Understandingでは、場面ごとに十分な技法を挙げています。購入や税の申告のような法的な取引にはG164・G98・G155、情報を消す操作にはG99・G168・G155、テストにはG98・G168です。

  • 取り消せる期間を示す(G164): 注文の後に、取り消しや変更ができる期間と、その手続きを伝えます。技法の例では、24時間までの取り消しを受け付け、その決まりを購入の控えのメールにも載せるネットショップが挙がっています
  • 消した情報を戻せるようにする(G99): すぐには消さずに削除の印を付けたり、ごみ箱のような場所へ移したりして、一定の期間は戻せるようにします
  • 送る前に見直して直す(G98): 段階のある手続きでは、前の段階へ戻って見直せるようにするか、確定の前に、入力したすべての内容のまとめを見せます
  • 確認のチェックを置く(G155): 送信ボタンとは別に、内容を確かめたことを示すチェックボックスを置きます
  • 続けるかを確かめる(G168): 取り消せない操作を選んだときに、選んだ操作とその結果を伝え、続けるかやめるかを選んでもらいます

書き方の例: 確認画面にチェックボックスと2つのボタンを置く

次のHTMLは、技法G98・G155の考え方に沿って、注文の確認画面を書いたものです。注文の内容をまとめて見せ、「内容を確かめました」にチェックを入れてから「注文を確定する」を押すと送られます。直したいときは「内容を直す」で入力の画面へ戻ります。

<form action="/order/complete" method="post">
  <p>次の内容で注文します。</p>
  <dl>
    <dt>品物</dt>
    <dd>名刺の印刷(100枚)</dd>
    <dt>金額</dt>
    <dd>3,300円</dd>
  </dl>
  <p>
    <input type="checkbox" id="confirm" name="confirm" value="yes" required>
    <label for="confirm">内容を確かめました</label>
  </p>
  <p>
    <button type="submit" formaction="/order/edit" formnovalidate>内容を直す</button>
    <button type="submit">注文を確定する</button>
  </p>
</form>

技法G155では、チェックボックスはページを開いたときにはチェックを外しておき、送信ボタンの近くに置くとしています。チェックを入れずに送ったときは、受け付けずに、見直してチェックを入れ、もう一度送るよう促すとしています。この例では、required属性でチェックを必須にし、「内容を直す」のボタンにはformnovalidate属性を付けて、チェックがなくても入力の画面へ戻れるようにしています。

手順: 確定の前に止まれるかを確かめる

技法G98・G155・G164・G168の確かめ方に沿った手順です。

  1. 対象の送信を探す: 申し込み・支払い・削除・テストの答えなど、取り消しにくい送信を書き出します
  2. 見直しの画面を見る: 確定の前に、入れた内容のまとめが出て、直す手段があるかを見ます
  3. チェックを入れずに送る: 確認のチェックボックスがあれば、チェックを入れずに送り、受け付けられずに見直しを促されるかを確かめます
  4. 問いかけを見る: 取り消せない操作を始めて、確かめの問いかけが出て、続けることもやめることもできるかを見ます
  5. 取り消しの案内を見る: 送った後に取り消せる作りなら、取り消せる期間と手続きが書かれているかを確かめます

試した結果

上のHTMLの例を、作業PCの中だけで動く小さなWebサーバーの確認画面として出し、作業PCのChrome(ヘッドレス)で開きました。キーボードの操作を送って、サーバーに届いた送信を読み取っています。

  • チェックを入れないまま「注文を確定する」でEnterキーを押すと、何も送られず、フォーカスがチェックボックスへ移りました
  • スペースキーでチェックを入れ、Tabキーを2回押して「注文を確定する」へ移り、Enterキーを押すと、「confirm=yes」が付いた送信が届きました
  • チェックを入れないまま「内容を直す」でEnterキーを押すと、入力の画面へ戻る送信がそのまま届きました

あわせて、チェックボックスからrequired属性を外した書き方も試しました。チェックを入れないまま「注文を確定する」でEnterキーを押すと、チェックの値がない送信が、そのまま確定の先へ届きました。

使ったのはMacのGoogle Chrome 156(画面を出さないヘッドレスの動かし方)だけで、画面読み上げソフトやほかのブラウザでの動きは見ていません。

自分で直すか、相談するかの判断

目安は、「送った後に、利用者が自分で元に戻せるか」です。戻せない送信で、確定の前にまとめも確認のチェックもないなら、確認画面を足すことを考えます。

取り消せる期間や、取り消しの手続きは、サイトを運営する側の決まりにかかわるため、デザインだけでは決められません。サイトの運営者に決まりを確かめ、作り方に迷うときはWebデザインを教わっている講師にも相談します。

つまずきやすいところ

  • ボタンの文字だけで確かめたことにする: G155では、送信ボタンに「内容は正しいので送る」のような文字を付けるより、ボタンとは別のチェックボックスにする方が確実だとしています。チェックとボタンの2つの操作が要るためです
  • チェックを最初から入れておく: G155では、ページを開いたときにはチェックを外しておくとしています
  • やり直すと入力が消える: G155では、チェックを入れずに送って戻ったときに、入れた情報を失わないようにするとしています。前に入れた情報を残す作り方は、Webデザインで入力フォームに同じ情報を再入力させない方法で紹介しています
  • 保存のたびに確認を出す: 解説では、保存のたびや、ふつうの作成・編集にまで確認を求めることは、ねらいではないとしています
  • 見つけたまちがいの伝え方: 入力のまちがいを見つけたときの知らせ方は、Webデザインで入力エラーを分かりやすく伝える方法にまとめています
  • チェックボックスに名前を付けない: 「内容を確かめました」のような文字は、for属性とid属性でチェックボックスに関連づけておきます。ラベルの書き方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法にまとめています

まとめ

  • WCAGの達成基準3.3.4は、契約・支払い・データの書き換えや削除・テストの答えの送信で、取り消せる・確かめて直せる・確定の前に確認できる、のどれかを求めています
  • 保存のたびに確認を出す必要はなく、取り返しのつきにくい送信が対象です
  • 確認画面では、内容のまとめ、ボタンとは別の確認のチェック、直すためのボタンを用意します
  • チェックを入れずに送って、送信が止まるかをキーボードで確かめます