Summary

Ensure the areas of an image map are labelled so that the map is accessible to users who cannot see it or easily activate the regions.

Techniques

Example

Example 1 — A client-side map

Each of the map's area elements contains an alternative text description.

<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>
Example 2 — A server-side map

Links are provided after a server-side map so that users who cannot see the map still have access to the information.

<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>

Explanation

An image map is a context-sensitive image that, depending on where the user clicks, touches or otherwise activates it, results in a unique operation being performed. Image maps are commonly used to make two-dimensional images dynamic, to provide more information about points on an infographic, etc.

Client-side v. Server-side

There are two ways to create maps: locally using the usemap attribute to reference a map element that defines the clickable region; and remotely by enclosing the image in an a tag and setting the ismap attribute on the img tag.

Server-side maps are inherently less accessible, both because they require that the user be able to see the image to discern the regions and also because they require that the user be able to click on the image in an exact spot.

Client-side maps make use of an associated map element to define the clickable regions. Each region is specified in an area element, and each area should include an alt attribute that indicates its purpose so that non-visual users can easily discover the functionality. Assistive technologies allow users to iterate over these areas, making them a much friendlier option than server-side maps, and without requiring intrusive fallbacks.

In fact, server-side maps provide no additional functionality, so their use is never recommended. If one must be used, a set of links corresponding to each clickable region should be provided so that users who cannot interact with the map have equal access to the functionality.

Note that neither kind of map should be used when a better alternative is available (e.g., to make an image of text linkable).

Related Links