<img>要素(埋め込み画像) - HTML5 リファレンス

alt 属性の好ましい値。

alt 属性値はあくまでも画像の代わりになるテキストでなければなりません

よくプロのウェブデザイナが作成したサイトでも、画像の説明文を alt 属性値にしている例がありますが、それは適切ではありません。

例えば、ある企業のサイトのトップページの一番初めの見出しとして、以下のように書いているとします。

<h1><img alt="会社のロゴ" src="Logo.GIF" width="240" height="40" /></h1>

これでは画像が認識出来ない場合に、会社のロゴと言うテキストで認識されてしまいます。

正しいのは以下のように企業名そのものでしょう。

<h1><img alt="○○株式会社" src="Logo.GIF" width="240" height="40" /></h1>

また、なくても情報としては困らない写真については、以下のようにマークアップしていたとします。

<figure>
    <img alt="堀北真希の写真" src="HORIKITA_Maki.JPG" width="240" height="320" />
    </figure>

これも、文章の途中にこんなのが入ると、いきなり脈絡なく堀北真希の写真と言うテキストが出てくる事になり、閲覧者を混乱させる恐れがあります。

このような場合には、空文字列の代替テキストを与えると良いでしょう。

<figure>
    <img alt="" src="HORIKITA_Maki.JPG" width="240" height="320" />
    </figure>

とにかく、代替テキストと言うのは、画像が見られない場合に代わりとなる情報を与えるためのものですので、画像が表示出来ない場合を考えて定めるべきでしょう。

  • 一番いい方法は、Lynx などのテキストブラウザでテキストを確認する事です。把握出来る内容が画像が見える状態と同じであれば、問題はないでしょう。