back

小さな小さな HTML Tips - <image> with "alt"

あなたが使っている Web ブラウザは何ですか ?

Microsoft IE ? Netscape Navigator 4.x ? Netscape 6.x ?

それとも、 Mozilla ?

いずれにしろ、これらのブラウザはインラインイメージ(平たく言えば"画像")に対応しています。

ですが、ご存知でしょうか。WWW がはじまった頃はイメージ対応のブラウザはなかったのです。はじめて画像描画に対応したブラウザ、 NCSA Mosaic の開発者は「Mosaic が WWW を変える」と言ったそうですが、現在はまさにその通りになっています。ですが、いまだ(あるいは今だからこそ)テキストブラウザの需要は結構あるものなのです。

インラインイメージ対応ブラウザが標準となってから、世界の多くのウェブサイトは"いかに綺麗に見せるか"を主眼に置いた構成になっていきました。単に "BACK" と書いてリンクを張ればいいだけのものを、わざわざ画像を使って表示させるのも、常識のようになっています。

ですが、本当にそれは必要なのでしょうか ?

文字ですむものを表示するために、何故わざわざ貴重な回線スピードを犠牲にしなければならないのでしょうか。テキストブラウザがいまだ使われる背景には、そんな声があるように思えます。

前置きが長くなりましたが、そのテキストブラウザが画像を読み込む タグに遭遇した時に"代替に"読み込むのが <img> タグの alt 属性です。 alt は alternative の略で、画像が何らかの理由で読み込まれなかった場合に表示するテキストをブラウザに指示します。

書式は以下の通りです。

<img src="ex.jpg" width="*" height="*" alt="alternative">

間違えないで欲しいのは、 alt は画像の"説明"ではなく"代替"であるということです。

画像をポイントすると alt で指示されたテキストをポップアップするブラウザが多かったせいか、どう考えても代替でないテキスト(リンクバナーにそのサイトの説明があったり等)が記述されているサイトをたまに見かけますが、あれは明らかな間違いです。注意して下さい。

また、 alt は画像が見つからない場合の代替としても表示されます。「テキストブラウザなんて知らねぇな」なんて方も、そう言わずに alt を書いてみる気になるでしょうか。