alt属性

img要素のalt属性は、画像を読み込めなかったときに使用する、代替テキストを指定する任意属性。

ブラウザ対応

構文

<img src="URL" alt="代替テキスト">

代替テキスト

画像を読み込めなかったときに、画像の代わりに表示するテキストを指定する。

必要要件

img要素のalt属性は、任意属性であるが、画像が示す意味が下記のような場合、alt属性を指定する必要がある。

  • 画像だけのハイパーリンク。
  • 画像だけのボタン。
  • チャート、図、グラフ、地図、イラストなどのグラフィック表示。
  • テキストの画像。
  • テキストを含む画像。
  • コンテンツのテーマや主題を強める画像。
  • 前後の文章のグラフィック表現。
  • 情報を追加しない、純粋に装飾的な画像。
    ・・・alt=""のような、空のalt属性を指定する。
  • インライン表示の画像。
  • リンクを持たない複数の画像で形成する一つの大きなグラフィック。
    ・・・１つ目の画像のalt属性に指定し、２つ目のalt属性は、alt=""のように空にする。
  • リンクを持つ複数の画像で形成する一つの大きなグラフィック。
  • イメージマップ。
  • 写真。
  • ウェブカメラの画像。
  • 画像を表示する以外の目的の画像。
    ・・・ページビュー・カウントには、alt=""のような、空のalt属性を指定する。
  • アイコン画像。
  • ロゴ、徽章、旗、エンブレム。
  • キャプチャ画像。

サンプルコード

<img src="sample.png" alt="サンプル画像">

画像だけのハイパーリンク

<a href="sample.html"><img src="sample.png" alt="サンプル"></a>

画像だけのボタン

<button name="sample"><img src="sample.png" alt="サンプル"></button>

サンプル

HTMLソースコード

<p><img src="" alt="サンプル画像"></p>
<p><a href="http://html5.cyberlab.info"><img src="" alt="HTML5入門"></a></p>
<p><button name="sample"><img src="" alt="サンプルボタン"></button></p>

実際の表示

サンプル画像

HTML5入門