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

HTML/CSSを学ぶ
スポンサーリンク

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

概要

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

参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

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

水面から顔を出す2頭のイルカ

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

  • 画像の読み込み失敗時の代替
  • アクセシビリティを高める
  • SEO効果

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

alt属性の役割、効果

画像の読み込み失敗時の代替

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

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

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

アクセシビリティを高める

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

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

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

SEO効果

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

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

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

alt属性を書くべき場面と書かなくても良い場面

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

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

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

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

まとめ

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

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

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

教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α
フリーランスのフロントエンドエンジニアとして6年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました。 今回はHTML/CSSに関することに絞っています。特に教材にはあまり載っていなかったり、知らない

コメント

タイトルとURLをコピーしました