# 読み取った先へのリンクがないQRコード
Source: https://easeweb.dev/learn/qr-codes
Topics: 画像とメディア > QRコードに、読み取った先へのリンクが添えてある (WCAG 1.1.1)
The fix: コードの横に同じページへのリンクを置き、スマートフォンの利用者がタップできるものを用意したうえで、コードはパソコンで見ている人のために残します。または、コードをそのリンクで囲み、行き先を伝える代替テキストを付けます。後者も1.1.1は満たしますが、スマートフォンで画面を見ている人には、読み取るためのコードしか見えないままです。
Test with: screen reader, touch, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html https://www.w3.org/WAI/tutorials/images/functional/ https://www.section508.gov/blog/accessibility-bytes/qr-codes/ https://tetralogical.com/blog/2022/08/08/accessibility-and-qr-codes/ https://kb.daisy.org/publishing/docs/html/images-qr.html
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
陶器の店で注文を終えると、「ご注文ありがとうございます。注文番号1042を承りました。」と表示されます。その下には店の公式アプリの案内があり、アプリでは配送状況を確認でき、初回のご注文は10%オフになると書かれています。アプリへ進む方法はQRコードだけで、上に「スマートフォンのカメラでQRコードを読み取ってください。」とあります。パソコンで見ていて画面が見える人なら、スマートフォンをかざせばアプリのページが開きます。けれども注文する人の多くは最初からスマートフォンを使っていて、同じ案内がそこにも表示されます。つまり、読み取りに使うはずのカメラと同じ端末の画面に、コードが映っているのです。タップしても何も起きません。スクリーンリーダーの利用者は、どちらの端末でもそこまでスワイプして「QRコード、画像」と聞くだけで、どこにつながるかは分かりません。
## 確認できる問題
QRコードは、アドレスを画像にしたものです。達成基準1.1.1「非テキストコンテンツ」は、情報を伝える画像に、同じ情報を伝えるテキストの代替を求めています。ここで伝えるべき情報はアドレスか、少なくともその行き先ですが、alt には「QRコード」としか書かれていません。聞いている人には、コードがあることは分かっても、その中身は分かりません。ブラウザーも、コードが何を持つかを伝えはしません。ページにとってコードはほかの画像と同じで、スクリーンリーダーが伝えられるのは alt だけです。
しかも、ページのどこにもそのアドレスへのリンクがなく、たどり着く方法はコードしかありません。alt が不十分なだけでなく、行き止まりになってしまうのはこのためです。コードの横にリンクがあれば、画像の alt が空でも、アドレスはリンクの文字として伝わります。スマートフォンで画面を見ている人がタップできるリンクを求める達成基準はありませんが、1.1.1を満たすためのリンクが、その人の問題も解決します。
## 利用者への影響
スマートフォンでは、障害の有無にかかわらず、ほとんどの人が先へ進めません。多くの人が手元に持っているカメラは1台だけで、コードはそのカメラの付いた画面に映っているからです。
## 自動チェックとAIの限界
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コード」に書き換えることがあります。聞いている人にコードの用途は伝わりますが、そこへ行く手段がないことは変わりません。
## 修正前：アプリへ進む方法がQRコードだけ
```html
公式アプリ
アプリでは注文の配送状況を確認でき、初回のご注文は10%オフになります。
スマートフォンのカメラでQRコードを読み取ってください。
```
- alt が「QRコード」だけのため、コードが持つアドレスに対応するテキストがありません。
- そのアドレスへのリンクがページのどこにもなく、たどり着く方法はコードしかありません。
- 同じ案内がスマートフォンにも表示され、コードは読み取りに使うカメラの付いた画面に映っています。
## 修正後：コードの横にリンクを置く
```html
公式アプリ
アプリでは注文の配送状況を確認でき、初回のご注文は10%オフになります。
アプリをダウンロード
パソコンでご覧の場合は、スマートフォンのカメラでQRコードを読み取ってください。
```
1. コードが持つアドレスへのリンクを、何が開くかが分かる言葉で加えます。スマートフォンではこのリンクをタップすればよく、パソコンではその場でページが開きます。キーボード、音声操作、スクリーンリーダーの利用者もたどれます。
2. コードを `alt=""` にします。行き先はリンクが伝えているため、スクリーンリーダーが同じことを2回読まずに済みます。
3. コードとその説明は、パソコンで見ていてスマートフォンでページを開きたい人のために残し、そのためのコードだと書き添えます。
これで修正前の問題は解決し、1.1.1を満たします。アドレスはリンクの文字として伝わり、どの端末からでも誰でもたどれます。
## 修正後：コード自体をリンクにする
```html
公式アプリ
アプリでは注文の配送状況を確認でき、初回のご注文は10%オフになります。
スマートフォンのカメラでQRコードを読み取ってください。
```
1. コードを、コードが持つアドレスへのリンクで囲みます。コードをタップしてもクリックしても、ページが開くようになります。
2. `alt="QRコード"` を、リンクの働きである「アプリをダウンロード」に書き換えます。リンクの中身が画像だけなので、alt がリンクの名前になり、スクリーンリーダーはこのリンクを「アプリをダウンロード」と読み上げます。
レイアウトを変えずに1.1.1を満たし、スクリーンリーダー、キーボード、音声操作の利用者もコードからページを開けるようになります。ただし、これだけでは足りません。ページは今も読み取るよう案内していて、コードをタップできることを示すものは画面にないため、スマートフォンで画面を見ている人は、たまたま試さない限り元のままです。
## どの方法を選ぶか
コードの横にリンクを置く方法を選びます。コードをリンクで囲む方法も1.1.1を満たし、変更も小さく済みますが、スマートフォンで画面を見ている人には、読み取るよう言われたコードが残るだけで、タップできることは伝わりません。この案内がいちばん多く表示されるのは、その人たちです。横にリンクを置けば、リンクを1つ足すだけで誰にでも届き、パソコンで見ている人にはコードもそのまま使えます。
## 実装の判断
リンクとコードは、同じページを開く必要があります。何か月も前に生成サービスから書き出した画像の横にアドレスを貼るのではなく、テンプレートの中で1つの値から両方を作ります。生成サービスのコードは、読み取り回数を数えるために独自の短縮アドレスを持つことがよくあります。リンクにも同じアドレスか、同じページに着くアドレスを使い、数を分けて知りたいならパラメーターで区別します。
サイトではなく外部のサービスが発行するコードには、同じサービスが発行するリンクも用意されています。LINE公式アカウントの友だち追加用QRコードには、友だち追加ガイドで作れる友だち追加用のURLやボタンがあり、決済サービスのコードには支払い用のリンクがあります。そのリンクやボタンをコードの横に置きます。
コードの alt に何を書くかは、資料によって考え方が異なります。このガイドでは、どれか一つに決めません。
- W3Cの[リンクになった画像のチュートリアル](https://www.w3.org/WAI/tutorials/images/functional/)は、リンクの画像の alt に「アプリをダウンロード」のようなリンクの働きを書くとしています。[装飾画像のチュートリアル](https://www.w3.org/WAI/tutorials/images/decorative/)は、同じことを伝えるテキストが横にある画像を `alt=""` にするとしています。
- [DAISYのナレッジベース](https://kb.daisy.org/publishing/docs/html/images-qr.html)は、同じ行き先へのリンクを横に置いたうえで、QRコードであることがはっきり分かる alt を求めています。
- [Section508.gov](https://www.section508.gov/blog/accessibility-bytes/qr-codes/)は、「QR code linking to the product accessibility page」（製品のアクセシビリティのページへのQRコード）のように、両方を伝える alt を例に挙げています。
どれも、コードの行き先を伝えていれば1.1.1を満たします。「QRコード」だけでは足りません。
ブラウザーで描くコードには、alt を自分で設定する必要があります。qrcodejsは描いた画像に `alt="Scan me!"` を書き、`canvas` に描いたコードにはテキストがまったくありません。横のリンクが行き先を伝えているなら、画像には `alt=""` を、canvasには `aria-hidden="true"` を付けて、描いたコードを隠します。コード自体がリンクなら、リンクに行き先を伝える `aria-label` を付けます。
リンクを置いたうえでなら、狭い画面でコードを隠しても構いません。隠すのはコードで、リンクではありません。また、ユーザーエージェントから端末を推測するのではなく、幅で決めます。タブレットやタッチ画面のノートパソコンは、どちらにもなり得るからです。
ほかの人の機械に読み取らせるコードは、事情が違います。チケット、搭乗券、受け取り用のコードは、持っている本人が開くものではなく、ゲートやレジの読み取り機に見せるものです。その alt には「注文番号1042のチケットのコード」のように何のコードかを書き、読み取り機が使えないときに係員が入力できるよう、コードの番号をテキストで横に表示します。2台目の端末と連携させるログインや2段階認証の設定用のコードは、このガイドと同じ問題です。認証アプリを開くリンクと、コピーできる設定キーのテキストを用意します。
## 修正の確認
1. サイトにあるすべてのQRコードを探します。テンプレートとCMSのブロックを「qr」で検索し、注文完了ページ、フッター、アプリの案内、ログインや設定のページも見ます。それぞれに、横か周りに同じページへのリンクがあることを確かめます。
2. iOSのVoiceOverやTalkBackなど、スマートフォンのスクリーンリーダーで、各コードかそのリンクまでスワイプします。行き先が分かる言葉が読み上げられ、ダブルタップでそのページが開くことを確かめます。
3. スマートフォンの幅か実際のスマートフォンでページを開き、リンクが表示され、タップするとページが開くことを確かめます。コード自体がリンクの場合は、画面を見ている人がタップすればよいと気づくかを考え、気づかないなら見えるリンクを加えます。
4. パソコンで、画面上の各コードをスマートフォンで読み取り、リンクと同じページが開くことを確かめます。
OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。キャンペーン、アプリストアのアドレス、コードの生成方法が変わったときは、もう一度確認してください。
## 制限
これは出発点となる実装例で、すべてのアプリケーションでの動作を保証するものではありません。コード例のアドレスは仮のものです。このガイドは、Webページの上でリンクの代わりになっているQRコードを扱います。情報を伝える画像全般については[代替テキストがない、情報を伝える画像](/ja/learn/informative-images)を、コードの横の画像に描き込まれた言葉については[実際のテキストの代わりに使われた文字画像](/ja/learn/images-of-text)を参照してください。紙、パッケージ、看板に印刷したコードにも、同じ理由で横にアドレスを印刷する必要がありますが、Webページで解決できる範囲の外です。対象の支援技術で、一連の操作全体をテストしてください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）