読み取った先へのリンクがないQRコード

陶器の店で注文を終えると、「ご注文ありがとうございます。注文番号1042を承りました。」と表示されます。その下には店の公式アプリの案内があり、アプリでは配送状況を確認でき、初回のご注文は10%オフになると書かれています。アプリへ進む方法はQRコードだけで、上に「スマートフォンのカメラでQRコードを読み取ってください。」とあります。パソコンで見ていて画面が見える人なら、スマートフォンをかざせばアプリのページが開きます。けれども注文する人の多くは最初からスマートフォンを使っていて、同じ案内がそこにも表示されます。つまり、読み取りに使うはずのカメラと同じ端末の画面に、コードが映っているのです。タップしても何も起きません。スクリーンリーダーの利用者は、どちらの端末でもそこまでスワイプして「QRコード、画像」と聞くだけで、どこにつながるかは分かりません。

QRコードは、アドレスを画像にしたものです。達成基準1.1.1「非テキストコンテンツ」は、情報を伝える画像に、同じ情報を伝えるテキストの代替を求めています。ここで伝えるべき情報はアドレスか、少なくともその行き先ですが、alt には「QRコード」としか書かれていません。聞いている人には、コードがあることは分かっても、その中身は分かりません。ブラウザーも、コードが何を持つかを伝えはしません。ページにとってコードはほかの画像と同じで、スクリーンリーダーが伝えられるのは alt だけです。

しかも、ページのどこにもそのアドレスへのリンクがなく、たどり着く方法はコードしかありません。alt が不十分なだけでなく、行き止まりになってしまうのはこのためです。コードの横にリンクがあれば、画像の alt が空でも、アドレスはリンクの文字として伝わります。スマートフォンで画面を見ている人がタップできるリンクを求める達成基準はありませんが、1.1.1を満たすためのリンクが、その人の問題も解決します。

スマートフォンでは、障害の有無にかかわらず、ほとんどの人が先へ進めません。多くの人が手元に持っているカメラは1台だけで、コードはそのカメラの付いた画面に映っているからです。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーは「QRコード、画像」と読むだけで、コードがどこにつながるかは伝わりません。目の見えない人は、どこにあるか分からないコードにカメラを向けられません。自分のスマートフォンの画面に映ったコードなら、なおさらです。
• 筋力や可動域が限られる 手のふるえや握力の弱さがあると、片方の端末をもう片方の上でじっと構えるのは難しく、車いすのマウントに固定したスマートフォンではまったくできません。
• 手の操作が限られる パソコンでは、キーボードや音声操作の利用者には押せるものがありません。コードはただの画像で、リンクではないからです。
• 視覚が限られる 画面を拡大して見る人は、その四角がQRコードだと気づかないことがあり、別の画面の小さなコードにカメラを合わせるのも、はっきり見えなければ難しくなります。

axeの image-alt は、画像に alt があるかを確かめます。alt="QRコード" も合格です。ブラウザーでQRコードを描くスクリプトとして広く使われているqrcodejsは、描いた画像に alt="Scan me!" を付けますが、この alt も合格になります。canvas に描いたコードには、確かめる alt がそもそもありません。axeは、画像を読み取ってどのアドレスを持つかを調べることも、そのアドレスへのリンクを探すこともしません。

この診断ツールは、alt、ファイル名、class、idからQRコードを見つけます。alt が「QRコード」や「Scan me!」以上のことを伝えず、リンクの中になく、同じまとまりにリンクが表示されていないコードは報告します。見つけたほかのコードは、横や周りのリンクがコードと同じページを開くかを確かめるために、人が確認する項目として渡します。QRコードだと示す名前がどこにもなければ、ほかの四角い画像と区別できず、コードを読み取ることもできません。

AIによる手早い修正では、alt を「アプリをダウンロードするためのQRコード」に書き換えることがあります。聞いている人にコードの用途は伝わりますが、そこへ行く手段がないことは変わりません。