画像の代わりになるテキストを指定する

img要素に alt="" を追加すると、画像の代わりになるテキストを指定できます。

img要素にはalt属性が必須となります。

alt="" に記述したテキストは、次のような場合に使用されます。

• 画像を表示しないブラウザの場合、画像の代わりにこのテキストが表示されます。
• 音声ブラウザの場合、画像の代わりにこのテキストが読まれます。
• 画像の読み込みが完了するまでの間、その部分にこのテキストが表示されます。
• 検索エンジンによっては、このテキストが検索対象に含まれる場合があるようです。
• 一部のブラウザでは、マウスでポイントした時にこのテキストが数秒間表示されます。

【適切な代替テキスト】

alt="" の内容には、その画像の説明を入れるのではなく、画像の代わりとなるテキストを記述するようにします。

例えば、上記のタイトル画像に代替テキストを指定する場合は、

<img src="title.gif" alt="サイトのタイトル画像"> … このように記述するよりも、

<img src="title.gif" alt="HTML index"> … このように、画像に書かれたテキストをそのまま記述しておいた方が良いでしょう。

※音声ブラウザでは、大文字で書かれた英文はアルファベットで読み上げられてしまう場合があるようです。上記の場合は、「タグ インデックス」ではなく「ティーエージー インデックス」と読まれてしまう可能性があります（未検証）。頭文字以外は、小文字で書いておいた方がいいかもしれません。例： alt="HTML index"

【代替テキストが特に必要となるケース】

次のようなケースでは、必ず代替テキストを指定しておくようにしましょう。

• その画像がタイトルや見出しとして使用される場合。
• その画像がリンクとして使用される場合。

【代替テキストが不要なケース】

装飾目的の画像（アイコン等）の場合で、代替となるテキストが特に無い場合は、次のように空のalt属性を指定しておきます。

<img src="icon.gif" alt="">

テキストの頭に付けられる小さなマークなどの場合は、次のように記号で表現しておいてもいいかもしれません。

<img src="icon.gif" alt="*">

【画像の説明】

画像の説明を記述しておきたい場合は、alt属性ではなくtitle属性を使用します。（一般的なブラウザでは、title属性に記述された内容はツールチップで表示されます）

次の例では、「そこに写真が置かれている」という情報をalt属性で伝え、補足的な説明をtitle属性に記述しています。

<img src="rainbow.jpg" alt="写真" title="お台場から見たレインボーブリッジの写真">

しかし、補足として説明を入れるのであれば、次のようにテキストで表示しておいた方がいいかもしれません。

<img src="rainbow.jpg" alt="写真"> お台場から見たレインボーブリッジの写真

お台場から見たレインボーブリッジの写真