履歴もしくは日誌

あぶりだし / img 要素の alt 属性

Winodws の Internet Explorer などの WWW ブラウザで，画像の上にマウスカーソルを持って行った時に img 要素の alt 属性に文字列を入れておけば，その文字列が表示されるという機能について．吉田さんの蒼風 10 月 2 日付けで話題にしていました：

確かに写真の上にカーソルを持っていくと出てくる文字はあぶり出しのような感じかもですね。

引用終わり．

微妙に時間差があるから，あぶりだしっていう表現は，あっていそうな感じでおもしろいですね．で，どうやって HTML を書いているかについて，突っ込み：

<img align="right" src="image/20031001_morning.jpg" 
 alt="朝家の窓から見た風景" 
 width="160" height="120">

こりゃだめでしょう．alt 属性は，画像の代替なんです．画像を表示しない環境とか，音声読み上げの環境では，画像が表示されるかわりに alt 属性に設定した文字列が表示されたり読み上げられたりします．だから，alt 属性に書いてある文字列は，まわりの文章と続けて読み上げたときに，自然につながらないと駄目ですよ．

ならどうするべきか．これは簡単．以下のようにしてみてはどうでしょう．

<img align="right" src="image/20031001_morning.jpg" 
 alt="" title="朝家の窓から見た風景" 
 width="160" height="120">

title 属性に文字列を指定しても，Winodws の Internet Explorer では，同じように"あぶり出し"つまり文字が吹き出しの用にホップアップされるはずです．alt 属性は，img 要素の必須属性なので，削ってしまうと HTML4 でも XHTML でも文法エラーです．だから alt="" とします．こうして積極的に画像のかわりに置き換える文字列は無しと指定するのです．

こういう事って，決して難しい事ではないはず．

この alt 属性が画像の置き換えだと分かれば，alt 属性に画像ファイル名を入れてみたり，"タイトルロゴ" なんて入れるのが明確な間違いだというのも理解できますね．

で，吉田さんの蒼風の場合で，もし alt 属性を積極的に使うなら，ぼくならこうするな：

<p>
05:30 起床。
</p>
<img align="right" src="image/20031001_morning.jpg" 
 alt="窓の外はまだ明るくなりきらず、早朝の静かさが残っている。" 
 title="朝家の窓から見た風景" 
 width="160" height="120">
<p>
酔っ払った次の日は怪しく早く目覚めることがあるけど、今日はそれだな。
昨夜お風呂に入らなかったからゆっくり朝風呂に入ろう。
</p>
<p>
朝ごはんは、梅おにぎり二つ、卵とにらのお味噌汁、焼いた塩鮭、キャベツの千切り。
</p>
<p>
<img  src="image/20031001_tukinro.jpg" 
 alt="通勤の途中で公園を通り抜けて会社へ。"
 title="通勤の途中で通り抜ける公園" 
 width="160" height="120">
</p>
<p>
朝一で解析依頼が舞い込んでいるよ…。
</p>

これはちょっと強引かな．でもテキストの部分と alt 属性の文字列を順番に読んで行って，文章としておかしくない状態なら alt 属性がうまく機能しているという事です．この時 title 属性の文字列は無視します．title 属性の文字列は画像の代替ではないからです．
いずれにしても alt="" で，title 属性を使うようにすれば，挿絵的に画像を使う分には問題ないです．

TrackBack