イメージマップの使い方
イメージマップを使うと、1枚の画像の中に、別々のリンク先を持つ場所を作れます。たとえば、地図の「山」の部分から山の説明へ、「海岸」の部分から海岸の説明へ移動できます。
先に結論
imgで表示した画像に、mapで場所の集まりを用意します。それぞれの場所はareaで形・位置・リンク先を指定します。
画像全体の説明はimgのaltへ、各リンク先の名前はareaのaltへ書きます。2つのaltは役割が違います。
画像の場所を選ぶ例
下の絵は、山・駅・海岸の3つの場所に分かれています。絵のそれぞれの場所を選ぶと、ページ内の説明へ移動します。絵の下にある通常のリンクからも同じ説明を開けます。
最小例
<img src="/images/island.png"
width="480" height="240"
alt="山、駅、海岸の3つの場所を描いた島の図"
usemap="#island-map">
<map name="island-map" id="island-map">
<area shape="rect" coords="0,0,160,240"
href="/mountain.html" alt="山の案内へ">
<area shape="rect" coords="160,0,320,240"
href="/station.html" alt="駅の案内へ">
<area shape="rect" coords="320,0,480,240"
href="/coast.html" alt="海岸の案内へ">
</map>usemap="#island-map"とname="island-map"で、画像と場所の一覧をつなぎます。先頭の#も書きます。idも付ける場合は、nameと同じ値にします。
場所の形と座標
shape="rect"は四角形、shape="circle"は円、shape="poly"は多角形を表します。coordsには画像の左上から測った位置を書きます。
四角形の座標は「左、上、右、下」の順です。たとえばcoords="0,0,160,240"なら、画像の左上から横160、縦240までの範囲です。形や順番を変えたら、絵の上でリンクする場所もずれないか確かめます。
画像をCSSで大きくしたり小さくしたりすると、場所も表示された画像に合わせて広がったり縮んだりします。画像を切り抜いたり、画面の広さに合わせて別の構図へ切り替えたりするときは、リンク領域が正しいか確認してください。
altは画像とリンク先をそれぞれ説明する
画像のaltには、図全体が何を表すかを書きます。リンクになるareaには、リンク先や操作の目的をaltで書きます。「ここ」ではなく「山の案内へ」のように、名前だけで移動先が分かる表現が役立ちます。
リンクのないareaは選べない領域です。リンクのない領域にはhrefもaltも付けません。リンクにするareaにはhrefとaltの両方が必要です。
画像を使えない人にも同じ場所を選べるよう、イメージマップだけに頼らず、画像の近くに通常のテキストリンクを置く方法もあります。使うブラウザーのキーボード操作や読み上げを実際に確認すると、より確かです。
よくある間違い
usemapの名前とmapのnameが合っていない。- 画像全体の説明と、各リンク先の名前を同じ
altで済ませる。 - 画像を変えたのに
coordsを見直さず、別の場所がリンクになっている。 - 小さすぎる場所を作り、タッチ画面や拡大表示で選びにくくする。
山
この場所を選ぶと、山の案内へ進みます。リンク先を表すareaのaltも「山の説明へ」としています。
駅
この場所を選ぶと、駅の案内へ進みます。画像の下にある通常のリンクからも同じ説明を開けます。
海岸
この場所を選ぶと、海岸の案内へ進みます。地図の画像全体の説明は、3つの場所のリンク名とは別にimgのaltへ書きます。
Atlasで詳しく確認する
usemapの参照方法、shapeとcoordsの条件、領域が重なった場合の順序、実ブラウザー・WPT・Accessibility Treeでの確認結果は、Yugien Atlasのイメージマップページで確認できます。画像の内容や代替テキストはimg要素、通常のリンク動作はa要素も参照してください。