概要
- 配置できる場所
-
- 上記カテゴリーの要素が置ける場所。
- 内容モデル
-
- Transparent
- 必須とはされてないが、
area
要素を子孫に含むことが想定されている。
- 属性
- HTML構文におけるタグの省略
-
- 省略不可。
アクセシビリティ関連
- 代替テキスト:子孫たる
area
要素のalt
属性値。 - 未対応ユーザーエージェント向け代替コンテンツ:子孫たる
area
要素のalt
属性値をリンクテキストとするリンクが設定される。ただし、それにも未対応ということであれば、何も表示されない。 - アクセシビリティ支援技術向け:子孫たる
area
要素のalt
属性値。 - オブジェクトデータがアクセス不能又は対応してない形式の場合:画像が
img
要素である場合は、子孫たるarea
要素のalt
属性値をリンクテキストとするリンクが設定される。画像がobject
要素である場合は、リンクは設定されない(object
要素の代替コンテンツは存在していても、イメージマップそれ自体の代替コンテンツはないということになる)。 - ユーザーエージェントの
area
要素のalt
属性への対応状況は案外怪しいので、map
要素の前後又は内容に、同等の機能を果たすa
要素によるリンクのリストを設置すべきである(Techniques for WCAG 2.1 : G190)。
私見・補足
ユーザーエージェントがイメージマップに対応しており、かつ、イメージマップが正常にレンダリングされる場合においても、内容は普通にレンダリングされる。つまり、map
要素の内容は、代替コンテンツではない。
img
要素やobject
要素との関連付け方法は、map
要素に内包するという形もあってよかったのではないかとも思う。
個人的には、area
要素を必須としてないのが不思議だ。
area
要素が存在しないどこにもリンクされてないイメージマップという無意味なものを作成することすら可能になっている。href
属性のないa
要素にならって、プレースホルダーとしてのイメージマップと解釈すべきなのだろうが。
また、map
要素の中にarea
要素はあるけど、map
要素とimg
要素が関連付けられていないという、イメージがないイメージマップも作成できる(当然、イメージマップとしては機能しないし、area
要素も表示されないからリンク集としても機能しない)。
表示確認
- ソース1
-
<img src="./sample/map.gif" alt="mapサンプル" usemap="#map" width="570" height="153" /> <map name="map"> <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" /> <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" /> </map>
- 表示結果1
-
- ソース2:画像が存在しない場合
-
<img src="./sample/nai.gif" alt="mapサンプル(画像なし)" title="nai.gifは存在しない" usemap="#map2" width="570" height="153" /> <map name="map2"> <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" /> <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" /> </map>
- 表示結果2
-
画像が表示されない場合にarea
要素のalt
属性値が表示されないブラウザが少なくないようだ。
- ソース3:
map
要素内にarea
要素以外も配置 -
<img src="./sample/map.gif" alt="mapサンプル" usemap="#map3" width="570" height="153" /> <map name="map3"> <div> <a href="0mokuji.html">目次へ</a>| <area shape="rect" coords="0,0,570,77" href="0mokuji.html" alt="目次" /> <a href="0kyotu.html">各要素にかかわる共通事項へ</a> <area shape="rect" coords="0,78,570,153" href="0kyotu.html" alt="各要素にかかわる共通事項" /> </div> </map>
- 表示結果3
-
配置の仕方によってはarea
要素によるリンクが効かなくなるブラウザもあるようだ。