Ensure the areas of an image map are labelled so that the map is accessible to users who cannot cannot see it or easily activate the regions.
- Ensure each
areaelement has descriptive alternative text [WCAG 1.1.1]
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
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).