トピックを検索
画像を選ばないと通れないログイン
銀行のログインで、バスの写った画像をすべて選ぶか、口座開設時にアップロードした写真を当てるしか先へ進む方法がなく、見分けられない人や覚えていない人は止まってしまう
<legend>Choose the photo you uploaded</legend> 問題
画像を見分けられない人や、どれが自分の写真だったか覚えていない人は、画像を選ぶ以外に先へ進む方法がないため、ログインを終えられない
ある銀行のログインは、メールアドレスとパスワードを求めた後、口座の画面を開く前にもう1つ段階を挟みます。この段階の作り方としてよくあるのは2通りで、どちらも行き着く先は同じです。
1つ目は、ボット対策の確認です。新しいブラウザー、共用のネットワーク、プライバシー保護のツールを使っている人など、確認サービスが疑わしいと判定した訪問者には、「バスが写っている画像をすべて選んでください」の下に9枚の画像が並びます。日本では画像認証とも呼ばれ、たいていはCAPTCHAのサービスが、専用の枠の中に表示します。路面電車を数えるのか分からない人や、写真の端に写ったバスを見落とした人には、新しい画像が並び、もう一度やり直しになります。
2つ目は、本人の写真です。口座を開いたとき、銀行は自分の写真を1枚アップロードさせました。今回は「アップロードした写真を選んでください」の下に、その写真をほかの8枚と並べ、正しい1枚を選んだ人だけを通します。何年も前にアップロードした人や、海辺と庭のどちらの写真だったか覚えていない人は、先へ進めません。
どちらの場合も、通る方法は正しい画像を選ぶことだけです。ログイン用のリンクをメールで受け取るボタンも、パスキーも、ほかの方法もありません。ボット対策の確認では、スクリーンリーダーの利用者には「バスが写っている画像をすべて選んでください、グループ」に続いて「画像1、チェックボックス、チェックなし」と聞こえ、画像9まで同じように続きます。これでは始めることもできません。
達成基準3.3.9「アクセシブルな認証(高度)」はレベルAAAで、WCAG 2.2で新しく加わりました。ログインのどの段階も、認知機能テストを求めてはいけません。ただし、その段階に、テストのいらない別の方法か、テストを通る助けになる仕組みがあれば構いません。AAの3.3.8と同じ基準から、例外を2つ外したものです。AAでは、バスを選ぶような物の識別と、アップロードした写真のように本人がサイトに提供したコンテンツの識別は認められています。AAAでは、どちらも認められません。解説書も、この2種類をどちらも挙げています。認証の段階では、特定の物が写った画像を選ばせることも、本人が提供した画像を選ばせることもできません。
HTMLには、これを妨げるものが何もありません。画像の並びは普通の画像とチェックボックスか、CAPTCHAのサービスの枠でできていて、どちらもログインの画面にそのまま置けます。代替テキストでも解決しません。ボット対策の画像は、答えを教えずに何が写っているかを説明できません。本人がアップロードした写真にも、その横の写真にも、説明を付ける人はいません。仮に付けても、写真を見分けるテストが、説明を覚えておくテストに変わるだけです。一部のCAPTCHAのサービスにあるような音声版を加えても、別の方法にはなりません。3.3.8の解説書によれば、聞き取った内容を入力するのは書き写しで、これもテストだからです。
この段階は、パスワードが合っていた後に出ます。そのため、ログインが求めたことをすべて済ませた人を、支払いのように口座が最も必要なときに止めてしまうことがよくあります。
10グループ中3グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 言語・認知・学習の能力が限られる 記憶に困難のある人は、口座を開いたとき(何年も前かもしれません)にアップロードした写真を、9枚の中から選び出さなければなりません。絵を読み取るのが苦手な人や、路面電車や大型バスをバスに数えるか決められない人には、間違えるたびに新しい画像が並び、やり直しになります。
- 視覚を使わない スクリーンリーダーは、ボット対策の確認を「画像1、チェックボックス、チェックなし」と9回読みます。画像を説明すれば、答えを明かしてしまうからです。アップロードした写真もその横の8枚も「写真1」から「写真9」としか読まれないため、全盲の人はどれが自分の写真か分からず、ほかのボタンもありません。
- 視覚が限られる マスは小さく、ボット対策の写真はぼやけていたり、端が切れていたりすることがよくあります。拡大してもマスが大きくなるだけで鮮明にはならず、写真の端に写ったバスは見落としがちです。
画像には代替テキストがあり、チェックボックスとラジオボタンには凡例の付いたグループがあり、「次へ」ボタンにも名前があります。そのため、axeなどの自動チェックはこの段階を合格にします。この段階はパスワードの後に出るうえ、ボット対策の確認は疑わしい訪問者にしか画像を見せないため、ログインのページを調べてもどちらも見つかりません。ログインしないEaseWebの診断は、2つを確認の依頼として挙げます。1つは、ログインのフォームの中に置かれたreCAPTCHAやhCaptchaのような画像認証のサービスです。もう1つは、ログインの画面で、画像について尋ねる問いの下に、文字のない画像だけの選択肢が4つ以上並んでいるものです。画像が出るか、その横にテストのいらない方法があるかは、人が実際にログインして確かめる必要があります。AIのコードアシスタントは、ログインを守るよう頼まれると、画像認証や本人の写真による確認を持ち出すことがあります。さらにアクセシブルにするよう頼むと、音声版を加えて済ませかねず、テストはそのまま残ります。
試してみる
パスワードは入力済みです。銀行へのログインを済ませてみましょう
問題1: バスが写っている画像をすべて選び、「次へ」を押してください。路面電車は数えますか?下の欄は、スクリーンリーダーと同じように、この画面を上から読みます。
問題2: 口座を開いたときにアップロードした写真を選んでください。どれだったか分かりますか?
修正を適用します。 画像を選ばずに、ログインを済ませられますか?
問題あり 修正できますか?
上から読むと、スクリーンリーダーの読み上げ:
- [email protected] としてログイン中
- バスが写っている画像をすべて選んでください、グループ
- 画像1、チェックボックス、チェックなし
- 画像2、チェックボックス、チェックなし
- 画像3、チェックボックス、チェックなし
- …画像9まで同じように続く
- 次へ、ボタン
修正方法
画像を選ばずにログインを終えられるようにする
バスの写った画像をすべて選ぶ
<form action="/sign-in/check" method="post"> <p>Signing in as [email protected]</p> <fieldset> <legend>Select every picture with a bus</legend> <label> <input type="checkbox" name="picture" value="1"> <img src="/check/1.jpg" alt="Picture 1"> </label> … </fieldset> <button type="submit">Continue</button></form>問題点3点
… は、1枚目と同じ形の残り8枚の画像です。CAPTCHAのサービスが並べる画像も、ページの中に描くかサービスの枠の中に描くかにかかわらず、中身はこのマークアップと変わりません。
- 先へ進むには、画像の中からバスを見分けるしかありません。
- 代替テキストでは、答えを明かさずに、それぞれの画像に何が写っているかを伝えられません。
- この段階には、ほかの方法がありません。
画像の代わりに、メールで届くログイン用のリンク
<form action="/sign-in/email-link" method="post"> <p>Signing in as [email protected]</p> <button type="submit">Email me a sign-in link</button></form>修正の手順3ステップ
- 画像とその問いを外します。見分けるものも、思い出すものも残りません。
- フォームの送信先を変えます。サーバーは口座のメールアドレスにリンクを送り、そのリンクでログインが済みます(達成方法G218)。
- ボタンには、押すと何が起きるかを表す「Email me a sign-in link」という名前を付けます。
これで2つの修正前の例が直り、3.3.9を満たします。メールを開き、期限が切れる前にリンクを開く必要があるため、次の画面で、リンクをどこに送ったか、いつまで使えるかを伝えてください。
どちらも3.3.9を満たし、どちらもテストを避ける道を足すのではなく、全員からテストを取り除きます。サイトにまだパスキーがなければ、メールのリンクだけを使います。フォーム1つとボタン1つで済み、ページに新しく作るものはありません。パスキーに対応しているサイトでは、パスキーを加えます。パスキーを持つ人はページを離れずに1回で済み、それ以外の人はメールのリンクで通れます。方針で必須のCAPTCHAのサービスのように、画像の段階を変えられない場合は、画像の横にメールのリンクを置いても満たします。3.3.9は、横に別の方法があるテストを認めているからです。その形はCAPTCHAのガイドにあります。
画像が、パスワードを次々に試すプログラムを止めるためだけにあったのなら、その段階は置き換えずに外せます。アカウントごと、接続元ごとの試行回数の制限が、本人にテストを課さずにサーバーで同じ役目を果たします。パズルを解く以外に通れないCAPTCHAを参照してください。
パスワードを打つ前に確かめてもらうために、銀行が表示するだけのセキュリティ画像は、ログインが何も判定しないため、この基準の言うテストにはあたりません。効果もあまりありません。2007年の銀行利用者の調査では、自分の口座を使った25人のうち23人が、画像が消えていてもパスワードを入力しました。アップロードした写真を複数の中から選ばせることが、3.3.9の認めない段階です。3.3.8の解説書は、こうした個人のコンテンツは推測で当てられることがあると注意しています。この例なら9分の1です。本人がアップロードしたのではなく、銀行が用意した画像から選んだものなら、もっと早く不適合になります。3.3.8の例外は本人が提供したコンテンツだけが対象のため、それを選び出させるだけで、AAの3.3.8に適合しません。貼り付けを受け付けないパスワード欄と同じ基準です。
メールのリンクは1回だけ、短い時間だけ使えるようにし、送ったことを伝える画面に、その両方を書いてください。携帯電話のショートメッセージで届くコードも2段階目の方法の1つですが、手で入力するのは書き写しです。貼り付けられないワンタイムコードの入力欄で扱う、貼り付けと自動入力が必要です。
パスキーはほかの方法と並べて用意し、唯一の方法にはしないでください。指紋や顔を使えない人もいます。EN 301 549の5.3は、1つの生体的特徴だけを利用者の識別に使わないよう求めています。パスキーは端末の画面ロックのPINでも使えます。パスキーの作成は、ログインの途中ではなく、ログインを済ませた後に勧めると、ログインそのものを短く保てます。
ログインのほかの部分にも同じ注意が必要です。貼り付けを拒むパスワード欄は3.3.8に適合しません。貼り付けを受け付けないパスワード欄を参照してください。
修正の確認
3項目、マウス不要
確認方法: スクリーンリーダー、キーボード
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ログイン、そのボット対策、2段階目の方法を変更した際は、再度確認します。
制限
このサンプルは、どのログインでも同じ結果になることを保証するものではありません。3.3.9はレベルAAAで、ほとんどの法律や方針は求めていません。しかし、この基準が守る人は、AAを満たすログインでも画像で締め出されている人です。対象はログインで、アカウントの作成や復旧は含みません。ただし、そこに画像の段階があれば、同じ人が止まります。メールのリンクはメールを確認できる人の、パスキーはパスキーを持つ人の助けにしかならないため、ログインの方法は複数用意してください。ボット対策の確認が疑った訪問者にだけ出るものも含め、利用者が頼る道具でログイン全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: accessible-authentication-enhanced(新しいタブで開きます)
- WCAG Understanding: accessible-authentication-minimum(新しいタブで開きます)
- WCAG Technique G218(新しいタブで開きます)
- w3.org: turingtest(新しいタブで開きます)
- developer.mozilla.org: Web_Authentication_API(新しいタブで開きます)
- developer.mozilla.org: parseRequestOptionsFromJSON_static(新しいタブで開きます)
- cl.cam.ac.uk: emperor.pdf(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。