画像のalt属性とtitle属性の使い方

ウェブページの画像にマウスポインタを置くとその画像の説明が表示されることがあります。これは画像のalt属性やtitle属性を使って表示させているからです。しかし、IE(インターネットエクスプローラー)では表示されても、FirefoxやGoogle ChromeやOperaでは表示されないこともあります。

画像のalt属性のポップアップはIEでは有効でも、他のブラウザでは無効です

画像にalt属性が設定してあると、画像の上に マウスポインタ楽天 を置くとその画像の説明がIEでは表示されます。これをツールチップと言っています。しかし、FirefoxやGoogle ChromeやOperaでは表示されません。これは、次のようにIEが特殊な動作をしている為であって、他のブラウザの方が本来の動作だからです。

alt属性の役割(画像img)

元々、alt属性は、画像やフォームやアプレットを表示できない場合に代替テキストとして指定するものです。

代替テキストを指定すると、グラフィックディスプレイ端末がない場合や、フォーム非対応のブラウザの場合や、音声合成装置を使っている場合や、画像を表示しない設定で使っている場合には表示の助けになってとても便利です。

alt属性は本来は代替テキストであって、画像の上にマウスポインタを置いた場合、その画像の説明を表示するもの(ツールチップ)ではありません。

title属性の役割(画像imgやリンクa)

title属性は、その要素に関する助言的な情報を提供します。title属性の値は、表示する端末によって適切に扱われます。視覚系のブラウザでは画像の上にマウスポインタを置くと短いメッセージが表示されます。音声読み上げソフトでは、タイトルの情報を読み上げます。また、リンク(aタグ)にtitle属性を設定するとリンク先情報を知らせることができます。

IEと他のブラウザで同じ動作をさせる方法

IEではalt属性とtitle属性が両方とも有る場合は、title属性の値をポップアップするようになっています。この為、普通はalt属性とtitle属性の両方とも指定しておくと他のブラウザと同じ動作になります。

<img alt="ALTテキスト">
<img title="TITLEテキスト">

しかし、IEでポップアップさせたくない場合は、次のようにtitle=""としておきます。そうすれば他のブラウザと同様な動作をします。

<img alt="ALTテキスト">
<img title="">

画像のalt属性はXHTMLでは必須の属性です

XHTMLの文法では、alt属性は必ず書くことになっています。alt属性を書かない習慣になっている人も多いようですが、alt属性は必ず書く習慣にしましょう。