ばけらの HTML リファレンス(未完成)

必ず何か書かなくてならない?

HTML4 以降、alt属性は必須となっています。alt属性を指定しないことは許されません。

これをもって、alt属性には必ずなにか説明を書かなくてはならないとするガイドラインがあるようですが、実は alt属性の値は空文字列でも構いません。つまり、alt="" という指定ができるということです。イメージ画像やワンポイントの飾りなど、代替テキストが無用な画像もあるでしょう。そのような画像には alt="" を指定します。

なお、昔は alt="" の指定を alt属性がないものと同様に扱ってしまうような読み上げ環境が存在したため、alt="　" のように、全角スペースを指定することを推奨するガイドラインもありました。最近では実装側が改善されているようで、そのようなガイドラインは見かけなくなりました。

画像の説明?

よく、alt属性を「画像の説明」としている説明を見かけます。確かに、alt属性には画像の説明が書かれる場合もありますが、それは alt属性の本質ではありません。逆に、画像の説明を書いてはならない場合もあります。

サイトの各ページにイメージ画像を挿入することはよくあります。たとえば、企業サイトに「企業情報」というページがあり、そこにオフィスで女性が働いているイメージの画像が挿入されているケースを考えてみましょう。この画像の alt属性に、画像の「説明」として、「オフィスで女性が働いているところ」というテキストがつけられていたらどうなるでしょうか。読み上げ環境ではそのテキストをそのまま読み上げます。「企業情報」のページで「オフィスで女性が働いているところ」と言われたら……いらぬ誤解を招きそうです。

このようなイメージ画像に関しては、alt="" として代替テキストを取ってしまうのが良いでしょう。

他に良くあるのが、会社のロゴタイプに「○○会社のロゴ」というような alt属性がついているケースです。これも「説明」のつもりなのでしょうが、単に「○○会社」とするべきでしょう。

なお、本当に説明を付記したい場合は、title属性を使用することができます。

マウスオーバーで表示される?

alt属性の値は画像にマウスポインタを重ねると表示される、というような説明がなされていることがあります。確かに、いくつかのブラウザはそのような実装をしています。しかしそれは、いくつかの実装がたまたまそのような実装をしているに過ぎず、alt属性の本来の用途ではありません。

実際、最近の Mozilla では、画像にマウスポインタを重ねても alt属性の値が表示されることはありません。