代替テキストがない、情報を伝える画像
セールのバナーは告知の文字を画像に描き込んだまま alt がなく、商品の下のお手入れアイコンはすべて「image」と書かれています。
問題
スクリーンリーダー利用者が、セールや安全上の注意など、画像が伝える情報を受け取れません。
陶器の店のトップページは、窯から出したばかりのマグカップが並ぶバナーで始まります。その上に大きな文字で「窯出しセール：マグカップ全品30%オフ（日曜まで）」と書かれています。その先の、斑点模様のマグカップの商品ページでは、商品名の下に食洗機、電子レンジ、斜線の入ったオーブンの小さなアイコンが3つ並んでいます。スクリーンリーダーはバナーで「kiln-sale.jpg、画像」と読むか、何も読みません。アイコンでは「image、image、image」と読みます。セールの内容、終了日、オーブンに入れてはいけないという注意は、聞いている人に届きません。
バナーは告知の文字をピクセルとして描き込んだ一枚の <img> で、alt 属性がありません。スクリーンリーダーは読み上げるテキストがないため、ファイル名を読むか、画像を飛ばします。お手入れアイコンには alt がありますが、テーマがすべての画像に「image」と入れているため、何かがあることは分かっても、何を伝えているかは分かりません。どちらも、情報が画像の中にしかありません。
スクリーンリーダーを使う全盲の人には、代替テキストに書かれた内容しか伝わりません。画面を拡大して見るロービジョンの人は、画像の中の小さな文字を読めないことがあり、文字の大きさや色も変えられません。通信の遅いモバイル回線、一部のメールソフト、通信量を抑えるために画像をオフにした環境では画像が表示されず、表示されるのは alt だけです。点字ディスプレイの利用者や、読み上げ・翻訳ツールの利用者にも、テキストしか届きません。
axe の image-alt のような自動チェックは、alt がまったくない <img> を確実に検出します。ただし、ある alt が役に立つかは判断できません。alt="image"、alt="IMG_2041"、alt="バナー" は合格になり、画像の中の文字が alt に含まれているかも確かめられません。AIによる手早い修正では、伝える内容ではなく見た目（「木の棚に並んだ青いマグカップ」）を書くことが多く、30%オフも日曜までという期限も抜け落ちます。警告を消すためにすべての画像を alt="" にすることもあり、そうすると情報は完全に隠れます。その画像がなぜそこにあるかを知る人にしか、適切な代替テキストは書けません。
試してみる
画像をオフにして、何が残るか見てください。
下の欄に、スクリーンリーダーの読み上げが出ます。セールの内容と終了日、お手入れの注意は分かりますか？
斑点模様のマグカップ
スクリーンリーダーの読み上げ：
- kiln-sale.jpg、画像
- 斑点模様のマグカップ、見出し
- image、画像
- image、画像
- image、画像
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
情報を伝える画像に代替テキストを用意します。alt に書くか、alt="" にした画像の隣に実際のテキストとして置きます。
- 1すべての img に alt を付ける。内容を書くか、隣のテキストが同じ内容を伝えていれば空にする。
- 2画像が何かではなく、ここで何を伝えるかを書く。ファイル名、「image」「アイコン」は使わない。
- 3画像の中の言葉は alt に書くか、画像から出して実際のテキストにする。
<section class="banner"> <img src="/images/kiln-sale.jpg"></section> <h1>斑点模様のマグカップ</h1><div class="care"> <img src="/icons/dishwasher.png" alt="image"> <img src="/icons/microwave.png" alt="image"> <img src="/icons/no-oven.png" alt="image"></div>バナーには alt がないため、画像が伝える告知に対応するテキストがありません。アイコンには alt がありますが、「image」ではお手入れについて何も伝わらず、「オーブン不可」の注意が失われます。
変えるのは alt 属性だけです。バナーの alt には画像に描かれた言葉をそのまま書き、各アイコンの alt にはこのマグカップにとっての意味を書きます。スクリーンリーダーは「窯出しセール：マグカップ全品30%オフ（日曜まで）、画像」「食洗機可、画像」と読み、画像が読み込めないときも同じ言葉が表示されます。写真に写ったマグカップではなく告知の内容を書くのは、それがこの画像を置いている理由だからです。
どちらの方法でも、すべての情報に同じ意味のテキストがあり、1.1.1を満たします。alt を書く方法は変更が最も小さく、属性一つで済み、レイアウトやデザインの作業もいりません。デザインツールで作ったバナーや、構造を変えられないテーマに向いています。実際のテキストにする方法はテンプレートの変更が必要ですが、1.4.5（文字画像）も満たし、文字の拡大や翻訳にも対応でき、アイコンの意味を知らない見える人にも役立ちます。新しく作るものや、毎週入れ替わるバナーにはこちらを選びます。今週のバナーには alt を書き、商品テンプレートのお手入れアイコンにはラベルを付ける、というように組み合わせても構いません。
何を書くか。 その画像がこのページになぜあるのかを考え、それを書きます。同じマグカップの写真でも、商品ギャラリーでは「斑点模様のマグカップ、正面」が必要で、「斑点模様のマグカップ」という見出しの隣なら alt="" で構いません。スクリーンリーダーが「画像」と読むため、「〜の画像」「〜の写真」とは書きません。1〜2文に収め、句点で終えると読み上げに区切りが入ります。
alt がないことと、空の alt は違う。 alt がないと、スクリーンリーダーはファイル名を読むことがよくあります。alt="" は画像を飛ばす指示で、画像がテキストにない情報を何も加えていないときだけ正しい書き方です。情報を伝える画像を alt="" にして、警告を消してはいけません。
リンクの中の画像。 画像だけでできたリンクでは、alt にリンク先も分かる言葉（「窯出しセール：マグカップ全品30%オフ」）を書きます。詳しくはリンクテキストのガイドを参照してください。
背景画像。 CSSの background-image で表示した画像には alt がなく、支援技術からは見えません。そこで伝えていることは、すべてページ上のテキストにも書きます。alt を書かずに済ませるために、情報を伝える画像をCSSに移してはいけません。
グラフ、地図、図。 短い alt にグラフ全体は入りません。何を示す図で、何が主に分かるかを短い alt に書き、詳しいデータは表や figcaption など、近くのテキストに置きます。
編集できるコンテンツ。 CMSやストアのテーマでは、バナー画像とその alt が別の項目になっていて、alt は任意項目か、ファイル名が入ることがよくあります。新しい画像では alt を必須にして画像の隣に表示し、テーマがファイル名や「image」のような言葉を代わりに出力しないようにします。バナーを差し替えたら、alt も一緒に書き換えます。
title と aria-label。 title 属性は、マウスを重ねたときにしか表示されず、読まないスクリーンリーダーもあるため、代替テキストとしては頼れません。<img> には alt を使います。インラインのSVGアイコンについては、SVGアイコンのガイドを参照してください。
修正の確認
マウスを使わない4つの確認
確認方法： スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。バナー、アイコンのセット、共通の画像コンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。コード内のパスとクラス名は仮のものです。alt が適切かどうかは画像と文脈によって決まり、その両方を知る人にしか判断できないため、公開前の確認に代替テキストを含めてください。実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。