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

alt テキストはアクセシビリティの観点から必須の要素です。視覚障害のあるユーザーがスクリーンリーダーを使ってページを閲覧する際、alt テキストが画像の内容を伝えます。WCAG (Web Content Accessibility Guidelines) 2.1 の達成基準 1.1.1 では、すべての非テキストコンテンツにテキストによる代替を提供することが求められています。たとえばグラフ画像であれば「2024 年の月別売上推移を示す棒グラフ」のように、画像が伝える情報の本質を記述します。Web アクセシビリティ入門の書籍で alt テキストの重要性を学べます。

SEO の観点では、alt テキストは検索エンジンが画像の内容を理解するための重要なシグナルです。Google 画像検索のランキングにも影響し、適切なキーワードを含む alt テキストは画像検索からのトラフィック獲得に貢献します。実際に、EC サイトの商品画像に具体的な alt テキスト (「赤いレザーのトートバッグ A4 サイズ対応」など) を設定することで、画像検索経由の流入が増加した事例は多く報告されています。

効果的な alt テキストを書くにはいくつかのポイントがあります。まず、画像の内容を簡潔かつ正確に説明し、125 文字以内に収めることが推奨されます。「画像」「写真」といった冗長な接頭辞は不要です。キーワードの詰め込み (キーワードスタッフィング) はペナルティの原因になるため避けましょう。装飾目的の画像には空の alt 属性 (alt="") を設定し、スクリーンリーダーが読み飛ばせるようにします。SEO 画像最適化の書籍で alt テキストの最適化手法が解説されています。

よくある誤解として、alt テキストと title 属性を混同するケースがあります。title 属性はマウスホバー時のツールチップとして表示されるもので、alt テキストの代替にはなりません。また、CSS の背景画像には alt 属性を設定できないため、重要な情報を背景画像だけで伝えることは避けるべきです。

文字数カウントの観点では、alt テキストの長さはページ全体のテキスト量に影響します。画面には表示されないものの、検索エンジンはインデックス対象として扱うため、ページの総文字数を把握する際には alt テキストも考慮に入れることが望ましいでしょう。