実際のテキストの代わりに使われた文字画像

衣料品のショップがリネンシャツを販売しています。商品写真の下にある1枚の画像に、サイズガイド（S、M、Lの胸囲、着丈、袖丈をcmで）と、赤い文字の「15時までのご注文は当日発送します。」が描かれています。デザイナーが幅640ピクセル、文字の大きさ16ピクセルで作ったもので、パソコンでは問題なく読めます。スマートフォンでは、ショップでよく使われる img { max-width: 100%; } によって画像が画面の幅、約330ピクセルまで縮み、文字も約8ピクセルになります。Mの胸囲を知るには、ピンチ操作で拡大し、ぼやけた表を左右に動かして探す必要があります。端末の「文字を大きく」の設定をオンにすると、商品名と価格は大きくなりますが、サイズ表は変わりません。ダークモードではページが暗くなり、サイズ表だけが明るいパネルのまま残ります。ページ内検索では「M」が見つからず、ページを翻訳してもサイズ表は日本語のままです。

サイズ表とお知らせは、ピクセルとしてしか存在しません。alt がすべての数値を繰り返しているため、スクリーンリーダーは読み上げ、1.1.1（非テキストコンテンツ）は満たしています。しかし1.4.5（文字画像）が求めるのは別のことです。技術的に文字をテキストで表示できるなら、テキストにする必要があります。HTMLの表と段落なら、デザインに必要な色、罫線、フォントを付けて、このサイズ表とお知らせを表示できます。画像はロゴではなく、言葉と数値が画像のすべてで、写真や図の中のラベルでもないため、例外にも当たりません。パソコンでページ全体を拡大すると画像も大きくなるため、1.4.4（テキストのサイズ変更）は満たせることがあります。問題は、読み手が変えるそれ以外の設定が、文字にまったく届かないことです。

買い物客の多くはスマートフォンで閲覧し、そこでは誰にとってもサイズ表が縮みます。そのため、この問題は売上にも響きます。自分のサイズが読めない客は、違うサイズを注文するか、買わずに去ります。ブラウザーの翻訳でショップを読む人には、サイズ表がまったく読めません。

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

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

• 視覚が限られる スマートフォンでは、画像と一緒にサイズ表の文字が縮み、弱視の人の多くが読める大きさを下回ります。ピンチ操作で拡大しても、表を左右に動かしながら見る文字はぼやけます。「文字を大きく」の設定、ダークモード、自分で選んだ配色も、サイズ表には反映されません。
• 言語・認知・学習の能力が限られる ディスレクシアがあり、読みやすいフォントや広い文字間隔に切り替える人や、テキストを強調しながら読み上げるツールを使う人には、サイズ表だけが変わりません。数値を選択してコピーすることもできません。

自動チェックは alt がないことを探しますが、この画像には丁寧な alt があるため、axe などのツールは合格にします。ピクセルは読めないため、表の画像と写真を区別できません。光学文字認識（OCR）は画像の中の文字を見つけられますが、時間がかかるため、たいていは大きな画像の一部にしか使われません。また英語専用のOCRでは、日本語の文字は何も読み取れません。この診断では、画像レビューを有効にしたときに大きな画像をOCRにかけます。OCRを使わなくても、表やお知らせのように読める alt（長く、数字をいくつも含む）を持つ画像と、見える内容が横長の画像だけの見出し、メニューのリンク、ボタンを、人が確認する候補として挙げます。AIによる手早い修正は、問題ではない alt を書き直しがちです。