ポイント3：画像が見えない人のために

【関連するJIS X 8341-3 個別要件】 5.4.a、5.4.b

imgタグにつける「alt="○○○"」は、HTMLの文法上必須のものです。たとえ代替テキストが必要ないと思われる場合でも、「alt=""」のように(内容を空にして)指定しておく必要があります。

この「alt」は「alternate text」を略したもので、意味としては「代わりとして使われるテキスト」ということになります。つまり、「alt="○○○"」で指定するテキストは、テキストブラウザや音声・点字などの画像を表示できない環境で、画像の代わりとして利用されることを目的としたものなのです。代替テキストは、画像の説明をするためのものではありませんし、マウスのポインタを画像にのせた時にそれをポップアップさせるためのものでもありません（画像の説明をポップアップさせたい場合は「title="○○○"」を使用してください）。あくまで、画像が無い状態で、その代わりの役割を果たすために利用されるものなのです。そのため、同じ画像でもその役割、配置されている位置や前後関係などによって、代替テキストとしてふさわしい内容は変わってくるという点に注意してください。代替テキストが適切かどうか確認するには、音声ブラウザやテキストブラウザなどを使用するか、テキスト形式で書き出したものをテキストエディタなどで開いてチェックしてください。

また、画像が複雑なグラフである場合など「alt="○○○"」だけでは画像の意味や内容等を十分に伝えきれない場合には、「longdesc="○○○"」で詳しい説明のあるページのURLを示すこともできます。ただし、longdescに対応していないブラウザもありますので、可能であれば説明ページへのリンクもつけてください。

画像と代替テキストの例1。ロゴ画像の役割を代替テキストで表している。

<a href="../../index.html">
<img class="nict" src="../assets/nict_logo_small.gif" alt="情報バリアフリーのための情報提供サイトへ" width="346" height="40">
</a>

画像と代替テキストの例2。画像の説明ではなく、画像の機能を表している。

<a href="#top-top">
<img src="../../assets/icon_back.gif" alt="ページの先頭へ戻る">
</a>

【関連するJIS X 8341-3 個別要件】 5.4.b

イメージマップには、画像自体の代替テキストの他に、マウスに反応する各領域に対しても代替テキストをつける必要があります。下のソース例のように、リンク先と領域を定義するareaタグの中に「alt="○○○"」の形式で記入してください。その際、代替テキストはリンク先が具体的にイメージできるようなものにしてください。また、古いブラウザの中には、各領域に対する代替テキストを利用できないものもあります。可能であれば、イメージマップとは別にテキストのリンクも用意してください。なお、アクセシビリティを考慮するのであれば、サーバー側で処理を行うイメージマップは基本的に使用しないでください。もし使う必要がある場合は、テキストによるリンクは必ず用意してください。

<map name="navigation">
<area href="prev.html" shape="rect"
alt="前のページ" coords="100,10,180,40">
<area href="top.html"  shape="rect"
alt="先頭ページ" coords="200,10,280,40">
<area href="next.html" shape="rect"
alt="次のページ"  coords="300,10,380,40">
</map>