Zenn
🌄

画像のalt属性とアクセシビリティ

2021/10/23に公開
HTML
SEO
a11y
アクセシビリティ
alt
tech

はじめに

「altは空（alt=""）でもいい場合があるよ」と伝えたくて、まとめました。

alt属性とは

画像の代替テキストを指定するための属性です。

<img src="images/cat.jpg" alt="猫の写真">

alt属性は次のような場合に役に立ちます。

代替テキストの表示

通信エラーや画像のリンク切れなどの原因で、ブラウザが画像を表示できない場合に、alt属性があれば、代替テキストが表示されます。

SEO

alt属性があれば、検索エンジンに適切な画像内容を伝えることができます。

アクセシビリティ

alt属性はスクリーンリーダーで読み上げられます。
そのため画像を視覚的に理解できないユーザーでも、画像の内容を理解することができます。

W3CのWeb Content Accessibility Guidelines (WCAG)で画像にalt属性を使用するよう示されており、特に2016年にJIS X 8341-3が改定された頃から、アクセシビリティの観点でaltを書くべきという動きが増えました。

alt属性には何を書けば良いか

alt属性に入れる内容は、画像の内容によって異なります。

画像化された文字の場合

ロゴや見出し画像など、主に文字で構成される画像の場合は、
画像の中にある文字と同等の内容を入れます。

// ⭕ Good
<img src="images/logo_sample.png" alt="Sample株式会社">

// ❌ Bad
<img src="images/logo_sample.png" alt="ロゴ画像">

また、文字を本当に画像化するべきかも検討しましょう。
HTMLのテキストならば、ユーザーが自分の読みやすいように、文字の拡大や色の変更をできます。

写真やイラストの場合

写真やイラストで伝えている情報がページのコンテンツを理解する上で重要な情報であれば、その伝えたい情報を記述します。

<img src="images/cat.jpg" alt="絨毯でくつろぐ茶トラ白猫の写真">

装飾用の画像や、画像の情報がページのテキストでも伝えられている場合

  • 雰囲気の演出やアイキャッチなど、装飾のための画像の場合
  • 画像の情報がページのテキストでも伝えられている場合

このような場合は、altは空（alt=""）にします。
「alt属性を入れない」のではなく、「空のaltを明記する」のがポイントです。

<img src="images/icon.png" alt="">

またこのような場合は、img要素を使わずに、CSSの背景画像で入れるのも良いです。

スクリーンリーダーでどのように読み上げられるか

altに指定した内容が、スクリーンリーダー（iOSのVoiceOver）で、実際にどのように読み上げられるか試してみました。

alt属性がない場合

「（画像のファイル名） + image」と読み上げられます。
ファイル名だけでは画像の内容が分かりづらいため、不親切です。

// 「cat.jpg image」
<img src="images/cat.jpg">

alt属性がある場合

「（altの中身） + image」と読み上げられます。
これなら画像を視覚的に理解できなくても、画像の内容を理解することができます。

// 「猫の写真 image」
<img src="images/cat.jpg" alt="猫の写真">

alt属性があり、空の場合

読み飛ばされます。
画像の説明が入ると冗長になる場合には、読み飛ばされる方が便利です。

// 何も読まれない
<img src="images/cat.jpg" alt="">

まとめ

  • alt属性は必ず指定する
  • ただし、altの中身は空で良い場合も結構ある
  • 画像化しなくて良いものは出来る限りHTMLのテキストにする

参考

Discussion