area
要素に代替テキストを提供する
area
要素を含むHTML及びXHTMLドキュメント
これは、次の達成基準に関連する実装方法である:
HTML 4.01仕様書は、alt
属性のテキストを、その要素が通常通り描画されないときに表示されるもの、と説明している。ユーザーエージェントは、画像が表示されないときにalt
属性のテキストを表示する。しかし、視覚系ユーザーエージェントは現状、イメージマップのarea
要素については、キーボードでアクセスした場合、又は画像そのものが表示されない場合には、alt
属性のテキストを表示しない。また、画像の内在寸法が指定されていない場合【訳注−img
要素のwidth属性
やheight
属性で画像のサイズが示されていない場合など】、area
要素を切り抜いて表示することもある。さらに、マウスオーバー時に反応して表示されるalt
属性のテキストは、ユーザーエージェントでのフォントサイズや色の組み合わせの設定通りに表示されない。
title
属性は追加情報を提供するものとされている。しかし、ユーザーエージェントにおける現在の実装では、title
属性とalt
属性のどちらかにはアクセスできるが、両方同時にはアクセスできない。ユーザーエージェントは一般的に、title属性
が指定された要素にマウスオーバーしたとき、そのtitle
属性のテキストを表示する。たとえば、Internet Explorerは、title
属性のテキストが指定されていなければ、マウスオーバー時にalt
属性のテキストを表示するが、FirefoxやOperaは、title
属性のテキストのみをマウスオーバー時に表示し、alt
属性のテキストは表示しない。したがって、alt
属性のテキストをマウスオーバー時に表示させるには、同じテキストをtitle
属性にも指定しておくべきである。
このようなことから、イメージマップを用いる際、この実装方法を正しく実装するには次のどちらかが必要となる。
area
要素のalt
属性値が、画像が読み込まれていても読み込まれていなくても、フォーカス(キーボードによるフォーカスを含む)を受けたときに表示されるようにすること。または、
area
要素と同じ目的を果たせる代わりのメカニズムが、ウェブページに存在すること。
この実装方法の目的は、イメージマップ上の選択可能領域と同じ役割を果たす代替テキストを提供することである。イメージマップは、area
要素によって定義された選択可能領域によって分割されている1枚の画像である。各領域は、他のウェブページや、現在のウェブページ内の他の場所へのリンクである。各area
要素のalt
属性は、その画像の選択可能領域と同じ目的を果たすものである。
この事例では、イメージマップ上の各領域の目的を示したテキストを提供するのに、area
要素のalt
属性を利用している。
コード例:
<img src="welcome.gif" usemap="#map1"
alt="図書館の各エリア。詳細を見るには、各エリアを選択してください。" />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="資料室" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="視聴覚室" />
</map>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
イメージマップ上の各area
要素について:
そのarea
要素にalt
属性を指定している。
alt
属性で指定した代替テキストが、area
要素で定義したイメージマップ上の領域と同じ目的を果たしている。
上記全てを満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。