思いつきで語る

画像のalt属性はマウスを乗せたときに、ポップアップで補足説明するためのものではない。

要素でalt属性の内容がポップアップしない

次のようなサイトをよく目にされるかと思います。

リンクページでバナーをずらずら貼ってあります。そして、サイトについての記載は何もなく、「バナーにマウスをのせると、ポップアップで詳しい説明が表示されます」と説明されています

マウスをのせると、そのサイトの管理人さんの名前やサイトのジャンルなどがポップアップで表示されるというのです。ところが、こういった説明のあるサイトのほとんどは、藍晶の環境ではポップアップされません。「なんだ、Macってそんなことにも対応できていないんだ」と思われるのは早計です。Macだからというのではなくて、実はIE以外のブラウザ（Firefox、Opera等）は、Win環境でもポップアップされません。

では、どういった仕組みでポップアップされているのかというと、imgタグのalt属性にあるテキストがポップアップされます。

この場合、「alt=」以下の「管理人さんは、●○さん。とてもすてきなイラストサイトです」という説明がポップアップでマウスをのせるとIEであれば表示されます。

では、このalt属性は、マウスを画像にのせたときにテキストをポップアップさせるためのものなのかというと、それは違います。本来、alt属性は代替テキストを書かれるところなのです。代替テキストというのは、画像表示のできない、Lynxのようなテキストブラウザや音声ブラウザで閲覧するときに、画像にある情報を正しく伝えるためのものなのです。よく、説明文が画像だったりすることがあります。確かに、画像対応のブラウザでしたら、情報は伝わりますが、音声ブラウザでは画像で書かれた情報は一切伝わらないということになります。本来、閲覧環境に左右されずに情報伝達できるはずのHTMLなのですから、これはとてもまずいことなのです。ということで、何の画像であるのかを正しく伝えるためのテキストを書くところであり、ポップアップするためのものではありません。

ところが、何のつもりかIEではこのalt属性のテキストをポップアップにて表示してしまうのです。本来の目的からいえば、これはおかしい。大多数のシェアを持っている多数派というだけで、こういった間違った解釈での表示がまかり通ってしまっているだけなのです。さらに、初心者向けタグ講座では平気で「alt=の後に、ポップアップしたい文字をいれます」なんて説明があったりしますので、多くの人が誤解していても無理はないでしょう。

では、補足説明を組み入れたい場合はどうすればいいのか、という疑問があるかと思います。もちろん、方法はあります。title属性です。これならば、IE以外のブラウザでも、「title="説明"」の「""」内に書かれたテキストが補足説明としてポップアップされます。先ほどの例で説明しますが、次のようにするのが正解です。

または、

ただ、後者の場合、IEでは、画像のalt属性が優先してポップアップされてしまう問題がありますので、前者が無難でしょう。

あ、それとtitle属性は補足であって、やはりポップアップさせるタグというわけではありませんので誤解無きよう。各ブラウザが補足説明を表現するのにポップアップを選んでいるだけのことですので、今後別の表現も出てくるかもしれません。

また、title属性はいろいろなタグに使えます。たとえば、強調のstrongに効かせるとこうなります。

alt属性はポップアップのために使用してはだめですよ！（←マウスを置いてみてください）