代替テキスト (alt text) は、HTML の <img> タグの alt 属性で指定する画像の説明文です。画像が読み込めない場合に代わりに表示され、スクリーンリーダーが読み上げるテキストとしても使用されます。Web の黎明期から存在する仕様ですが、アクセシビリティと SEO の両面で重要性が増しており、現代の Web 開発では欠かせない要素です。

alt テキストはアクセシビリティの観点から必須の要素です。視覚障害のあるユーザーがスクリーンリーダーを使ってページを閲覧する際、alt テキストが画像の内容を伝えます。WCAG (Web Content Accessibility Guidelines) の達成基準 1.1.1「非テキストコンテンツ」(適合レベル A) は、利用者に提示されるすべての非テキストコンテンツに、同等の目的を果たすテキストによる代替を提供することを求めています。純粋な装飾や CAPTCHA など、いくつかの例外も定められています。この基準は WCAG 2.0 から 2.2 まで共通で、2026 年時点の最新の W3C 勧告は 2.2 です。たとえばグラフ画像であれば「2024 年の月別売上推移を示す棒グラフ」のように、画像が伝える情報の本質を記述します。数値そのものが要点であれば、同じ数値を本文か表で提示し、alt テキストは図の役割の説明に絞るという分担も有効です。

SEO の観点では、alt テキストは検索エンジンが画像の内容を理解するための手がかりになります。Google は画像 SEO の解説で alt テキストを画像に関する最も重要なメタデータと位置づけ、alt テキストとコンピュータビジョンによる解析結果、そしてページ本文の内容を組み合わせて画像を把握すると説明しています。画像をリンクにしている場合、alt テキストはそのリンクのアンカーテキストとして扱われます。一方でキーワードを詰め込んだ alt テキストは逆効果です。Google は alt 属性をキーワードで埋める行為 (キーワードスタッフィング) を避けるよう明記し、サイトがスパムと見なされる可能性があるとしています。「子犬」の一語よりも「フェッチで遊ぶダルメシアンの子犬」のように、文脈が伝わる説明が良い例として示されています。

効果的な alt テキストを書く出発点は、「この画像を電話で相手に伝えるなら何と言うか」を考えることです。画像の内容を簡潔かつ正確に説明し、「画像」「写真」といった接頭辞は付けません。スクリーンリーダーは画像であること自体を読み上げるため、二重になるだけです。長さについては「125 文字以内」という数字が広く引用されますが、HTML 仕様にも WCAG にも Google の文書にも文字数の上限は書かれていません。実務では数語から一文、二文で足りることが大半で、それを超えるなら情報量が多すぎるか、本文やキャプション、図の解説ページに書くべき内容が混ざっているサインだと判断します。装飾目的の画像には空の alt 属性 (alt="") を設定し、スクリーンリーダーが読み飛ばせるようにします。alt="" を明示することと alt 属性そのものを書かないことは別物で、前者は「代替テキストは不要」という宣言、後者は何も宣言していない状態です。

実務では画像の役割ごとに書き分けます。情報を伝える画像は要点を記述し、装飾画像は alt="" にします。リンクやボタンになっている画像は、見た目ではなくリンク先や動作を書きます (虫眼鏡アイコンなら「虫眼鏡」ではなく「検索」)。バナーや図中のラベルのように文字が写り込んだ画像は、写っている文字をそのまま書き起こします。同じ内容をすぐ隣の本文が説明している画像は alt="" にして、同じ説明を二度聞かせないようにします。グラフや表の画像のように一文で説明しきれないものは、alt テキストで図の種類と主旨だけを伝え、詳細は本文か隣接する表で提供します。

よくある誤解として、alt テキストと title 属性を混同するケースがあります。title 属性はマウスホバー時のツールチップとして表示されるもので、キーボード操作やタッチ操作では表示されないことも多く、alt テキストの代替にはなりません。また、CSS の背景画像には alt 属性を設定できないため、重要な情報を背景画像だけで伝えることは避けるべきです。画像ファイル名 (IMG_2024.jpg など) をそのまま alt に入れる、全画像に同じ文言を使い回す、CMS が自動で入れた文言を放置する、といったパターンも代替テキストとして機能していません。

文字数カウントの観点では、alt テキストは画面に表示されないため、本文だけを対象にしたカウントには含まれません。一方、検索エンジンは HTML を解析して alt 属性の値も読み取ります。原稿の分量を管理するときは本文の文字数、レビューや納品物の点検では alt テキストを含めた HTML 全体、と目的に応じて数える対象を切り替えると混乱がありません。画像の多いページでは alt テキストだけでまとまった分量になり、1 枚 30 文字の画像が 30 枚あれば約 900 文字に相当します。