3.3.7冗長な入力

「冗長な入力」を避けるとなぜ良いの？

WCAG 2.2 の達成基準 3.3.7 は、同じ手続き（プロセス）の中で、一度入力させた情報を再入力させないことを求めます。 前のステップで入力した値を自動入力するか、選んで再利用できるようにします。

要約欄の「自動入力するか、前に入力した値から選べるようにする」はすでにご存知かと思うので、 ここでは なぜ それが重要かを深掘りします。

• 認知・記憶に困難のある人：直前に何を入力したか思い出すのが難しく、 再入力のたびにミスや疲弊が生じます。「もう一度書いて」という指示自体が負担です。
• 運動機能に制限のある人：キーボードで1文字ずつタイプすることに大きな労力がかかります。 同じ住所を2回打つのは単純に2倍のコストです。
• スクリーンリーダー利用者：前ステップのフォームに戻って値を確認しながら入力しなおすのは 音声だと特に手間がかかります。
• すべてのユーザー：同じことを2回打たせるのは単純に体験が悪く、離脱率の増加につながります。 アクセシビリティと UX は表裏一体です。

不合格の例（同じ住所を二度入力）

EC サイトのチェックアウトでよくある失敗です。配送先を入力したあと、 請求先でもまったく同じ内容を手入力させられます。

合格の例（「同上」で自動入力）

「請求先は配送先と同じ」チェックボックスをひとつ置くだけで解決します。 チェックすると請求先欄に配送先の値が自動コピーされ、フィールドは無効化されます。

実装（コード）

マークアップ（配送先 → チェックボックス → 請求先）：

<!-- 配送先 -->
<fieldset>
  <legend>配送先住所</legend>
  <div class="field">
    <label for="s-name">氏名</label>
    <input type="text" id="s-name" name="s-name"
           autocomplete="name" />
  </div>
  <div class="field">
    <label for="s-zip">郵便番号</label>
    <input type="text" id="s-zip" name="s-zip"
           autocomplete="postal-code" />
  </div>
  <div class="field">
    <label for="s-addr">住所</label>
    <input type="text" id="s-addr" name="s-addr"
           autocomplete="street-address" />
  </div>
</fieldset>

<!-- 「同上」チェックボックス -->
<label class="same-label">
  <input type="checkbox" id="billing-same" />
  請求先は配送先と同じ
</label>

<!-- 請求先 -->
<fieldset>
  <legend>請求先住所</legend>
  <div class="field">
    <label for="b-name">氏名</label>
    <input type="text" id="b-name" name="b-name"
           autocomplete="billing name" />
  </div>
  <div class="field">
    <label for="b-zip">郵便番号</label>
    <input type="text" id="b-zip" name="b-zip"
           autocomplete="billing postal-code" />
  </div>
  <div class="field">
    <label for="b-addr">住所</label>
    <input type="text" id="b-addr" name="b-addr"
           autocomplete="billing street-address" />
  </div>
</fieldset>

チェックボックスで請求先に自動コピーするスクリプト：

const checkbox = document.getElementById('billing-same');
const shippingIds = ['s-name', 's-zip', 's-addr'];
const billingIds  = ['b-name', 'b-zip', 'b-addr'];

function getEl(id) {
  const el = document.getElementById(id);
  if (!el) throw new Error('element not found: ' + id);
  return el;
}

function syncBilling() {
  const same = checkbox.checked;
  shippingIds.forEach((sid, i) => {
    const s = getEl(sid);
    const b = getEl(billingIds[i]);
    b.value    = same ? s.value : '';
    b.disabled = same;
  });
}

checkbox.addEventListener('change', syncBilling);

// 配送先が変わったらリアルタイムで同期
shippingIds.forEach((sid, i) => {
  getEl(sid).addEventListener('input', () => {
    if (checkbox.checked) getEl(billingIds[i]).value = getEl(sid).value;
  });
});

例外

以下の場合は「再入力させる」ことが許可されます。

再入力が本質的な場合

パスワード確認（タイプミスを検出するために意図的に2回入力させる）、メールアドレス確認、記憶テスト・学習クイズ（覚えているか試すのが目的） などは、再入力自体に意味があるため例外です。

情報がもう有効でない場合

セッションが切れたあとや、前のステップで入力した値が更新されて古くなった場合は、 再入力を求めることができます。

セキュリティ上の理由

機密性の高い操作（金融取引、認証の再確認など）で、意図的にキャッシュを避ける場合も 例外となります。

チェックリスト

• 同じプロセス内で、前ステップに入力した情報を再入力させていない
• 「同上」チェックボックスや「前の値を使う」ボタンなど、再利用の手段を提供している
• 自動コピーした値はユーザーが編集できる（チェックを外せば入力欄が有効になる）
• autocomplete 属性を適切に設定し、ブラウザ補完を妨げていない
• すべての入力欄に <label> が for/id で関連付けられている
• チェックボックスにも <label> が関連付けられている
• 配送先・請求先などのグループは <fieldset>/<legend> で区切っている
• 例外（パスワード確認・記憶テスト・情報が無効な場合）に該当しないかを確認した
• キーボードだけで操作でき、フォーカスリングが見える