代替テキスト（Alt Text）

代替テキスト（Alt Text）とは?

Alt Textは、ウェブページ上の画像に付ける文字による説明。 画像が見えない人、画像が読み込めない場合、検索エンジンなどに対して、「この画像が何であるか」を言葉で伝えます。

なぜ必要か？ウェブを見る人すべてが、目で画像を認識できるわけではありません。視覚障害者はスクリーンリーダーという音声読み上げ技術を使いますが、画像の中身はテキストでない限り、スクリーンリーダーには「画像」と認識されるだけで、内容がわかりません。Alt Textがあれば、スクリーンリーダーがそれを読み上げることで、視覚障害者も同じ情報を得られます。

また、検索エンジン（Google、Bingなど）も画像の内容を理解するのにAlt Textを参照します。「コーヒー」というキーワードで検索した人に対して、Alt Textが「朝のコーヒー」ならば、その画像が検索結果に表示されやすくなります。

ひとことで言うと： 「見えない人にも、検索エンジンにも、画像の中身を伝える説明文」です。

ポイントまとめ：

何をするものか： 画像の内容を文字で説明する
なぜ必要か： アクセシビリティ、SEO、ユーザー体験の向上
誰が対象か： 視覚障害者、低速インターネット利用者、検索エンジン

なぜ重要か

ウェブアクセシビリティは法的義務です。米国の障害者法（ADA）、EU一般データ保護規則（GDPR）、日本の公共ウェブアクセシビリティ基準など、多くの国・地域で「すべてのユーザーが平等にアクセスできる」ことが求められます。Alt Textはこの要件を満たす最小限の対策です。

加えて、SEO効果も大きい。Googleなど検索エンジンは画像を直接「見る」ことができないため、Alt Textを頼りに画像の内容を判断します。戦略的にAlt Textにキーワードを含めれば、検索順位が向上し、オーガニックトラフィックが増加します。

さらに、画像の読み込みが遅い、または失敗した場合、Alt Textが画像の代わりに表示されるため、ユーザーは意味のある情報を失わずに済みます。このように、アクセシビリティ、SEO、ユーザー体験の3つを同時に改善できる施策です。

仕組みをわかりやすく解説

Alt Textは、HTMLの<img>タグ内に記述されます。例えば：

<img src="coffee.jpg" alt="モダンなカフェで朝のコーヒーを飲む">

スクリーンリーダーがこの画像に遭遇すると、「モダンなカフェで朝のコーヒーを飲む」と音声で読み上げます。それにより視覚障害者も、画像の内容が何かを理解できます。

良いAlt Textには3つの要素があります。

簡潔さ — 50～125文字が目安。スクリーンリーダーは短い説明の方が理解しやすい
文脈 — 周囲のテキストに既出の内容は繰り返さない。重複は避ける
正確性 — 推測や感情を入れず、客観的に事実だけを述べる

例えば、「子供がコーヒーを飲んでいる画像」の場合：

悪い例：「写真」（情報が足りない）
悪い例：「子供が楽しそうにコーヒーを飲んでいる素敵な写真」（感情が入っている）
良い例：「テーブルでマグカップを持つ子供」（簡潔で、事実のみ）

実際の活用シーン

eコマース（製品画像） 靴のオンラインストア。「紺色の革製ビジネスシューズ、サイズ26cm」というAlt Textがあれば、画像が見えない人も、また検索エンジンも、その靴の基本情報を理解できます。

ニュースサイト（記事挿絵） 政治記者者会見の写真に「国会会議室で演壇に立つ政治家」とAlt Textを付ければ、視覚障害読者も状況を把握でき、検索エンジンも記事のトピックをより正確に理解します。

ソーシャルメディア投稿 InstagramやTwitterで「友人と誕生日ケーキの前で微笑む2人」というAlt Textを付けることで、視覚障害者もコンテンツを楽しめます。多くのプラットフォームが今、Alt Text機能を標準装備しています。

メリットと注意点

メリット： 全員がウェブを平等に利用できるようになります。SEO効果で検索トラフィックが増加します。画像読み込み失敗時のユーザー体験向上。コスト無料で実装可能。

注意点： 品質にばらつきが生じやすい。複数の執筆者がいる場合、各自の判断でAlt Textの詳細さが異なります。また「過度にキーワード詰め込む」とスパムと見なされ、SEO効果が逆になる危険があります。大規模サイトでは管理が煩雑になります。

よくある質問

Q: 装飾的な画像（デザイン用）にもAlt Textが必要ですか? A: 必要ですが、空白にします。装飾だけの画像なら、alt=""とすることで、スクリーンリーダーはそれを無視します。無理に説明を加えるとノイズになります。

Q: Alt TextにSEOキーワードを詰め込んでもいいですか? A: いけません。これは「キーワードスタッフィング」として検索エンジンから罰せられます。Alt Textは「説明」であり、SEOは「副作用」です。優先順位を誤るべきではありません。

Q: 複雑なグラフや図表のAlt Textは、何文字まで許されますか? A: 複雑な図表なら、数文では足りず、段落以上の説明が必要なことがあります。その場合、簡潔なAlt Text + 本文中や別ページでの詳細説明、という階層化した対応が推奨されます。

参考文献

World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.1. 2024.
WebAIM. Alternative Text for Images. WebAIM, 2024.
Nielsen Norman Group. Alt Text for Images: Guidelines and Best Practices. NN/g Research.
Google Search Central. Image Best Practices for SEO. Google Developers.
Section 508 Guidelines. U.S. General Services Administration.

代替テキスト（Alt Text）