トピックを検索
確認も取り消しもできずに支払いが確定するチェックアウト
予約フォームが「支払う」を押した瞬間に保存済みのカードに請求し、チケットは返金できないため、日付や枚数の間違いが、事前に確かめることも後で取り消すこともできないまま支払われます。
問題
入力、タップ、音声で間違えやすい人が、事前に間違いを確かめることも、後で取り消すこともできないまま、意図しないチケットの代金を支払います。
ある劇場の予約ページは、二つのことを尋ねます。公演が11月13日(金)か11月14日(土)か、そしてチケットの枚数です。1枚24ドルです。利用者はログインしているので、カードが保存されています。欄の下には、チケットは返金も交換もできないという一文と、「今すぐ支払う」ボタンがあります。
金曜日のチケットを1枚買うつもりでしたが、途中で手が滑って、枚数が2になりました。「今すぐ支払う」を押すと、その場で48ドルが請求され、次のページには「予約が完了しました」と表示されます。変更する方法も、取り消す方法もありません。間違いは画面上にありましたが、確定する前にそれを示すものは何もありませんでした。
達成基準3.3.4「エラー回避(法的、金融、データ)」はレベルAAです。法的な義務や金融取引が発生するページ、利用者が管理するデータを変更・削除するページ、テストの回答を送信するページでは、次の三つのうち少なくとも一つが必要です。送信を取り消せること。入力エラーがチェックされ、修正できること。確定する前に、情報を確認し、確定し、修正する手段があること。このフォームは、どれも満たしていません。
購入について、W3Cが十分な達成方法として挙げるのは、送信の前に回答を確認して修正できる段階(G98)、注文後に変更や取り消しができる期限の明記(G164)、送信ボタンに加えた確認のチェックボックス(G155)です。入力のチェックは基準の二つ目の方法ですが、対象は入力エラー、つまり値が欠けている場合や、フォームが受け付ける範囲外の場合です。2枚のチケットも違う公演日も正しい選択で、どんなチェックでも見つけられません。W3Cは、この基準ではクライアント側の検証を推奨事項としてしか挙げていません。検証は3.3.1と3.3.3のためには大切ですが、意図しない正しい選択への対策にはなりません。
返金についての一文も役に立ちません。間違いが取り返せないことは伝えても、間違いを見つける機会は与えていないからです。
その負担は、いちばん負担に耐えにくい人にかかります。家計に余裕のない人にとって、間違った予約は何かを我慢することを意味し、例外を頼むには電話かメールが必要で、それ自体がまた別の障壁になります。
10グループ中5グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響あり)
- 届く範囲・力 (影響あり)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 届く範囲・力が限られる 手のふるえがある人は、+を二度押したり、一つ下の日付をタップしたりしやすく、その間違いがそのまま請求されます。
- 手の操作が限られる 音声入力は「2枚」を「に、枚」のように聞き違えることがあり、スイッチは目的の選択肢を一つ通り過ぎることがあります。読み返しがなければ、ソフトが何を選んだかを銀行の明細で知ることになります。
- 言語・認知・学習の能力が限られる 記憶、注意、読むことに困難がある人や、計算に困難がある人は、違う公演日を選んだり合計を読み違えたりすることがあり、確定する前に、内容を分かりやすく並べて見直す必要があります。
- 視覚を使わない スクリーンリーダーの利用者はフォームを一つずつ聞いていくため、いくつも前の欄で選んだ日付は、「今すぐ支払う」の前に二度と読み上げられません。
- 視覚が限られる 拡大して使う人は一度に数個の欄しか見えないため、日付、枚数、「支払う」ボタンが同時に画面に入ることがありません。
各欄にはラベルがあり、ボタンには名前があり、ページは自動チェックをすべて通ります。注文を確認できるか、取り消せるかは、複数のページとその裏のサーバーにまたがっており、スキャナーが実際のサイトで「支払う」を押すことはありません。EaseWebの診断は、支払いや注文を行うフォームを人の確認に回しますが、送信はしないため、サイトが三つの方法のどれを使っているか、そもそも使っているかは分かりません。コーディングアシスタントにこのフォームの「エラーを防いで」と頼むと、数値の欄にminとmaxを加えます。0枚や99枚は防げても、2枚は防げません。
試してみる
金曜日のチケットを1枚予約します。ただし手が滑ったつもりで、枚数を2にしてから支払ってください。
お金が引き落とされる前に間違いを示すもの、または後で取り消す手段はありますか?
問題あり 修正できますか?
修正方法
請求の前に注文内容を読み返すか、明記した期限内に取り消せるようにします。
- 1一度押すだけで、注文、支払い、同意が確定し、事前に確かめることも後で取り消すこともできない状態にしない。
- 2選んだ内容を言葉で読み返し、それぞれを変更する手段を添えるか、取り消せる期限を明記する。
- 3最後のボタンには、何を確定するかを合計金額とともに示す。
<form method="post" action="/book"> <label for="night">公演</label> <select id="night" name="night"> <option>11月13日(金)19:30</option> <option>11月14日(土)19:30</option> </select> <label for="tickets">枚数(1枚24ドル)</label> <input id="tickets" name="tickets" type="number" value="1"> <p>保存済みのカード(末尾4242)で支払います。チケットの返金・交換はできません。</p> <button type="submit">今すぐ支払う</button></form>支払う前に予約内容を確認する段階
<!-- 手順1:同じフォームだが、「次へ」は選択内容を保存するだけ --><form method="post" action="/book/review"> <label for="night">公演</label> <select id="night" name="night"> <option>11月13日(金)19:30</option> <option>11月14日(土)19:30</option> </select> <label for="tickets">枚数(1枚24ドル)</label> <input id="tickets" name="tickets" type="number" value="1"> <p>保存済みのカード(末尾4242)で支払います。チケットの返金・交換はできません。</p> <button type="submit">次へ</button></form>この方法を選ぶ理由:確定する前に、注文内容を読み返せるようにする
フォームが届くとすぐに、サーバーが保存済みのカードに請求し、チケットを発行します。選んだ内容を読み返すことも、確認を求めることも、取り消すこともないため、一度押せば確定です。
「次へ」は何も請求せずに選択内容を保存し、次のページで合計とともに言葉で読み返します。それぞれの「変更」リンクは、すべての回答を保ったまま該当する欄へ戻るため、間違いは一か所を直すだけで済み、予約をやり直す必要はありません。カードに請求するのは「確定して48ドルを支払う」だけで、ボタンの名前が金額を伝えます。見出しとページのタイトルが今の段階を示すため、スクリーンリーダーの利用者にも、予約完了ではなく確認の段階に来たことが分かります。
三つとも3.3.4を満たします。確認の段階を使ってください。どんな注文でも、お金が動く前に間違いを止められ、裏で返金の手続きを用意する必要もありません。事業として予約を取り消せる場合は、取り消しの期限も加えてください。ほかの予定と重なっていたなど、後から気づく間違いにも対応できます。チェックボックスは、まだ段階を増やせない1ページのチェックアウトにだけ使い、できるようになったら確認の段階に置き換えてください。
段階の間の選択内容は、ページの中だけでなく、サーバーの予約セッションに保存します。そうすれば、戻るボタン、「変更」リンク、再読み込みのどれでも、すべての回答がそのまま戻ります。「同じ住所を二度入力させるチェックアウトフォーム」も参照してください。
確認の段階では、それぞれの選択内容を省略せず、人が話すとおりに書きます。「13/11 19:30」や座席コードではなく、「11月13日(金)19:30」です。合計、支払い方法、返金できないといった大事な条件は、ボタンより前に示します。
決済事業者のページは、そのページのボタンを押した時点で請求することがよくあります。確認の段階は事業者のページへ移る前に置き、事業者のページを最後の段階にして、何を請求するかが分かるようにします。
お金が絡まなくても、同じ配慮が必要な操作があります。アカウントやプロジェクトの削除、署名したフォームの送信、試験の提出です。削除なら、失われるものを伝える確認か、直後の「元に戻す」で対応できます。「質問が読み上げられない確認ダイアログ」と「読む前や元に戻す前に消えるトースト」も参照してください。
二度押しを防ぐために、最後のボタンを無効にしないでください。フォームにトークンを入れ、サーバーが一つの注文を一度だけ受け付けるようにすれば、二度押しても予約は一つで、一度目が失敗したときもボタンは使えます。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
修正の確認
マウスを使わない5つの確認
確認方法: キーボード、スクリーンリーダー、ズーム、タッチ
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チェックアウトの段階や決済事業者を変更した際は、再度確認します。
制限
このサンプルは、どのプロセスでも同じ結果になることを保証するものではありません。例はチケットの予約ですが、ショップ、定期購入、ローン、申し込み、試験も、確定する段階で同じ確認が必要です。3.3.4は、自分のデータを保存・編集するたびに確認を求めるものではなく、間違いの代償が大きいか、取り消しにくい場合に限ります。送られるメールも含めてプロセス全体を、利用者が使う支援技術や道具で確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。