代替文字は代替以外の用途にも使われる
ウェブページ上に画像を掲載する場合は、何らかの事情で画像が読み込まれなかった場合のために、「代替文字」を記述しておけるようになっています。例えば以下のように記述します。
<img src="ファイル名" width="幅" height="高さ" alt="代替文字">
この「代替文字」の用途は、画像が表示されなかった場合に、画像の代わりとして表示させるものです。
しかし、Internet Explorerでは、画像が表示されている状態でも、マウスポインタを画像の上に載せると、ツールチップで代替文字が表示されます。
上記のような写真の場合は、代替文字がツールチップで表示されても、特に問題にはならないでしょう。
※むしろ便利だと思われるかもしれません。 しかし、代替文字がツールチップに表示されるのはIE独自の機能です。 多くの環境で同様に見せたい場合は、最初から(キャプションなどとして)文字を表示させておくか、もしくは後述のtitle要素を使う方が良いでしょう。
ツールチップを煩く感じる場合もある
以下のような画像の場合はどうでしょうか。この画像は、「ニュース News」と描かれたタイポグラフィーです。
上記の画像は、以下のようなHTMLソースで表示させたものです。 代替文字(alt属性の値)に「ニュース」という文字列を指定しています。
<img src="news.gif" width="200" height="78" alt="ニュース">
このソースをIEで表示させ、マウスを載せると下図のように見えます。
画像化された「ニュース(News)」という文字の上に、さらに「ニュース」という代替文字がツールチップで表示されています。 このような表示は、少々煩く感じてしまわないでしょうか。
だからといって、代替文字を省略してはダメ
代替文字(alt属性に記述した文字列)は、画像が表示されなかった場合に、画像の代わりに表示される文字列です。 ですから、省略せずに記述しておく必要があります。
※デザイン目的だけで掲載している画像など、特別な意味のない画像であれば、省略(=属性値をカラに)しても問題ありません。
しかし、画像が問題なく表示されている状態では、代替文字がツールチップで表示されると、煩く感じてしまうこともあります。
代替文字をツールチップに表示させなくする
そこで、代替文字を指定していても、ツールチップには表示されなくする記述方法を使ってみましょう。 詳しい記述方法は次のページで。