alt 属性

img 要素において画像が表示できなかった場合や、area 要素における領域内のフォールバックとして利用される代替テキストを指定します。

HTML 4.01 などでは、img 要素の alt 属性は必須属性でしたが、HTML5 においては特に文脈上意味を持たない画像など、代替テキストが必要ではない img 要素に関しては省略が可能になりました。これは、従来、alt="" としていた画像が該当すると思います。ただし、alt 属性の省略はなるべく避け、原則として画像に対しては alt 属性と適切な代替テキストを指定するのが望ましいでしょう。

仕様書内で厳密に規定された alt 属性値の付け方

HTML Standard の仕様書内では、alt 属性値に入れるテキストに関して厳密に規定されています。

単に画像のタイトルを入れるのではなく、その画像が表すものを文章として説明する必要があります。例えば、文章中に画像が埋め込まれた場合、画像を取り除いて本文と代替テキストだけを残した場合でも、その文章が問題なくつながるような内容とすることが求められています。

下記のサンプルソースで良い例と悪い例を示します。

<!-- alt 属性値として悪い例 -->
<p>
 角を曲がったところにお目当ての桜の木が立っています。
</p>
<p>
 <img src="sakura.jpg" alt="桜" />
</p>
<p>
 この桜の下で早速お花見を…
</p>

<!-- alt 属性値として良い例 -->
<p>
 角を曲がったところにお目当ての桜の木が立っています。
</p>
<p>
 <img src="sakura.jpg" alt="桜公園の真ん中に立つ樹齢100年の桜の木。撮影したこの日はすでに満開でした。" />
</p>
<p>
 この桜の下で早速お花見を…
</p>

<!-- alt 属性値として悪い例 -->
<h1>ブラウザシェアの統計グラフ</h1>
<p>
 <img src="sakura.jpg" alt="図版" />
</p>

<!-- alt 属性値として良い例 -->
<h1>ブラウザシェアの統計グラフ</h1>
<p>
 <img src="sakura.jpg" alt="2013年8月のブラウザシェアのグラフ。1位は Google Chrome で全体の…" />
</p>
<!--
 あまりに長い文章を入れることに抵抗がある方もいるかもしれませんが、
 わかりやすさを優先して記述しましょう。
 あわせて、figcaption 要素によるキャプションを使用するのもいいでしょう。
-->

<!-- 会社ロゴなどは画像の役割を代替テキストに記述するのではなく -->
<img src="logo.png" alt="会社ロゴ" />
 
<!-- そのロゴが表す内容を記述するようにします -->
<img src="logo.png" alt="日本株式会社" />