imgタグの「alt」属性の役割

「alt」は「代替テキスト」を意味します。決して「画像の説明」をするためのものではありません。

「説明ではない」ということの意味は、「alt="ホームページ作成ヒント集"」とすべきであって、「alt="ホームページ作成ヒント集のロゴ"」などとすべきではないということです。

「ホームページ作成ヒント集のタイトル画像」には次のように、「<h1>タグ」と「alt="ホームページ作成ヒント集"属性」が付いています。

　<h1><img src="../Fimg/hinthp.gif" alt="ホームページ作成ヒント集"></h1>

↑この画像が存在していれば、「Internet Explorer 6/7」であっても「Firefox」であっても同じように表示されます。

ところが、画像が見つからない、もしくは画像を表示させない設定である場合、「Internet Explorer 6/7」では、

↑ IEの表示

このような表示になります。しかし、W3Cの標準からするとこれは正しい表示ではありません。

↑ Firefoxの表示

この「Firefox」の表示が、W3Cの標準に準拠した表示です。

もし、代替テキストが「ホームページ作成ヒント集のロゴ」となっていると、「Internet Explorer 6/7」では次のように表示されます。

↑ IEの表示

このように表示されるので、適当なように思えてしまいます。

しかし、「Firefox」では次のように表示されます。

↑ Firefoxの表示

このように表示されるため、大見出しの意味が変ってしまいます。

---

追記 2010.10.1

次の例は、指定した画像が存在しない場合です。ブラウザによって、どのように表示されるか確認してみてください。

Safariは「alt」属性に対応していないようです。Chromeは対応不完全なようです。