3.3.8アクセシブルな認証（最低限）

「アクセシブルな認証」がなぜ必要なの？

ログイン画面はほぼすべての Web サービスに存在します。しかしその設計が原因で、一部のユーザーがサービスに入れないことがあります。

特に問題になるのが 「認知機能テスト」 への依存です。 認知機能テストとは、情報を記憶・転記・計算・解読することを求める仕組みのことです。 代表例がパスワードの丸暗記と、CAPTCHA（画像の文字を書き写す）です。

• ディスレクシア（読字障害） の人は、ランダムな文字列の視覚的な読み取りに 著しく時間がかかります。
• 短期記憶に困難 のある人（脳卒中後・認知症・ADHD 等）は、 画面を見ながら別フィールドに転記する作業でミスが重なります。
• 視覚障害 のある人には、代替テキストのない CAPTCHA 画像は そもそも読めません。

WCAG 2.2 の達成基準 3.3.8 は「少なくとも1つの認知テストに頼らない手段を用意せよ」 と求めています。具体的には、パスワードのペーストを禁止しない・パスワードマネージャを妨げない・ メール OTP を貼り付けられる・パスキーを用意する、といった対応がこれにあたります。

不合格の例（ペースト禁止＋記憶/転記）

下のフォームでは、パスワード欄への貼り付けがブロックされています。 さらに、ログインには画像の文字を読んで転記する認知テスト（CAPTCHA）が必須です。 パスワードマネージャを使っていても、ペーストできません。

合格の例（貼り付け可・自動入力・パスキー）

下のフォームでは、パスワードの貼り付けを許可し、autocomplete="current-password" でパスワードマネージャの自動入力が使えます。 認知テストはなく、代わりにメールのワンタイムコードを貼り付けたり、パスキー（生体認証）でログインする手段も選べます。

実装（コード）

<!-- ✅ パスワードマネージャ対応・貼り付け許可 -->
<form method="post" action="/login">
  <div class="field">
    <label for="login-email">メールアドレス</label>
    <input
      type="email"
      id="login-email"
      name="email"
      autocomplete="username"
      required
    />
  </div>

  <div class="field">
    <label for="login-password">パスワード</label>
    <!-- onpaste を一切付けない → 貼り付け・パスワードマネージャが動く -->
    <input
      type="password"
      id="login-password"
      name="password"
      autocomplete="current-password"
      required
    />
  </div>

  <!-- 代替①：メール OTP（貼り付け可・autocomplete で自動入力対応） -->
  <div class="field">
    <label for="otp-code">確認コード（メールから貼り付けられます）</label>
    <input
      type="text"
      id="otp-code"
      name="otp"
      inputmode="numeric"
      autocomplete="one-time-code"
    />
  </div>

  <button type="submit">ログイン</button>
</form>

<!-- 代替②：パスキー / 生体認証（記憶不要） -->
<button type="button" id="passkey-btn">
  パスキーでログイン（Touch ID / 顔認証）
</button>

<!-- ❌ ペースト禁止 + 認知テスト強制 -->
<form>
  <label for="password">パスワード</label>
  <!-- onpaste="return false" で貼り付けを全面ブロック -->
  <input
    type="password"
    id="password"
    name="password"
    onpaste="return false"
  />

  <!-- 画像を読んで転記させる認知テスト -->
  <p>下の画像の文字を読み取って入力してください：</p>
  <img src="/captcha.png" alt="">
  <!-- alt="" → スクリーンリーダーでは内容が一切読めない -->
  <label for="captcha">文字認証（必須）</label>
  <input type="text" id="captcha" autocomplete="off" />

  <button type="submit">ログイン</button>
</form>

認知テストを避ける具体策

WCAG 3.3.8 を満たすために、以下のいずれかの組み合わせを採用してください。

パスワードのコピー&ペーストを許可する

onpaste イベントのキャンセルや JS での貼り付け妨害を行わない。 パスワードマネージャがフィールドに自動入力できる状態を保つ。

autocomplete 属性を正しく付与する

パスワード欄に autocomplete="current-password"、 新規登録欄に autocomplete="new-password"、 メール欄に autocomplete="username" を付ける。 ブラウザ・OS・パスワードマネージャが正確に認識できるようになる。

メール・SMS のワンタイムコード（OTP）を貼り付けられるようにする

OTP 入力欄に autocomplete="one-time-code" を付ける。 iOS / Android はメール・SMS のコードを自動提案し、転記の手間を省く。 貼り付けもブロックしない。

パスキー・生体認証を代替手段として提供する

WebAuthn API（navigator.credentials.get()）を使ったパスキーは、 パスワードも CAPTCHA も不要。Touch ID・顔認証・PIN で認証でき、 記憶・転記の負担がゼロになる。

オブジェクト認識（写真から選ぶ）は条件付きで許容

「猫が写っている画像をクリックしてください」式の CAPTCHA は、この達成基準の対象外。 ただし代替テキストなしの画像認識は 1.1.1 に違反し、 英語文字の書き起こしが不要な点でアクセシブルです。

チェックリスト

• パスワード欄で onpaste イベントをキャンセルしていない
• JS の paste イベントリスナーでも貼り付けをブロックしていない
• パスワード欄に autocomplete="current-password"（または new-password"）がある
• OTP 欄がある場合は autocomplete="one-time-code" を付けている
• メール欄に autocomplete="username" を付けている
• CAPTCHA を唯一の認証手段にしておらず、代替手段がある
• パスワードマネージャ（1Password・Bitwarden 等）でフィールドが認識されることを確認した
• パスキー・生体認証・メール OTP のいずれかを代替手段として提供している（理想）