画像の上にヒットマップを追加する

ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。

知っておくべきことは以下の通り
前提条件:	基本的な HTML 文書の作成方法およびアクセス可能な画像をウェブページに追加する方法について、理解している必要があります。
目標:	1 つの画像の異なる領域を異なるページにリンクする方法を学びます。

警告:この記事では、クライアント側のイメージマップについてのみ説明します。ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。

イメージマップとその欠点

<a> 内に画像をネストすると、画像全体が 1 つのウェブページにリンクします。一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。

以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。

警告:同じイメージマップを複数の画像で参照すると、予期しないブラウザーの動作を引き起こし、ユーザビリティやアクセシビリティを著しく低下させる可能性があります。例えば、 Safari および Chromium ベースのブラウザーで、ユーザーがキーボードを使用して再利用されたイメージマップを含む画像を移動すると、そのイメージマップを使用している後続の画像インスタンスは完全にスキップされます。 Firefox では、すべてのイメージマップが同時にキーボードフォーカスを取得し、ユーザーがキーボードを使用して画像を通過すると、次のフォーカスされる要素は最後の画像インスタンスの次の要素となり、2 つの画像間のすべてがスキップされます。

テキストリンク（CSS でスタイル付けされたもの）がイメージマップよりも好ましいです。テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザー、翻訳サービスなど）。

イメージマップを正しく挿入する方法

ステップ 1: 画像

どんな画像でも受け入れられるわけではありません。

画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。alt テキストはもちろん必須ですが、多くの人々は決してそれを見ません。
画像には、ホットスポットの始まりと終わりを明示する必要があります。
ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。どれくらいの大きさか？72 × 72 CSS ピクセルは良好な最小値（英語）で、タッチターゲット間の間隔に余裕もあります。50languages.com の世界地図（執筆時点）は、問題を完全に示しています。アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。

常に同じ方法で画像を挿入します（<img> 要素とimg テキストを使用します）。画像がナビゲーションデバイスとしてのみ存在する場合、後で<area> 要素に適切なarea テキストを指定するとalt="" と書くことができます。

特殊なusemap 属性が必要です。イメージマップには、スペースを含まない一意の名前を考えてください。次に、usemap 属性の値としてその名前（# が先行する）を割り当てます。

html

<img src="image-map.png" alt="" usemap="#example-map-1" />

ステップ 2: ホットスポットを有効にする

このステップでは、すべてのコードを<map> 要素内に配置します。<map> には、上のusemap 属性で使用したのと同じマップ名のname 属性だけが必要です。

html

<map name="example-map-1"> </map>

<map> 要素の中に<area> 要素が必要です。<area> 要素はそれぞれが 1 つのホットスポットに対応します。キーボードでのナビゲーションを直観的に保つには、<area> 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。

<area> 要素は空要素ですが、次の 4 つの属性が必要です。

shape

shape は、circle（円）、rect（四角形）、poly（ポリゴン）、default（デフォルト）の 4 つの値のいずれかをとります。shape がdefault の<area> は画像全体から、あなたが定義した他のホットスポットを除いたものです。定義した領域が重複している場合、ソースの順序によってどちらの領域が優先されるかが決まります。選択した図形によって、coords で指定する必要がある座標情報が決まります。

coords

座標は CSS ピクセルで指定され、その値は選択したshape によって異なります。

円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。
四角形の場合は、左上角と右下角の x/y 座標を指定します。
ポリゴンの場合は、各角の x/y 座標を指定します（したがって、 6 つ以上の値）。

href

リンク先のリソースの URL。現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。

alt

リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。alt テキストは、画像が利用できない場合にのみ表示されます。アクセス可能なリンクテキストを書くためのガイドラインを参照してください。

href 属性が空白で、画像全体に既にalt 属性がある場合、alt="" と書くことができます。

html

<map name="example-map-1">  <area    shape="circle"    coords="200,250,25"    href="page-2.html"    alt="circle example" />  <area    shape="rect"    coords="10, 5, 20, 15"    href="page-3.html"    alt="rectangle example" /></map>