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

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

img要素のalt属性に値を設定しておくと、その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、このような考え方は間違いです。

alt属性の仕様

img要素のalt属性の説明を仕様書から見てみましょう。次のように書かれています。

alt = text [CS]

この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。代替テキストの言語は、lang属性で指定する。

非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。

この通り、何処にもポップアップすることによって、ユーザに補助的な情報を提供する、とは書かれていません。

title属性の役目

それに対してtitle属性に次のような記述があります。

title = text [CS]

この属性は、当該要素に関する助言的情報を提供する。

文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。例えば、視覚系ブラウザはタイトルを「ツールチップ」 (ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ) として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。

と、仕様書上にもあるように、ツールチップとしてポップアップするべきはtitle属性に指定された内容です。 Mozillaも、そしてOpera6でもalt属性はポップアップせずに、title属性がポップアップするようになっています。

alt属性の本来の役目

ではalt属性は何だったのでしょうか?

それは代替テキストです。 img要素の場合、画像が表示できない時(例えば画像を表示しないテキストブラウザや、音声ブラウザ、そしてネットワーク上のトラブルで正常に画像が読み込めなかった時等)に、その画像の代わりとしてalt属性値がテキストとしてレンダリングされます。

alt属性とtitle属性の使い分け

例えばこのページの上端にあるような「もじら組」と書かれた画像の適切な書式の一例は次のようになります。

<img src="logo.png"
    alt="もじら組"
    title="オープンソースブラウザ、Mozillaの開発支援・ユーザコミュニティもじら組へようこそ">

この例では、画像が表示できなかった場合にはalt属性値の「もじら組」が代わりに表示され、この画像の本来の役割を果たすことができます。それに対して、title属性値はポップアップ等で表示され、ユーザに補助的な情報として、もじら組の紹介文を見せることができます。

Windows版のIEではalt属性とtitle属性が共に存在する場合は、 title属性値をポップアップするようになっていますので、上の例のように両方指定しておくと良いでしょう。

また、title属性は大半の要素に対して使用可能です。そのため、次のようにより便利に使うことができます。

<p title="実例です">
    もし、Mozillaにバグを見つけた場合は、
    <a href="http://www.mozilla.gr.jp/"
     title="もじら組、トップページへ">もじら組</a>の
    <a href="http://bugzilla.mozilla.gr.jp/"
     title="バグ報告はこちらからどうぞ">Bugzilla-jp</a>にそのことを報告すれば、
    より<em title="ホントの話">迅速に修正が行われて</em>、みんながシアワセになれます。
</p>

もし、Mozillaにバグを見つけた場合は、もじら組のBugzilla-jpにそのことを報告すれば、より迅速に修正が行われて、みんながシアワセになれます。

alt属性の記述には注意が必要です

最後に余談ですが、alt属性はimgの場合必ず書かなくてはいけない属性です。もしテキストで表示する意味の無い画像の場合はalt=""とするように仕様書で述べられています。

代替テキストは非常に役立つものであり得るが、取り扱いには注意しなければならない。著者は次の指針を守る必要がある。

ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと。例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、alt="赤い丸"などとするのは、不適当である。こうした状況では、代替テキストは空文字列("")とする必要がある。何にせよ、著者は、ページの整形に画像を用いることを避けるようにすべきである。その代わりにスタイルシートを用いる必要がある。

例えば「ダミーのテキスト」などの無意味な代替テキストを指定しないこと。ユーザが不快なだけでなく、これを音声や点字に変換しなければならないユーザエージェントの処理速度を低下させる。