Summary
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.
Techniques
-
Ensure each
area
element has descriptive alternative text [[WCAG-1.1.1]]
Example
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
- MDN — <map>
- HTML — Image maps
- HTML — The
map
element - HTML — The
area
element - HTML — The
ismap
attribute