Section 7 で画像の挿入について説明したが，そこには代替テキストを指定することが必要であると述べた。ここでは，画像の代替テキストの指定について簡単に説明する。

　img 要素には，代替テキストとして alt 属性を指定しなくてはならない。代替テキストであるから，“その画像をテキストに置き換えるときもっとも適切なもの”を与えるように留意したい。

図 8.1 [D]

　代替テキストには，

• 何らかの理由で指定された画像を出力できないとき（図 8.1），または画像を出力しないブラウザで表示される
• 音声ブラウザ（スクリーンリーダ）で画像の代わりに読み上げられる
• ブラウザによっては，画像にマウスポインタを当てたときに表示される

という役割があることを覚えておいて，いくつかのケースについて代替テキストの与え方について考えよう。

　ページのコンテンツとして挿入される写真やイラストは，それをテキストに置き換えるのは難しいかもしれない。このような場合は，何を写した写真であるとか，どんなイラストであるとか，簡単な説明などを alt 属性に書き込んでおくとよいだろう。これによって，画像が表示できない環境に対してどんなコンテンツであるかを可能な限り伝えたり，読み込みに失敗したときなどにその画像を改めてダウンロードする必要があるかなどを判断する材料としたりできるだろう。

<p><img src="fshinjuk.jpg" alt="【写真】後楽園・新都心方面を望む。" width="320" height="240" /></p>

　お手元の環境では次のような出力になる。

　ロゴやアイコンは，テキストに置き換えるのは比較的容易であろう。たとえば，（トップページなどの）ロゴには，装飾されたテキストや図案が描かれているが，そのテキストまたはロゴの表すものを alt 属性に書き込めばよいだろう。

　また，ナビゲーション用のボタンなども，同様に，“次のページへ”，“トップページに戻る”，“英語版”などのボタンの表す操作を書き込めばよいだろう。

<h1><img src="fachtml.gif" alt="Academic HTML" width="420" height="60" /></h1>

<p><a href="./"><img src="fgohome.gif" alt="トップページに戻る" width="80" height="32" /></a></p>

ぞれぞれ，次のように出力される。

　特に内容に関係なく，装飾的な画像を使うこともある。内容的な意味がないものに代替テキストをつけたとして，たとえば音声ブラウザで読み下されるのは逆にページの内容理解の妨げになってしまうだろう。このような場合は，alt 属性に“空の文字列”を与えるとよい（alt=""）。これは，“alt 属性を指定しない”ことではなくて，“特に意味はないのでテキストに置き換えても何もない”ということを示すことである。

<h2><img src="fcake.gif" alt="" width="32" height="32" /> Happy birthday! <img src="fcake.gif" alt="" width="32" height="32" /></h2>

上の例ではたとえば“fcake.gif”がケーキのアイコンだとして，これは h2 要素のテキスト“Happy birthday!”を装飾するもので，テキストに置き換えても意味はないとし（ここで代替テキストを“ケーキ”としたら逆に意味がわからなくなってしまうだろう），代替テキストを空の文字列とした。

　これは，お手元の環境では次のような出力になる。

　以上，代替テキストのつけ方に対して簡単に説明したが，ケースバイケースで適切な指定を心がけたい。