alt属性とは何か
alt属性(代替テキスト)とは、<img> タグに記述する画像の説明文です。スクリーンリーダーを使う視覚障がい者が画像の内容を音声で知るために使われる他、画像の読み込みに失敗したときの代替表示、そしてGoogleの画像検索・ページ評価にも活用されます。
<!-- 基本的な記述例 -->
<img src="kobe-office.jpg" alt="神戸市中央区にあるコベソフトのオフィス外観">
HTMLの仕様上、<img> タグにはalt属性を必ず記述することが求められています。空のまま(alt="")にすることも有効な記述ですが、その意味は「この画像は装飾目的であり、情報として不要」というスクリーンリーダーへの明示的な指示です。単純に省略することとは異なります。
良いaltと悪いaltの違い
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を同時に改善できる最も手軽な対策の一つです。