本文へ移動
easeweb
ご相談
トピックを検索

確認も取り消しもできずに支払いが確定するチェックアウト

予約フォームが「支払う」を押した瞬間に保存済みのカードに請求し、チケットは返金できないため、日付や枚数の間違いが、事前に確かめることも後で取り消すこともできないまま支払われます。

WCAG 2.2
SC 3.3.4AA
必須とする規格
Section 508 · EN 301 549(EU) · JIS X 8341-3
問題あり
アクセシビリティの問題を示した図: 届く範囲・力:1枚のつもりだった。取り消せる?
01

問題

入力、タップ、音声で間違えやすい人が、事前に間違いを確かめることも、後で取り消すこともできないまま、意図しないチケットの代金を支払います。

02

試してみる

金曜日のチケットを1枚予約します。ただし手が滑ったつもりで、枚数を2にしてから支払ってください。

お金が引き落とされる前に間違いを示すもの、または後で取り消す手段はありますか?

問題あり 修正できますか?

チケットの予約

保存済みのカード(末尾4242)で支払います。 チケットの返金・交換はできません。

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

請求の前に注文内容を読み返すか、明記した期限内に取り消せるようにします。

  1. 1一度押すだけで、注文、支払い、同意が確定し、事前に確かめることも後で取り消すこともできない状態にしない。
  2. 2選んだ内容を言葉で読み返し、それぞれを変更する手段を添えるか、取り消せる期限を明記する。
  3. 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>

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。

04

修正の確認

マウスを使わない5つの確認

確認方法: キーボード、スクリーンリーダー、ズーム、タッチ

5件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チェックアウトの段階や決済事業者を変更した際は、再度確認します。

制限

このサンプルは、どのプロセスでも同じ結果になることを保証するものではありません。例はチケットの予約ですが、ショップ、定期購入、ローン、申し込み、試験も、確定する段階で同じ確認が必要です。3.3.4は、自分のデータを保存・編集するたびに確認を求めるものではなく、間違いの代償が大きいか、取り消しにくい場合に限ります。送られるメールも含めてプロセス全体を、利用者が使う支援技術や道具で確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方