🌄

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

2021/10/23に公開1件

はじめに

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

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

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

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

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

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

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

W3CのWeb Content Accessibility Guidelines (WCAG)で画像にalt属性を使用するよう示されており、特に2016年にJIS X 8341-3が改定された頃から、アクセシビリティの観点で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）で、実際にどのように読み上げられるか試してみました。

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

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

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

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

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

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

alt属性の重要性が改めて理解できました。装飾用の画像に対してalt属性を空にする理由や、読み上げの具体例が示されている点が実践的で役立ちます。今後のWeb制作にぜひ活かしたいと思います！ありがとうございます。