【HTML】altタグの書き方について

どうも、くまだです。

今さらという気もしますが、altタグの書き方について。

altタグとは

altタグは、ブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するためのタグです。

altタグに書いたテキストは、スクリーンリーダーでの読み上げ時に代替テキストとして読み上げされるようになります。書き方は以下の通りです。

<img src="画像のパス" alt="代替テキスト">

検索エンジンのクローラー向けに画像に対してaltタグを書いたほうがいいということがあります（SEO的に直接の影響はないが、書いたほうがいいとされている）。

altタグの値は全部書いたほうがいい、という意見もありますが、必ずしも全てにaltタグの値を書く必要がない場合があります。

altタグの値を空の状態にしたほうがいいケースとしては、

装飾的な画像は、装飾目的のための画像なので、その画像自体がなくてもコンテンツやテキストの意味を伝えることができる場合は、altタグは空でもよさそうです。

<img src="images/icon.png" alt="">

altタグの値を空の状態にすると、読み上げ時はそのaltタグはスキップされます（読み上げされない）。

なお、altタグ自体を書かない場合、ファイル名が読み上げられてしまうのでaltタグの記述は省略しないほうがいいです。

<img src="画像のパス">　<!-- ファイル名が読み上げられる-->

altタグの値を書いたほうがいい場合は、例えば、

テキストが画像化されているものは、例えばロゴ画像があります。その場合altタグには、画像の中の文字と同等の内容を入れます。なので、altタグに「ロゴ」みたいなのは画像と内容が異なるのでそれはNGです。

<!-- OK -->
<img src="images/logo.png" alt="株式会社○○">

<!-- NG -->
<img src="images/logo.png" alt="ロゴ">

写真やイラストの場合、その情報がコンテンツを理解する上で重要な情報の場合、その内容をaltタグにいれる必要があります。（その写真や画像がないとテキストやコンテンツが成り立たない場合はaltタグに代替テキストを入れる）

代替テキストになにをいれるべきか迷ったら、その代替テキストが本文といっしょに読み上げられたとき意味が通じるかどうかで判断します。

ここまで読んでくださりありがとうございました。