例-1（alt属性が空の画像）

HTMLソース

<p>
 <img src="01data/graph.gif" width="358" height="307" 
      alt="" />
</p>

• img要素にalt属性が指定されていないため、音声ブラウザ、検索エンジンのロボット、テキストブラウザでは情報にアクセスできない。

例-2（alt属性により代替テキストを提供）

HTMLソース

<p>
 <img src="01data/graph.gif" width="358" height="307" 
      alt="直近5年間の年商の推移（グラフ）" />
</p>

• 画像にalt属性により代替テキストを提供した。
• テキストブラウザ等では画像の説明を読んで必要であれば画像をダウンロードできる。
• alt属性で提供されているテキストが画像と等価でないため、音声ブラウザ等に対しては同等の情報提供にならない。

例-3（alt属性により「等価な」代替テキストを提供）

HTMLソース

<p>
  <img src="01data/graph.gif" width="358" height="307"
       alt="直近5年間の年商の推移（グラフ）- 
       1999年度2千万円の年商が2003年度には
       7000万円と順調に業績を伸ばしている。
       1999年度には商品Ａ、2002年度には商品Ｂを発売し、
       年商拡大のきっかけとなった。" />
</p>

• alt属性の内容を、この画像（グラフ）によって伝えたい内容と等価にした。
• 代替テキストが冗長になる、あるいは全く等価にはならないという問題がある。

例-4（alt属性により簡潔な代替テキストを、longdesc属性により等価な代替テキストを提供）

HTMLソース

<p>
 <img src="01data/graph.gif" width="358" height="307"
       alt="直近5年間の年商の推移（グラフ）- 
       順調に業績を伸ばしている。"
       longdesc="01data/graph.html" />
</p>

• longdesc属性のを追加し、別のファイルによって等価代替情報を提供するようにした。
• この場合にlongdesc属性によって参照されたリソースには、画像と完全に等価になるための情報（alt属性を簡潔にするために省略したテキスト、グラフのデータを数値テーブル化してマークアップしたもの等）を含むべきである。
• longdesc属性を解釈できないユーザーエージェントもあることに注意。

Tips

• [1] 画像にはalt属性により代替情報を提供する
• [2] alt属性には画像の説明ではなく、画像により伝えたい「内容」を書く。
• [3] alt属性の説明が冗長になりすぎる場合はalt属性は簡潔にまとめ、longdesc属性によって等価な情報を提供する。