imgタグのalt属性が担う3つの役割

HTMLで画像を挿入する <img> タグに alt 属性を書くのは、半ば習慣的に行われています。しかし「なんとなく書いている」「空っぽにしている」というケースも少なくありません。実は alt 属性には、Webの品質を左右する重要な役割が三つあります。

alt属性とは何か

alt 属性は、<img> タグに付与できるテキスト情報です。"alt" は "alternative"（代替）の略で、画像が何らかの理由で伝わらないときに、代わりとなる情報を提供することが本来の目的です。

<img src="logo.png" alt="Genuine Design ロゴ">

視覚に障害のある方がWebを閲覧する際は、スクリーンリーダーという支援技術が使われています。スクリーンリーダーは画面上のテキストを音声に変換しますが、画像そのものを「見る」ことはできません。そこでスクリーンリーダーが読み上げるのが alt 属性のテキストです。

たとえば、商品の写真に alt="赤いスニーカー、サイズ27cm" と書かれていれば、視覚を持たないユーザーにも商品内容が正確に伝わります。逆に alt="" や alt なしにしてしまうと、その画像が存在するかどうかすら伝わらない場合があります。

書き方の基本原則は「画像が見えない人に、その画像が何かわかる文章を書く」です。装飾のみを目的とした画像（区切り線・背景パターンなど）は alt="" と明示することで、スクリーンリーダーに無視させるのが正しい対応です。

通信環境の不安定、画像ファイルのパス間違い、サーバーエラーなど、さまざまな原因で画像が表示されないことがあります。そのときブラウザは、画像の代わりに alt 属性のテキストを表示します。

何も書かれていなければ「壊れた画像アイコン」だけが残り、ユーザーはそこに何があったのかわかりません。適切な alt テキストがあれば、画像が表示されなくても文脈を失わずに情報を受け取ることができます。

検索エンジンのクローラーはテキストを読むことができますが、画像の内容を直接把握することはできません。alt 属性は、クローラーが画像の内容を理解するための重要な手がかりになります。

適切なキーワードを含んだ alt テキストは、画像検索での表示順位の向上やページ全体の評価に貢献します。ただし、キーワードを不自然に詰め込む「キーワードスタッフィング」はペナルティ対象となるため注意が必要です。あくまで自然な説明文として書くことが最善策です。

alt属性の重要性は、Googleも公式ドキュメントで明確に述べています。Google検索セントラル「Google 画像検索について」には、次のように記載されています。

「代替テキストは、スクリーンリーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。」

— Google検索セントラル「Google 画像検索について」

Googleはアクセシビリティと検索品質の両面から、すべての意味のある画像に対してalt属性の記述を推奨しています。これは任意のベストプラクティスではなく、Webの品質基準として事実上の必須項目と位置づけられています。

同ドキュメントでは、キーワードの乱用についても明確に禁止しています。

「alt 属性にキーワードを羅列すること（キーワードの乱用とも呼ばれます）は避けてください。ユーザーエクスペリエンスが低下するだけでなく、サイトがスパムとみなされる要因となる場合もあります。」

— Google検索セントラル「Google 画像検索について」

たとえば、ロゴ画像に対して alt="Webデザイン大阪格安おすすめロゴ制作会社" のように無関係なキーワードを詰め込む行為は、Googleのスパムポリシー違反となります。検索順位の低下やインデックス削除につながるリスクがあるため、絶対に避けてください。

正しいalt属性は「画像の内容を正確に説明する自然な文章」です。SEOを意識するなら、キーワードを増やすのではなく、画像の内容とページのテーマが一致した誠実な記述を心がけることが、長期的な評価向上につながります。

alt 属性はコードの細部ですが、その影響は決して小さくありません。スクリーンリーダー利用者への配慮、通信障害時のユーザー体験の維持、そして検索エンジンからの正確な評価——この三つが揃って初めて、Webサイトは「伝わる」ものになります。

HTMLを書くときは、alt 属性を「義務」としてではなく、「画像を届けられないときのために、ユーザーへ書き残すメッセージ」として捉える意識が大切です。