alt属性とtitle属性

IEは、imgにalt属性を入れると、画像にマウスをあてたときaltの内容がポップアップで現れます。しかし、Firefoxではポップアップは現れません。
alt入れ忘れチェックするのに、Firefoxってちょっと不便、なんて思っちゃって、altの代わりにtitle属性も入れれば、Firefoxでも出るからそっちにする?なんていう方向に走りかけているコーダーをよく見かけます…
(って、自分でしたスミマセン)

img要素のalt属性に値を設定しておくと、その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、このような考え方は間違いです。 By.img要素でalt属性の内容がポップアップしない|Web標準普及プロジェクト
あー実行しなくて良かったぁ、そしてごめんなさい、の思いです。勉強しなくちゃ。

title属性の役目

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

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

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

alt属性の本来の役目

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

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

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

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

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

確かに、略語の「abbrタグ」では原形をtitle属性に書くし、リンク集ページなどでは、aタグのtitleに「リンク先の説明」などを書きます。それはポップアップしてユーザーに補助的に伝えたいものなので、理にかなっていますね。

むしろ、imgのaltは、ポップアップする必要なんてないですよね、だって、画像が表示されているならユーザーにはそれがなんの画像か見えているわけで、画像を切った状態で見たときに代替テキストが出てきて初めて役に立つんですから。
altを入れ忘れてないかチェックするのに、画像にいちいち0.5秒ずつマウスをあててチェックするなんて、1個ずつしか進まないから効率悪すぎるし、背景画像でcssメニューとかやってると、画像か背景か紛らわしいし、むしろWeb制作者はみんなFirefoxとWeb Developerは使ってるはずなんだから、そっちでaltチェック機能を使って一覧するのが速いわけですよね。
IEのaltポップアップって、本来の意味を誤解させる余計な機能って気がしてきました。

最後に、制作者として何に気をつけなければならないかは、最後のココ↓を読めば、理解できました。

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

ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと。 例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、alt="赤い丸"などとするのは、不適当である。 こうした状況では、代替テキストは空文字列("")とする必要がある。 何にせよ、著者は、ページの整形に画像を用いることを避けるようにすべきである。 その代わりにスタイルシートを用いる必要がある。
例えば「ダミーのテキスト」などの無意味な代替テキストを指定しないこと。 ユーザが不快なだけでなく、これを音声や点字に変換しなければならないユーザエージェントの処理速度を低下させる。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/73
Listed below are links to weblogs that reference
alt属性とtitle属性 from px*blog