alt属性とは何か

alt属性(代替テキスト)とは、<img> タグに記述する画像の説明文です。スクリーンリーダーを使う視覚障がい者が画像の内容を音声で知るために使われる他、画像の読み込みに失敗したときの代替表示、そしてGoogleの画像検索・ページ評価にも活用されます。

<!-- 基本的な記述例 -->
<img src="kobe-office.jpg" alt="神戸市中央区にあるコベソフトのオフィス外観">

HTMLの仕様上、<img> タグにはalt属性を必ず記述することが求められています。空のまま(alt="")にすることも有効な記述ですが、その意味は「この画像は装飾目的であり、情報として不要」というスクリーンリーダーへの明示的な指示です。単純に省略することとは異なります。

良いaltと悪いaltの違い

alt属性の書き方比較 ✗ 避けるべき書き方 ✓ 推奨される書き方 alt=""(省略・空のまま) → スクリーンリーダーがファイル名を読む alt="神戸港のイメージ写真" → 画像の内容を簡潔に説明する alt="image001.jpg" → ファイル名をそのままコピー alt="代表取締役 山田太郎のプロフィール写真" → 誰の写真かを明記する alt="写真 会社 神戸 オフィス 外観" → キーワードの羅列(スパム扱い) alt="三宮駅から徒歩3分のコベソフト本社ビル" → 文脈に沿った自然な説明

altテキストを書く際の基本ルールは「画像が表す情報を、目の見えない人に口頭で説明するとしたら何と言うか」を考えることです。「写真」「画像」という言葉を冒頭に入れる必要はありません(スクリーンリーダーが自動で「画像」と読み上げるため二重になります)。

装飾目的の画像の扱い

背景パターン、区切り線の画像、意味のない飾り用アイコンなど、情報を持たない装飾画像は alt="" と記述します。これによりスクリーンリーダーはその画像を無視し、コンテンツの流れを妨げません。

<!-- 装飾画像は空のaltを明示する -->
<img src="divider-pattern.png" alt="">

<!-- CSSで背景画像として使う方法も有効 -->
<!-- background-image: url(divider.png); -->

ロゴ画像は企業・ブランド名をaltに入れ、リンクにしている場合は「コベソフト ホームページトップへ」のようにリンク先も含めた説明にします。

SEOとの関係

Googleは画像を直接「見る」のではなく、alt属性やファイル名・周囲のテキストから画像の内容を推測します。適切なaltテキストは画像検索での表示機会を増やし、ページ全体のコンテンツ評価にも貢献します。

ただし、SEOを意識するあまりキーワードを詰め込みすぎると逆効果です。自然な日本語でユーザー(とスクリーンリーダー)にとってわかりやすい説明を心がけることが、SEO・アクセシビリティ両面での最適解です。

まとめ

alt属性の記述は画像1枚あたり数秒の作業ですが、視覚障がい者のサイト利用体験を大きく左右します。また、コンテンツの品質向上としてSEUにも直接効果があります。新規コンテンツを作成する際に習慣として記述するだけで、アクセシビリティとSEOを同時に改善できる最も手軽な対策の一つです。