トピックを検索
同じ住所を二度入力させるチェックアウトフォーム
2段階のチェックアウトで、配送先住所を入力した後、請求先住所として同じ内容をもう一度尋ねます。欄はすべて空で、入力したばかりの内容を再利用する方法がありません。
問題
入力に時間がかかる人、疲れやすい人、間違えやすい人が、1分前に入力した住所を、記憶を頼りにもう一度入力しなければなりません。
あるショップのチェックアウトは2段階です。最初の「配送先」では、氏名、住所、郵便番号を尋ねます。入力して「支払いへ進む」を押すと、次の段階でカード情報に続いて請求先住所を尋ねられます。氏名、住所、郵便番号の同じ三つの欄が、すべて空です。多くの人にとって請求先は配送先と同じなので、記憶を頼りに、または一つ前の段階に戻って確かめながら、もう一度一行ずつ入力します。
同じことは、さまざまなプロセスで起こります。
- ゲストとしての購入で最初にメールアドレスを尋ね、最後の段階で「アカウント作成」のためにもう一度尋ねる。
- 予約で旅行者全員の名前を入力した後、支払いの段階で代表者の名前をまた尋ねる。
- 「メールアドレス（確認用）」の欄が貼り付けを受け付けず、同じアドレスを二度入力させる。
- カードが拒否されたときや、修正のために一つ前の段階に戻ったときに、フォームが空になる。
達成基準3.3.7「冗長な入力」はレベルAで、WCAG 2.2で追加されました。同じプロセスの中で、前に入力した情報や提示された情報をもう一度尋ねる場合、その情報は入力済みになっているか、選択できる状態でなければなりません。この請求先の欄は、どちらでもありません。
ブラウザーの自動入力は対象になりません。自動入力は利用者のブラウザーが何を保存しているかに左右されるため、サイト自身が前の回答を示す必要があります。「選択できる」の範囲は広く、前の回答を再利用するチェックボックス、一覧からの選択、コピーできるように同じページに値を表示することも含まれます。例外は三つです。記憶力のゲームのように再入力が不可欠な場合、表示されない新しいパスワードの確認のようにセキュリティのために必要な場合、期限切れのカードのように前の値がもう有効でない場合です。
この基準が対象とするのは一つのプロセスで、すべての訪問ではありません。先週入力した住所を覚えておく必要はありませんが、外部の決済ページのように、プロセスは複数のページやドメインにまたがることがあります。
スマートフォンでは手間が倍になります。画面のキーボードがフォームの半分を覆い、配送先の段階はもう画面になく、そこからコピーすることもできません。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響あり）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 言語・認知・学習の能力が限られる 記憶に困難がある人は、1分前に入力した番地や郵便番号を正確に思い出せないことがあります。入力し直すたびに間違いの機会が増え、カードが拒否される原因になります。
- 届く範囲・力が限られる 一回の入力にも労力や痛みを伴う人が、住所全体をもう一度入力することになります。
- 手の操作が限られる 音声入力、スイッチ、スクリーンキーボードを使う人は、すべての文字をもう一度話したり選んだりする必要があり、時間がかかり間違いも起きやすくなります。
- 視覚を使わない スクリーンリーダーの利用者は、配送先の段階をちらりと見返して確認できないため、記憶を頼りに入力するか、一つ前の段階に戻って聞き直すことになります。
各ページは単独では問題ありません。すべての欄にラベルとautocompleteトークンがあるため、axeなどのスキャナーはどちらの段階も合格にします。重複は、最初の段階から次の段階へ進んで初めて分かります。EaseWebの診断は、同じページで同じ内容を再び尋ね、貼り付けを拒否する欄を検出し、請求先住所を尋ねるフォームを人の確認に回しますが、チェックアウトを最後まで進むことはできません。コーディングアシスタントに「請求先住所を追加して」と頼むと空の欄が追加され、3.3.7の修正を頼むとautocompleteトークンを足すことがよくあります。トークンは自動入力を助けますが、この基準は満たしません。
試してみる
配送先住所はそのままか変更して、「支払いへ進む」を押してください。
支払いの段階で、請求先住所に何を求められるか見てください。フォームの下の欄に、もう一度入力する行数が出ます。
問題あり 修正できますか？
修正方法
入力済みの内容を再利用します。チェック済みの「同じ」ボックスか、入力済みの欄を使います。
- 1同じプロセスで前に入力した値を尋ねる欄を、空のままにしない。
- 2チェック済みの「同じ」ボックスで再利用するか、入力済みにするか、少なくとも同じページに表示する。
- 3貼り付けを禁止せず、戻ったときやエラーの後も入力内容を残す。
<!-- 手順2/2：支払い --><fieldset> <legend>請求先住所</legend> <label for="bill-name">氏名</label> <input id="bill-name" name="bill-name" autocomplete="billing name"> <label for="bill-street">住所</label> <input id="bill-street" name="bill-street" autocomplete="billing street-address"> <label for="bill-postcode">郵便番号</label> <input id="bill-postcode" name="bill-postcode" autocomplete="billing postal-code"></fieldset>最初からチェックされた「配送先と同じ」チェックボックス
<label> <input type="checkbox" id="billing-same" name="billing-same" checked aria-describedby="delivery-address"> 請求先住所は配送先住所と同じ</label><p id="delivery-address">Sam Rivera, 12 Elm Street, AB1 2CD</p><fieldset id="billing" hidden disabled> <legend>請求先住所</legend> <label for="bill-name">氏名</label> <input id="bill-name" name="bill-name" autocomplete="billing name"> <label for="bill-street">住所</label> <input id="bill-street" name="bill-street" autocomplete="billing street-address"> <label for="bill-postcode">郵便番号</label> <input id="bill-postcode" name="bill-postcode" autocomplete="billing postal-code"></fieldset>欄にはラベルがあり、目的も示しているため、1.3.5は満たします。しかし、手順1の配送先住所はこのページのどこにもありません。欄にも、選択肢にも、コピーできるテキストとしてもありません。
請求先が同じ人は、何も入力する必要がありません。ボックスは最初からチェックされており、再利用する住所がその横に表示され、一緒に読み上げられます。住所が違う人はチェックを外し、空の欄に入力します。これは新しい情報なので、3.3.7の対象ではありません。チェックされている間、fieldsetは隠され、無効になっているため、Tab移動、スクリーンリーダー、ブラウザーの検証のどれからも外れ、送信もされません。サーバー側では、チェックがあれば配送先住所を使います。
三つとも3.3.7を満たします。チェック済みのチェックボックスを使ってください。住所が同じ人（多くの場合は大半の人）は何も入力も確認もせずに済み、住所が違う人は、一つずつ消す必要のあるコピーではなく空の欄を受け取れます。デザイン上コントロールを増やせない場合や、二つの住所の違いが会社名のように一行だけになりやすい場合は、欄を入力済みにします。住所を表示してコピーしてもらう方法は、欄は変えられないがページは変えられる決済フォームでの最初の一歩です。変えられるようになったら、ほかの二つのどちらかに置き換えてください。
プロセスの回答は、ページのスクリプトだけでなく、サーバーのチェックアウトセッションに保存します。そうすれば、再読み込み、戻るボタン、送信の失敗で失われず、後の段階はどれも尋ねる代わりに同じ記録を読めます。カードが拒否された後は、セキュリティのためにもう一度尋ねてよいカードのセキュリティコード以外を、すべて残します。
「メールアドレス（確認用）」の欄は、同じアドレスを二度尋ねます。最初の回答が同じページにあってコピーできるため、貼り付けができる間は3.3.7を満たします。それでも、この欄を削除し、確認の段階でアドレスを表示して、変更用のリンクを付けるほうが良い方法です。貼り付けを取り消す欄は基準を満たしません。EaseWebの診断は、同じ内容を再び尋ね、テスト用の空の貼り付けを拒否する欄を報告します。新しいパスワードの確認はセキュリティの例外として認められていますが、そこで貼り付けを禁止すると3.3.8を満たしません。できれば2つ目の欄の代わりに「パスワードを表示」ボタンを用意します。
複数の届け先の住所のように、示せる前の回答が複数ある場合は、ラジオボタンで示し、最後の選択肢を「別の住所」にします。チェックボックスと同じく、「選択できる」状態です。
すべての欄のautocompleteトークンは、billingとshippingの接頭辞付きで残します。3.3.7は満たしませんが、違う住所を入力するときに自動入力が使えます。「自動入力が効かないフォームの入力欄」も参照してください。
チェックボックスで欄を隠すときは、無効にもします。無効にしないまま隠したrequiredの欄は送信を止めてしまい、ブラウザーはその欄にフォーカスを移して理由を伝えることもできません。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない6つの確認
確認方法： キーボード、スクリーンリーダー、タッチ
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チェックアウトの段階や共通のフォームコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どのプロセスでも同じ結果になることを保証するものではありません。例は2段階のチェックアウトですが、会員登録、予約、申し込みも、同じように一段階ずつ確認が必要です。決済事業者のフレーム内の欄は事業者が直すものですが、その周りのページはサイト側の責任です。この基準は訪問をまたいで情報を覚えておくことを求めていません。保存済みの住所は別の機能で、別のプライバシー上の検討が必要です。利用者が使う支援技術や道具で、プロセス全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。