要約

イメージマップの領域にラベルを付け、マップを見ることができないユーザーや領域を簡単にアクティブ化できないユーザーが、マップにアクセスできるようにします。

テクニック

• 各area要素に説明を含む代替テキストを付けてください。[[WCAG-1.1.1]]

例

<img
    src="north-america.png"
    usemap="#na-map"/>
  <map id="na-map">
    <area shape="poly" coords="…" href="ca-info.xhtml" alt="Canada"/>
    <area shape="poly" coords="…" href="us-info.xhtml" alt="US"/>
    <area shape="poly" coords="…" href="mx-info.xhtml" alt="Mexico"/>
  </map>

<figure><a href="…"><img
    src="north-america.png"
    ismap="ismap"/></a>
    <p>Regions: <a href="ca-info.xhtml">Canada</a> | 
       <a href="us-info.xhtml">US</a> | 
       <a href="mx-info.xhtml">Mexico</a></p>
    </figure>

解説

イメージマップは、ユーザーがクリック、タッチ、またはその他の方法で、画像のどこをアクティブ化するかによって、固有の操作が実行されるコンテキスト依存の画像です。イメージマップは、二次元画像を動的にして、インフォグラフィック上のポイントに関する詳細情報を提供するのによく使用されます。

クライアントサイド 対 サーバーサイド

マップを作成するには二つの方法があります。ローカルでusemap属性を使い、クリック可能な領域を定義するmap要素を参照する方法と、リモートで画像をaタグで囲み、imgタグにismap属性を設定する方法です。

サーバーサイド マップは、本質的にアクセシビリティが低いものになります。ユーザーが画像を見て領域を判別する必要があり、また、ユーザーが画像の正確な場所をクリックする必要があるためです。

クライアントサイド マップでは、関連付けられたmap要素を使用してクリック可能な領域を定義します。各領域はarea要素内で指定され、各areaにはその目的を示すalt属性が付与されている必要があります。これにより、視覚に障害のあるユーザーが機能を簡単に見つけることができます。支援技術により、ユーザーはこれらの領域を繰り返し利用できるため、サーバーサイド マップよりもはるかに使いやすいオプションとなり、煩わしいフォールバックも必要ありません。

実際のところ、サーバーサイド マップは追加機能を提供しないため、その使用は推奨されません。使用する必要がある場合は、マップを操作できないユーザーが機能に平等にアクセスできるように、クリック可能な各領域に対応するリンクのセットを提供する必要があります。

ただし、よりよい代替手段が利用できる場合は（たとえば、テキストの画像をリンク可能にできる場合）、どちらの種類のマップも使用しないでください。

関連リンク

• MDN — <map>
• HTML —イメージマップ
• HTML — map要素
• HTML — area要素
• HTML — ismap属性