支払い後は、チケットの返金・交換はできません。
``` 「次へ」は何も請求せずに選択内容を保存し、次のページで合計とともに言葉で読み返します。それぞれの「変更」リンクは、すべての回答を保ったまま該当する欄へ戻るため、間違いは一か所を直すだけで済み、予約をやり直す必要はありません。カードに請求するのは「確定して48ドルを支払う」だけで、ボタンの名前が金額を伝えます。見出しとページのタイトルが今の段階を示すため、スクリーンリーダーの利用者にも、予約完了ではなく確認の段階に来たことが分かります。 ## 修正後：取り消せる期限の明記と「予約を取り消す」ボタン ```html book.html ``` ```html confirmation.html11月13日（金）19:30の公演、2枚。保存済みのカード（末尾4242）で48ドルを支払いました。
11月12日（木）18時まで、全額返金でこの予約を取り消せます。
``` 注文はその場で確定しますが、取り消せます。期限は支払いの前と後に、実際の日付と時刻で明記し、取り消しは今いるページのボタン一つで済みます。ただし、これが機能するのは、間違いに気づけるだけの長さが期限にあり、取り消しが予約より難しくない場合に限ります。電話も、入力するフォームも、アカウントのページでリンクを探すことも不要でなければなりません。それでもお金は一度口座から出て、何日か後に戻ってきます。期限を過ぎてから気づいた間違いは、支払ったままです。 ## 修正後：注文の要約のそばに置くチェックボックス ```html book.html ``` ```js const form = document.querySelector('form'); const box = document.getElementById('order-checked'); form.addEventListener('input', (event) => { if (event.target === box) return; // 注文が変わった。今の内容を示し、もう一度確認を求める。 box.checked = false; const tickets = Number(form.tickets.value); const total = `${tickets * 24}ドル`; document.getElementById('summary').textContent = `${form.night.value}の公演、${tickets}枚：${total}`; form.querySelector('button[type=submit]').textContent = `${total}を支払う`; }); ``` 最小限の変更で、フォームは1ページのままです。要約はチェックボックスの隣にあって一緒に読み上げられ、ボタンは合計を示し、チェックボックスは必須なので、チェックがなければブラウザーが支払いを止めて理由を伝えます。チェックした後に注文を変えるとチェックが外れるため、確認した内容と支払う内容が一致します。ただし、これだけでは十分ではありません。チェックボックスは確かめることを求めるだけで、新しく何かを示すわけではなく、多くの人は習慣でチェックします。拡大して使う人やスクリーンリーダーを使う人は、要約と欄を一緒に把握できません。 ## どの方法を選ぶか 三つとも3.3.4を満たします。確認の段階を使ってください。どんな注文でも、お金が動く前に間違いを止められ、裏で返金の手続きを用意する必要もありません。事業として予約を取り消せる場合は、取り消しの期限も加えてください。ほかの予定と重なっていたなど、後から気づく間違いにも対応できます。チェックボックスは、まだ段階を増やせない1ページのチェックアウトにだけ使い、できるようになったら確認の段階に置き換えてください。 ## 実装の判断 段階の間の選択内容は、ページの中だけでなく、サーバーの予約セッションに保存します。そうすれば、戻るボタン、「変更」リンク、再読み込みのどれでも、すべての回答がそのまま戻ります。「[同じ住所を二度入力させるチェックアウトフォーム](/ja/learn/redundant-entry)」も参照してください。 確認の段階では、それぞれの選択内容を省略せず、人が話すとおりに書きます。「13/11 19:30」や座席コードではなく、「11月13日（金）19:30」です。合計、支払い方法、返金できないといった大事な条件は、ボタンより前に示します。 決済事業者のページは、そのページのボタンを押した時点で請求することがよくあります。確認の段階は事業者のページへ移る前に置き、事業者のページを最後の段階にして、何を請求するかが分かるようにします。 お金が絡まなくても、同じ配慮が必要な操作があります。アカウントやプロジェクトの削除、署名したフォームの送信、試験の提出です。削除なら、失われるものを伝える確認か、直後の「元に戻す」で対応できます。「[質問が読み上げられない確認ダイアログ](/ja/learn/confirmation-dialogs)」と「[読む前や元に戻す前に消えるトースト](/ja/learn/toast-timing)」も参照してください。 二度押しを防ぐために、最後のボタンを無効にしないでください。フォームにトークンを入れ、サーバーが一つの注文を一度だけ受け付けるようにすれば、二度押しても予約は一つで、一度目が失敗したときもボタンは使えます。 ## 修正の確認 1. チケットを1枚多くする、違う公演を選ぶなど、わざと間違えてテスト予約を行い、お金が引き落とされる直前まで進む。確定する前に間違いが言葉で示されること、または後から取り消せることを確認する。 2. 確認の段階から、それぞれの「変更」リンクを使う。正しい欄へすべての回答を保ったまま移動し、確認の段階に修正後の注文が表示されることを確認する。 3. 取り消しの期限がある場合、その終わりが支払いの前と後に日付と時刻で明記されていることを確認し、予約完了のページからキーボードだけでテスト予約を取り消す。 4. スクリーンリーダーで、確定するボタンより前に、すべての選択内容と合計が読み上げられ、ボタンの名前が何をするかを示していることを確認する。 5. 400%の拡大表示やスマートフォンで、要約と最後のボタンを一緒に、または続けて読めることを確認する。 OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チェックアウトの段階や決済事業者を変更した際は、再度確認します。 ## 制限 このサンプルは、どのプロセスでも同じ結果になることを保証するものではありません。例はチケットの予約ですが、ショップ、定期購入、ローン、申し込み、試験も、確定する段階で同じ確認が必要です。3.3.4は、自分のデータを保存・編集するたびに確認を求めるものではなく、間違いの代償が大きいか、取り消しにくい場合に限ります。送られるメールも含めてプロセス全体を、利用者が使う支援技術や道具で確認してください。 --- このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）