【徹底解説】imgタグのalt属性はほぼ絶対に指定した方が良い

こんにちは。今回はimgタグのalt属性の適切な指定方法とその効果について解説していきます。

概要

alt属性は「画像が何を表しているか」をテキスト形式で説明するためのものです。

例えば次の画像には「水面から顔を出す2頭のイルカ」というようなaltテキストを付けるのが適切でしょう。

alt属性には、主に以下の3点の効果があります。

それぞれについて詳しく見ていきます。

まず第一に、画像が何らかの理由で読み込めず閲覧できなかった場合の代替としての役割を持ちます（下画像）。

画像が表示できなかった場合、上記のようにalt属性が指定されていれば代わりにそのテキストを表示します。

文章やコンテンツにおいて、「その画像が見れないと意味が通りにくくなってしまう」ような場合は特にalt属性の文章が重要です。例えば記事コンテンツに参考画像をおいていた場合、それがないと前後の文章がわかりにくくなってしまいます。

視覚障害を持つなどの理由でスクリーンリーダーを使っている人にとっても、alt属性は非常に重要な情報になります。もし画像にalt属性が指定されていなければ、スクリーンリーダーに無視されてしまいます。つまりユーザーからすると存在しないのと同じになります。

そうなると、スクリーンリーダーの利用者からすればそのコンテンツは情報が不十分になってしまいます。

Webページは誰にとっても等しく情報を提供すべきですから、なるべく差が出ないようにしたいところです。

SEO上の効果もあります。Googleのクローラーは基本的にテキストデータしか解釈できません。画像の中身をそのまま理解することができないのです。

よってalt属性でその画像の説明を加えてあげることでクローラーにそのコンテンツがより適切に伝わります。

逆にいうと、alt属性がなければその画像はクローラーから見ても存在しないのと同じになってしまいます。もしそのせいで前後の文章のつながりが著しく崩れてしまったら、ページの品質が悪いと評価され検索順位を落とすリスクになります。

さて、ここまでalt属性を書くべき理由を述べてきました。一方で必ずしも全ての画像に指定する必要はありません。

装飾的な画像で、コンテンツ内容あるいはページの機能に直接は関わっていない画像であればalt属性は空のままでもOKです。

ただし、もっと言えば装飾的な画像はなるべくimgタグではなくbackground-imageや::beforeや::afterによる擬似要素など、CSSから実装した方が望ましいです。装飾的であるということはコンテンツの一部ではないため、マークアップに含めない方が厳密には適切と言えるからです。

とはいえそこまで完璧にしないといけないわけではないかなと思います。

というわけでalt属性についてでした。ちょっとした画像の説明を書くだけですが、意外と重要な効果を秘めていますね。それほど労力のかかるものでもないですから、ぜひ意識してみましょう。

alt属性以外にもimgタグに必要な属性はいくつかあります。それらについては次の記事をご覧ください。

また、こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください！