本文へ移動
easeweb
ご相談
トピックを検索

画像を選ばないと通れないログイン

銀行のログインで、バスの写った画像をすべて選ぶか、口座開設時にアップロードした写真を当てるしか先へ進む方法がなく、見分けられない人や覚えていない人は止まってしまう

WCAG 2.2
SC 3.3.9AAA· 2.2 で追加
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり <legend>Choose the photo you uploaded</legend>
アクセシビリティの問題を示した図: 認知:私の写真はどれだっけ?
01

問題

画像を見分けられない人や、どれが自分の写真だったか覚えていない人は、画像を選ぶ以外に先へ進む方法がないため、ログインを終えられない

02

試してみる

パスワードは入力済みです。銀行へのログインを済ませてみましょう

  • 問題1: バスが写っている画像をすべて選び、「次へ」を押してください。路面電車は数えますか?下の欄は、スクリーンリーダーと同じように、この画面を上から読みます。

  • 問題2: 口座を開いたときにアップロードした写真を選んでください。どれだったか分かりますか?

  • 修正を適用します。 画像を選ばずに、ログインを済ませられますか?

問題あり 修正できますか?

ログイン

[email protected] としてログイン中

バスが写っている画像をすべて選んでください

上から読むと、スクリーンリーダーの読み上げ:

  1. [email protected] としてログイン中
  2. バスが写っている画像をすべて選んでください、グループ
  3. 画像1、チェックボックス、チェックなし
  4. 画像2、チェックボックス、チェックなし
  5. 画像3、チェックボックス、チェックなし
  6. …画像9まで同じように続く
  7. 次へ、ボタン

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

画像を選ばずにログインを終えられるようにする

修正前

バスの写った画像をすべて選ぶ

<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ステップ
  1. 画像とその問いを外します。見分けるものも、思い出すものも残りません。
  2. フォームの送信先を変えます。サーバーは口座のメールアドレスにリンクを送り、そのリンクでログインが済みます(達成方法G218)。
  3. ボタンには、押すと何が起きるかを表す「Email me a sign-in link」という名前を付けます。

これで2つの修正前の例が直り、3.3.9を満たします。メールを開き、期限が切れる前にリンクを開く必要があるため、次の画面で、リンクをどこに送ったか、いつまで使えるかを伝えてください。

04

修正の確認

3項目、マウス不要

確認方法: スクリーンリーダー、キーボード

3件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ログイン、そのボット対策、2段階目の方法を変更した際は、再度確認します。

制限

このサンプルは、どのログインでも同じ結果になることを保証するものではありません。3.3.9はレベルAAAで、ほとんどの法律や方針は求めていません。しかし、この基準が守る人は、AAを満たすログインでも画像で締め出されている人です。対象はログインで、アカウントの作成や復旧は含みません。ただし、そこに画像の段階があれば、同じ人が止まります。メールのリンクはメールを確認できる人の、パスキーはパスキーを持つ人の助けにしかならないため、ログインの方法は複数用意してください。ボット対策の確認が疑った訪問者にだけ出るものも含め、利用者が頼る道具でログイン全体を確認してください。

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

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る