alt属性 と title属性 の違い

WordPressの画像アップロード時の入力項目と、表示された画像にポップアップするツールチップについて聞かれたので備忘録エントリです。

まずIEを使っていて、”画像にマウスをのせるとalt属性の内容がポップアップする”という状況が考え方のベースになっていると根本的におかしい。それとtitle属性を使うというのが一般的じゃない(気がする?)のも間違いの元かも。

alt属性:代替テキスト
title属性:補足情報
※とりあえずこのエントリではimgに関してです。

alt属性は何らかの原因で画像がレンダリングされない場合(またはそのようなUA)の代替テキストで、title属性はその要素に対する補足説明です。
画像が正常に表示された場合、代替テキストは必要ないのでtitle属性がポップアップするというのが、一般的なブラウザの挙動であって、IEは間違っていると言うよりalt属性もポップアップしてくれるという感じでしょうか(IEはalt、titleの両方が指定してあるとtitleがポップアップします)。

WordPressの場合は、title属性が入力必須(デフォルトでファイル名)になっているので、一般的に画像非表示の環境が少ないし(意図して非表示にしている人は無視していい範囲かな)、テキストブラウザや音声ブラウザに関してはtitle属性で対応できると言う事ではないでしょうか。
知る限りでは、音声ブラウザはIEと同じ挙動をします(altはもちろん読むし、両方書いてあればtitleのみ読む)。

2011年1月31日追記
少し勘違いがあったので追記です。知る限りでは音声ブラウザ~~~と買いましたが、音声ブラウザではなくスクリーンリーダーの事でした。スクリーンリーダーを持っているわけではないので、ハンディキャプのある方から聞いた内容ですが、JAWSはIEと同じ挙動をするようです。PC-Talkerも同じじゃなかと思ってます。

title属性だけでいいじゃんと言う気もするのですが、alt属性はHTMLの仕様上は必須なので書かないとvalidになりませんね。

この使い方はあっているのか?

スクリーンショット(東京都のホームページ)

例えば東京都のホームページの左ナビにあるバナー(「東京・あの日・あの時」)のソースは以下のようになってます。こういう書き方はよく見かけるけど正しいのだろうか?

<a href="リンク先アドレス" title="東京WEB写真館「東京・あの日・あの時」ページへ">
<img src="画像アドレス" alt="東京WEB写真館「東京・あの日・あの時」" width="196" height="50" vspace="3">
</a>

こっちのほうがいいのかな?ん?どうなんだ?

<a href="リンク先アドレス">
<img src="画像アドレス" alt="東京WEB写真館「東京・あの日・あの時」" title="東京WEB写真館「東京・あの日・あの時」ページへ" width="196" height="50" vspace="3">
</a>

Googleの和英辞書検索(英辞郎)はなくなるのか?

Googleには数多くの特殊検索機能がある。

などなど。詳細は公式の特殊な検索機能のページで。

その中に少し前まで和英辞書検索があり、例えば「和英 ひまわり」と検索すると、スペースアルクの英辞郎検索のページにリンクしていた(ひまわりの英辞郎検索結果)。いちいち翻訳サイトに入らなくてもいいし、英辞郎の書き方が解りやすくて好みだったので使っていたが、現在使えないようだ。

和英検索

上の画像の様に和英辞書検索が出来ますよ!と案内だけ残してあるのをみると、何処か他のサービスへ飛ばすつもりだろうか。もしくは自前のGoogle辞書の日本語変換対応が近いとか。

まぁいずれにしても個人的には英辞郎がいいのだけど。。。

thickboxの表示を最前面に固定する

やっと年が明けて2回目のエントリ。やっとヘッダーの門松を取りました。誰も気がついていないかw

thickboxを使っていて、他の部分(cssでpositionを使って制御している部分)との重なりに不都合が出る場合がある。オーバーレイしても一部だけ顔を出す目立ちたがりな奴が出てくる。

それをthickbox以外の部分で、何とかしようと思うとz-indexの認識の違いで何かと面倒なことになる。IE7やIE6やIE7やIE6や・・・。

オーバーレイした時は通常それ以外の箇所を前面に出す必要はないと思うので、常に最前面に出しちゃおうってわけです。

#TB_window,
#TB_overlay{
	z-index:999!important;
}

プロパティ名はthickboxで使われている名前なので、このままcssに追加すればOKです。もちろん上書きされるようにね。
数字(999)は適宜変更して下さい。