こんにちは。今回はimgタグのalt属性の適切な指定方法とその効果について解説していきます。
imgタグをもっと理解できる本を発売中です！
各属性の仕様、使い方などの基本に加え、サイズの決まり方やおすすめのCSSなど実践で使えるテクも紹介！
ぜひお買い求めください！
概要
alt属性（オルトぞくせい）とは、画像の代わりになるテキスト情報のことを指します。何らかの理由で画像が表示できない、閲覧できない場合にその代替としてテキストが利用されます。
次のように記述して使います。
<img src="画像へのパス" alt="代替テキスト" />alt属性には、主に以下の3点の効果があります。
- 画像の読み込み失敗時の代替
- 視覚障がいがある方に対してアクセシビリティを高める
- SEO効果
それぞれについて詳しく見ていきます。
alt属性の役割、効果
画像の読み込み失敗時の代替
まず第一に、画像が何らかの理由で読み込めず閲覧できなかった場合の代替としての役割を持ちます。
例えばイルカの画像があったとします（下画像）。
例えばこの画像が通信環境が悪いなどの理由でダウンロードできなかった場合、alt属性が指定されていれば代わりにそのテキストを表示します（下画像）。
皆さんもこんな表示を一度は見たことがあるのではないでしょうか。
文章やコンテンツにおいて、「その画像が見れないと意味が通りにくくなってしまう」ような場合は特にalt属性の文章が重要です。例えば記事コンテンツに参考画像をおいていた場合、それがないと前後の文章がわかりにくくなってしまいます。
視覚障がいがある方に対してアクセシビリティを高める
視覚障害を持つなどの理由でスクリーンリーダーを使っている人にとっても、alt属性は非常に重要な情報になります。もし画像にalt属性が指定されていなければ、スクリーンリーダーに無視されてしまいます。つまりユーザーからすると存在しないのと同じになります。
そうなると、スクリーンリーダーの利用者からすればそのコンテンツは情報が不十分になってしまいます。
Webページは誰にとっても等しく情報を提供すべきですから、なるべく差が出ないようにしたいところです。
SEO効果
SEO上の効果もあります。Googleのクローラーは基本的にテキストデータしか解釈できません。画像の中身をそのまま理解することができないのです。近年はGoogleもGeminiというAIを開発し運用していますが、それでも完璧に画像を理解することはできていません。
よってalt属性でその画像の説明を加えてあげましょう。クローラーにそのコンテンツがより適切に伝わります。
逆にいうと、alt属性がなければその画像はクローラーから見ても存在しないのと同じになってしまいます。もしそのせいで前後の文章のつながりが著しく崩れてしまったら、ページの品質が悪いと評価され検索順位を落とすリスクになります。
より適切にalt属性を書くためのポイント
重要な役割を持つalt属性ですが、大前提として「すべての画像をそのalt属性のテキストに置き換えても、ページの意味は変わらない」ように書く必要があります。画像の代わりを担う文章ですから、当然と言えば当然です。
これはwhatwgによるHTMLのガイドラインにも明記されています。→ https://html.spec.whatwg.org/multipage/images.html#general-guidelines
観点としては、
- その画像が伝えようとしていることを文章にする
- 文脈を考える
のが重要です。
例えば文章中に猫の画像があったとします。
ただ単にalt属性を「猫」とするのではなく、その猫の画像が何を伝えるために配置されているのかを考えて文章にするとより良いです。「窓辺でくつろぐ猫」かもしれないし、「窓の外の獲物を見つめる猫」かもしれません。
また、画像がリンクとして使われている場合には画像の説明以上にリンク先のページについて説明することを優先しましょう。例えば、サイトのヘッダーにロゴが置かれていてトップページへのリンクになっているケースってよくありますよね。この場合のロゴ画像のaltは「会社のロゴ」とするより「ホームページ」とする方が良いということになります。
しかし画像の説明を無視すると意味が分かりにくい場合はうまく両方組み合わせて表現するのが理想です。
さらに、スクリーンリーダーにおいては基本的に画像部分は画像であることがわかるように読み上げられます。MacOSでの標準読み上げ機能「VoiceOver」では画像を「alt属性の文章、イメージ」と読み上げます。
次のコードなら「伸びをする猫、イメージ」と読んでくれます。
<img src="cat.png" alt="伸びをする猫" />したがってalt属性には「伸びをする猫の写真」とは書かなくて良いという意見が多いですね。とはいえツールによって違いがあったり、前後の文章によってはそれでも分かりにくい場合があるので都度考えるのが良いでしょう。
alt属性を書くべき場面と書かなくても良い場面
さて、ここまでalt属性を書くべき理由を述べてきました。一方で必ずしも全ての画像に指定する必要はありません。
装飾的な画像で、コンテンツ内容あるいはページの機能に直接は関わっていない画像であればalt属性は空のままでもOKです。
ただし、もっと言えば装飾的な画像はなるべくimgタグではなくbackground-imageや::beforeや::afterによる擬似要素など、CSSから実装した方が望ましいです。装飾的であるということはコンテンツの一部ではないため、マークアップに含めない方が厳密には適切と言えるからです。
とはいえそこまで完璧にしないといけないわけではないかなと思います。
まとめ
というわけでalt属性についてでした。ちょっとした画像の説明を書くだけですが、意外と重要な効果を秘めていますね。それほど労力のかかるものでもないですから、ぜひ意識してみましょう。
alt属性以外にもimgタグに必要な属性はいくつかあります。それらを完全に解説し、よりimgタグを理解して使いこなすための本を発売中です！ぜひお買い求めください！
参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
コメント