メールで届いた認証コードを、認証画面で選択する流れを再現したデモです。スクリーンリーダーで操作する人にとって、どのような違いがあるか確認できます。タブは左右矢印キー、Home/End キーでも切り替えられます。
以下のうち2つの画像を認証画面で選択してください。
（その他の選択肢：とり、さかな）
有効期限：2分
このメール自体はテキストで読めます。問題は、認証画面の画像ボタンに代替テキストがあるかどうかです。
メールの内容を確認したら、折りたたんでから認証画面を開いてください。
メールに届いた画像1と画像2を順番に選んでください。
スクリーンリーダー利用者には、4つのボタンが「ボタン」としか読み上げられます。どれが「ねこ」「いぬ」なのかわからず、2つ選ぶことも困難です。
メールに届いた画像1と画像2を順番に選んでください。または、下のテキストでも認証できます。
またはテキストで入力：
テキスト入力の代替手段はありますが、画像ボタン自体に代替テキストがないため、画像を選ぶ経路は依然として利用できません。2要素認証なのに CAPTCHA 風の UI を混在させる設計上の混同です。
メールに届いた画像1と画像2を順番に選んでください。
ボタンには aria-label で「ねこ」「いぬ」などの accessible name が付いています。画像は装飾的なので alt は空にし、可視テキストと重複して読まれないようにしています。