alt属性 (Alt Attribute / 代替テキスト)

alt属性（オルト属性）とは、HTMLの<img>タグ（画像を表示するためのタグ）の中に記述される属性の一つで、その画像の内容を説明する「代替テキスト（Alternative Text）」を指定するものです。正式には「alt」という属性名ですが、「altタグ」や「altテキスト」と呼ばれることも一般的です。記述形式は <img src=”画像ファイルのURL” alt=”ここに画像の説明文を記述”> のようになります。

alt属性は、主に以下の3つの重要な役割を果たしており、ウェブアクセシビリティとSEOの両面で設定が推奨されています。

1. 画像が表示されない場合の代替情報: 何らかの理由で画像が表示されなかった場合（例: ユーザーの通信速度が遅い、画像ファイルのパスが間違っている、ユーザーが意図的に画像表示をオフにしているなど）、alt属性に指定されたテキストが画像の代わりに表示されます。これにより、ユーザーは画像が見えなくても、そこに何があるはずだったのかを理解することができます。
2. スクリーンリーダーによる読み上げ: スクリーンリーダー（画面読み上げソフト）は、視覚に障碍のあるユーザーがウェブコンテンツを理解するために使用するツールです。スクリーンリーダーは画像そのものを「見る」ことはできませんが、alt属性に設定されたテキストを読み上げることで、画像の内容をユーザーに伝えることができます。適切なalt属性の設定は、ウェブアクセシビリティ（誰もが情報にアクセスしやすくすること）を確保する上で不可欠です。
3. 検索エンジンへの画像内容の伝達: 検索エンジンのクローラーは、人間のように画像を見てその内容を完全に理解することはまだ困難です。alt属性に記述されたテキストは、検索エンジンがその画像が「何についての画像なのか」を理解するための重要な手がかりとなります。これにより、画像検索結果での上位表示に繋がりやすくなるだけでなく、ページ全体のコンテンツの文脈理解も助け、通常のウェブ検索におけるページの評価にも間接的に良い影響を与える可能性があります。

効果的なalt属性を記述するためのポイントは以下の通りです。

• 具体的かつ簡潔に: 画像の内容を正確に、そして分かりやすく具体的に記述します。ただし、長文にならないよう簡潔にまとめることが重要です。（目安として100文字以内程度）
• キーワードの自然な含有: 画像の内容と関連性が高く、かつページのテーマとも関連するキーワードがあれば、不自然にならない範囲で含めるとSEO効果が期待できます。ただし、キーワードを詰め込みすぎるとスパムとみなされる可能性があるため避けるべきです。（例: 「白い犬」ではなく「公園でボールを追いかける白い柴犬」のように具体的に）
• 文脈を考慮する: 画像が使われている前後の文脈を踏まえて、その画像が果たしている役割を伝えるような記述を心がけます。
• 装飾目的の画像には空のalt属性を: ページの装飾のためだけに使われている画像など、特に意味を持たない画像については、alt属性の値を空（alt=””）にします。これにより、スクリーンリーダーはその画像を無視し、不要な情報を読み上げるのを防ぎます。alt属性自体を省略するのは避けるべきです。

alt属性は、サイトを訪れるすべてのユーザーと検索エンジンにとって有益な情報を提供する重要な要素です。画像最適化の一環として、すべての意味のある画像に適切に設定することが推奨されます。