トピックを検索
パズルを解く以外に通れないCAPTCHA
チケットサイトのログインで、パスワードを2回間違えると、ゆがんだ文字の画像が出ます。音声版もほかの方法もないため、画像を見られない人や読めない人は先へ進めません。
<img src="/captcha" alt="CAPTCHA"> 問題
ゆがんだ画像が見えない人や、その文字を読み取れない人は、画像を解く以外にログインする方法がないため、まったくログインできません。
あるコンサートのチケットサイトは、ログインにメールアドレスとパスワードを求めます。パスワードを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は間違いの後に出るため、打ち間違えやすい人ほど重い負担を負います。パスワードを記憶を頼りに打つ人や、スクリーンリーダー、スイッチ、スクリーンキーボードで入力する人です。
10グループ中3グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダーは「CAPTCHA、画像」と読み、次に「表示された文字を入力、編集」と読みます。画像の代替テキストは何の画像かを伝えても文字までは伝えられず、音声もほかのボタンもないため、全盲の人はまったくログインできません。
- 視覚が限られる 文字は、わざと細く、重ねて、線を引いて描かれています。拡大してもぼやけが大きくなるだけで、弱視の人はOと0、5とSを見分けられないことがよくあります。
- 言語・認知・学習の能力が限られる ディスレクシアのある人や、文字や数字を覚えて写すのが苦手な人は、ゆがんだ文字を読み、順番どおりに入力しなければなりません。間違えるたびに新しい画像になり、ログインでは、あと何回かでアカウントがロックされることもあります。
画像に代替テキストがあるため、axeなどの自動チェックは合格にします。代替テキストが目的を説明せずCAPTCHAという名前を示すだけであることも、ページにほかの方法がないことも、ルールでは判定できません。この例のCAPTCHAはログインに2回失敗した後にしか出ないため、読み込んだ直後のページを調べても見つかりません。わざとパスワードを間違えることのないEaseWebの診断でも同じです。最初からページにあるCAPTCHAについては、たどり着いた各ページで、よく使われるサービスの部品や、アドレスか代替テキストにCAPTCHAとある画像を、1ページに5つまで確認の依頼として挙げます。別の感覚の形があるか、ログインならテストのいらない方法があるかは、人が確かめる必要があります。AIのコードアシスタントは、フォームをボットから守るよう頼まれると、まずCAPTCHAの部品を持ち出すことがあります。さらにアクセシブルにするよう頼むと、文字をそのまま書き出した代替テキストを書きかねず、すべてのボットに答えを渡してしまいます。
試してみる
パスワードを2回打ち間違えたところです。画像を見ずに、ログインしてみてください。
下の読み上げは、スクリーンリーダーと同じようにフォームを上から読みます。見なくても、パズルを解かなくても先へ進める方法はありますか？
問題あり 修正できますか？
上から読むと、スクリーンリーダーの読み上げ：
- 試行回数が多すぎます。下の文字を入力してログインしてください。
- メールアドレス、編集、[email protected]
- パスワード、保護された編集
- CAPTCHA、画像
- 表示された文字を入力、編集
- ログイン、ボタン
修正方法
ボットはページの裏で止めるか、CAPTCHAに、別の感覚で使える形と、テストのいらない方法を添えます。
- 1サーバーでの確認で済むなら、ログインにCAPTCHAを置かない。
- 2CAPTCHAの目的を代替テキストで伝え、別の感覚でも使えるようにする。
- 3ログインでは、どのCAPTCHAの横にも、テストのいらない方法を置く。
<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をなくし、試行回数をサーバーで制限する
<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つの接続元から試せる回数を、全アカウントの合計で制限します。こうした制限は、パスワードを次々に試すプログラムを止めつつ、実際に操作している人にはテストを課しません。
最初の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の同じ不適合です。貼り付けを受け付けないパスワード欄を参照してください。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
デザインの案
ボットの確認は、何も求めずに、穏やかに見せられます。
パスワードを2回間違えた後の画面を、4通りに描きました。Tabで移動して、それぞれ試してください。2つはパズルなしで誰でも通れ、2つは親しみやすく見えるだけです。
デザインファイルで
- まずパズルのないログインを描く。ボットの確認を入れるなら、何も求めない控えめな1行として描く。
- 確認サービスが人を疑ったときに出す画面も描く。人がつまずくのは、その画面だから。
- 確認を避ける方法は、下の小さな灰色の文字ではなく、確認と同じ大きさと重みで描く。
- 画像ごとに、「人であることを確かめるために入力する文字」のように、その目的を代替テキスト用に書き添える。
合格
- ひとりでに終わる確認 小さな状態表示が、ページを使っている間に確認を進め、終わったことだけを伝えます。見ることも聞くことも解くこともないため、別の感覚の形も、避ける方法もいりません。
基本原則：人を試さずにボットを止める
- 同じ重みの2つの進み方 確認と、それを避ける方法を、同じ大きさの2枚のカードとして並べます。小さなリンクを探す必要はありません。片方は文字を見るか聞くかを選べ、もう片方は何も解かずにログイン用のリンクをメールで受け取れます。
不合格
- ピースを隙間まで滑らせるWCAG 3.3.8 文字を打つより軽く感じますが、パズルであることに変わりはありません。ピースを隙間に合わせるには視覚と思いどおりのドラッグが必要で、音声の形もなく、ログインでは3.3.8はパズルを例外にしていません。ここでは矢印キーでも動かせますが、それでも変わりません。
- バスの写ったマスをすべて選ぶWCAG 1.1.1 物を選ぶことはAAの3.3.8では認められているため、安全な選択に見えます。しかし、マスは絵だけで、横に音声の形がないため、見えない人は始めることもできません。1.1.1は別の感覚の形を求めています。
修正の確認
マウスを使わない4つの確認
確認方法： スクリーンリーダー、キーボード、音を消して視聴、画面を見ずに視聴
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。CAPTCHAのサービスやその設定、ログインのフォームを変更した際は、再度確認します。
制限
このサンプルは、どのフォームでも同じ結果になることを保証するものではありません。どのCAPTCHAも誰かを締め出します。音声版は盲ろうの人の助けにならず、メールのリンクはメールを確認できない人の助けになりません。最も確かな解決は、人であることを証明させないことです。3.3.8の対象はログインです。問い合わせフォームや購入手続きのCAPTCHAは、3.3.8ではなく1.1.1の対象ですが、締め出す相手は同じです。間違いの後にだけ出るものも含め、利用者が頼る道具で流れ全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。