# パズルを解く以外に通れないCAPTCHA

Source: https://easeweb.dev/learn/captcha
Topics: ページの構造 > CAPTCHAに、視覚にもパズルにも頼らない代替手段がある (WCAG 1.1.1, 3.3.8)
The fix: ログインからCAPTCHAを外し、繰り返しの試行はサーバーで止めます。どうしても残す場合は、代替テキストで目的を伝え、文字を音声でも聞けるようにし、メールで届くログイン用のリンクのような、テストのいらない方法をその横に置きます。
Test with: screen reader, keyboard, sound off, screen off
References: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html https://www.w3.org/WAI/WCAG22/Techniques/general/G143 https://www.w3.org/WAI/WCAG22/Techniques/general/G144 https://www.w3.org/WAI/WCAG22/Techniques/general/G218 https://www.w3.org/TR/turingtest/

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

## 場面

あるコンサートのチケットサイトは、ログインにメールアドレスとパスワードを求めます。パスワードを2回間違えると、その入力欄の下に枠が加わります。ゆがんだ6つの英数字の画像と、「表示された文字を入力」というラベルの欄と、「ログイン」ボタンです。パスワードを次々に試すプログラムを遅らせるために、サイトが加えたものです。パスワードを2回打ち間違えたスクリーンリーダーの利用者には、「CAPTCHA、画像」に続いて「表示された文字を入力、編集」と聞こえます。代替テキストは何の画像かを伝えますが、何が写っているかは伝えません。写っている内容を伏せるのがCAPTCHAの目的だからです。音声版もほかのログイン方法もないため、チケットは買えません。目は見えてもディスレクシアのある利用者には、「7KX4P2」なのか「7KX4PZ」なのかが分からず、間違えるたびに新しい画像に変わります。

同じ段階には、ほかのつまずき方もあります。

- 画像に代替テキストがまったくなく、スクリーンリーダーはファイル名を読むか、何も読まない。
- パズルのピースを隙間までドラッグさせたり、計算をさせたりし、ほかの方法がない。
- 写真の並びから、バスの写った写真をすべて選ばせ、音声版も飛ばす方法もない。

## 確認できる問題

達成基準1.1.1「非テキストコンテンツ」はレベルAです。CAPTCHAは、写っている内容を代替テキストで伝えなくてよい、数少ない画像の一つです。伝えれば、どのプログラムにも答えを教えることになるからです。その代わりに、この基準は2つを求めます。CAPTCHAの目的を示して説明する代替テキスト（達成方法G143）と、画像に音声を添えるなど、別の感覚で使える別の形のCAPTCHA（G144）です。この例にはどちらもありません。代替テキストの「CAPTCHA」は画像の名前を示すだけで、何をすればよいかを伝えません。視覚を使わずに通る方法もありません。

達成基準3.3.8「アクセシブルな認証（最低限）」はレベルAAで、WCAG 2.2で新しく加わりました。ログインで画像の文字を読み取って入力するのは書き写しにあたり、認知機能テストです。ログインのどの段階も、認知機能テストに頼ってはいけません。ただし、その段階に、テストのいらない方法か、助けになるものがあれば構いません。解説書によれば、音声のCAPTCHAは、このテストのいらない方法にはあたりません。聞いた内容を打つことも書き写しだからです。バスを選ぶような物の認識は、このレベルでは例外です。文字を読むこと、計算、パズルは例外ではありません。

## 利用者への影響

CAPTCHAは間違いの後に出るため、打ち間違えやすい人ほど重い負担を負います。パスワードを記憶を頼りに打つ人や、スクリーンリーダー、スイッチ、スクリーンキーボードで入力する人です。

## 自動チェックとAIの限界

画像に代替テキストがあるため、axeなどの自動チェックは合格にします。代替テキストが目的を説明せずCAPTCHAという名前を示すだけであることも、ページにほかの方法がないことも、ルールでは判定できません。この例のCAPTCHAはログインに2回失敗した後にしか出ないため、読み込んだ直後のページを調べても見つかりません。わざとパスワードを間違えることのないEaseWebの診断でも同じです。最初からページにあるCAPTCHAについては、たどり着いた各ページで、よく使われるサービスの部品や、アドレスか代替テキストにCAPTCHAとある画像を、1ページに5つまで確認の依頼として挙げます。別の感覚の形があるか、ログインならテストのいらない方法があるかは、人が確かめる必要があります。AIのコードアシスタントは、フォームをボットから守るよう頼まれると、まずCAPTCHAの部品を持ち出すことがあります。さらにアクセシブルにするよう頼むと、文字をそのまま書き出した代替テキストを書きかねず、すべてのボットに答えを渡してしまいます。

## 修正前：画像だけのCAPTCHA

```html
<form action="/sign-in" method="post">
  …
  <img src="/captcha" alt="CAPTCHA">
  <label for="captcha">Type the characters you see</label>
  <input id="captcha" name="captcha">
  <button type="submit">Sign in</button>
</form>
```

`…` は、変更しないメールアドレスとパスワードの欄です。通るには、画像を見て文字を読むしかありません。代替テキストは画像の名前を示すだけで目的を伝えず、文字を別の感覚で受け取る手段も、解かずにログインする方法もありません。

## 修正後：CAPTCHAをなくし、試行回数をサーバーで制限する

```html
<form action="/sign-in" method="post">
  …
  <!-- No CAPTCHA: the server limits attempts per account and per address. -->
  <button type="submit">Sign in</button>
</form>
```

ログインは誰にもそれ以上何も求めないため、合格も不合格もありません。CAPTCHAの役目はサーバーに移ります。サーバーは、1つのアカウントで間違えたパスワードを数回まで認め、その後は試行を遅らせるか、メールで送るリンクを本人がたどるまでアカウントをロックします。また、1つの接続元から試せる回数を、全アカウントの合計で制限します。こうした制限は、パスワードを次々に試すプログラムを止めつつ、実際に操作している人にはテストを課しません。

## 修正後：目的と、別の感覚と、テストのいらない方法

```html
<form action="/sign-in" method="post">
  …
  <img src="/captcha" alt="Characters to type, to check you're a person. You can also listen to them below.">
  <p id="captcha-listen">Or listen to the characters:</p>
  <audio controls src="/captcha/audio" aria-labelledby="captcha-listen"></audio>
  <label for="captcha">Type the characters you see or hear</label>
  <input id="captcha" name="captcha">
  <button type="submit">Sign in</button>
  <button type="submit" formaction="/sign-in/email-link">Email me a sign-in link instead</button>
</form>
```

代替テキストは、文字を明かさずに、画像の目的と、代わりの方法がどこにあるかを伝えます（G143）。同じ文字は音声プレーヤーでも聞け、別の感覚の形になります（G144）。これで1.1.1を満たします。2つ目のボタンはフォームを別の送信先に送り、サーバーはログイン用のリンクをメールで送ります。解くものはなく、入力するのもメールアドレスだけです（G218）。この方法が、3.3.8の求めるテストのいらない方法にあたります。セキュリティベンダーの設定でCAPTCHAが入るなど、CAPTCHAを残すしかないサイトに向いています。

## 修正後：音声版だけを加える

```html
<form action="/sign-in" method="post">
  …
  <img src="/captcha" alt="Characters to type, to check you're a person. You can also listen to them below.">
  <p id="captcha-listen">Or listen to the characters:</p>
  <audio controls src="/captcha/audio" aria-labelledby="captcha-listen"></audio>
  <label for="captcha">Type the characters you see or hear</label>
  <input id="captcha" name="captcha">
  <button type="submit">Sign in</button>
</form>
```

目的を伝える代替テキストと別の感覚の形で1.1.1は満たし、全盲の人も文字を聞いて入力できます。しかし、ログインではこれでは足りません。聞いた内容を打つことも書き写しのため、3.3.8は満たしません。6文字を覚えておけない人は、今までどおり覚えて順番どおりに入力しなければならず、見ることも聞くこともできない人には、通る方法がまったくありません。

## どの方法を選ぶか

最初の2つは両方の基準を満たし、音声版だけでは1.1.1しか満たしません。CAPTCHAは外してください。サーバーでの制限が同じプログラムを止め、ログインには解くものがなくなります。2つ目の方法では、リンクに気づかなければ、誰でもテストを解くことになります。CAPTCHAを残すのは、変えられないベンダーや方針が求める場合だけにし、その場合は3つの要素をすべて用意します。音声版だけで済むのは、問い合わせフォームのように、3.3.8の対象でないログイン以外のフォームです。そこでも、人に何も求めない確認のほうが望ましいことに変わりはありません。

## 実装の判断

CAPTCHAの答えを、代替テキストにも、ファイル名にも、ページのどこにも入れないでください。止めたいはずのプログラムに答えを渡すことになります。代替テキストでは目的を伝え、文字は音声に任せます。

音声の操作部品は、キーボードでたどり着けるHTML標準の `audio` 要素か本物のボタンにし、何度でも聞き直せるようにします。文字を一度で聞き取れない人は多くいます。聞いている途中で問題の期限が切れないようにもしてください。

アクセスごとにページの裏で評価するCAPTCHAのサービスは、ほとんどの人に何も求めないため助けになります。ただし、疑わしいと判定した訪問者に何を表示するかを確認してください。上のような画像のパズルが出ることもあり、その場合は同じ代替手段が必要です。プログラムだけが入力する隠れた欄や、1つの接続元がフォームを送れる回数の制限は、ほかのフォームでも同じ役目を果たします。

バスや信号機のような物の写った写真を選ばせることは、AAの3.3.8では例外ですが、1.1.1が求める別の感覚の形はやはり必要です。また、その例外がないAAAの3.3.9には適合しません。

ログインのほかの部分にも同じ注意が必要です。貼り付けを拒むパスワード欄も、3.3.8の同じ不適合です。[貼り付けを受け付けないパスワード欄](/ja/learn/password-paste)を参照してください。

## 修正の確認

1. スクリーンリーダーで、また画面を見ずに、CAPTCHAが出るところまでログインを進め、音声か、テストのいらない方法で、視覚なしに通れるか確認する。
2. 音を消し、画像を隠して、残るものを確かめる。ログインでは、メールのリンクのように、そのどちらもいらない方法がなければならない。
3. テストのいらない方法を最初から最後まで使い、何も解かずにログインできるか確認する。
4. キーボードだけで、音声の操作部品、答えの欄、各ボタンと、段階のすべての部分にたどり着いて使えるか確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。CAPTCHAのサービスやその設定、ログインのフォームを変更した際は、再度確認します。

## 制限

このサンプルは、どのフォームでも同じ結果になることを保証するものではありません。どのCAPTCHAも誰かを締め出します。音声版は盲ろうの人の助けにならず、メールのリンクはメールを確認できない人の助けになりません。最も確かな解決は、人であることを証明させないことです。3.3.8の対象はログインです。問い合わせフォームや購入手続きのCAPTCHAは、3.3.8ではなく1.1.1の対象ですが、締め出す相手は同じです。間違いの後にだけ出るものも含め、利用者が頼る道具で流れ全体を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）