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

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

概要

alt属性（オルトぞくせい）とは、画像の代わりになるテキスト情報のことを指します。何らかの理由で画像が表示できない、閲覧できない場合にその代替としてテキストが利用されます。

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

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

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

例えばイルカの画像があったとします（下画像）。

例えばこの画像が通信環境が悪いなどの理由でダウンロードできなかった場合、alt属性が指定されていれば代わりにそのテキストを表示します（下画像）。

皆さんもこんな表示を一度は見たことがあるのではないでしょうか。

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

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

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

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

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

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

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

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

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

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

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

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

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

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