A client-side image map is an image divided into selectable regions defined by
<area> elements (“hotspots”) that allow user interaction. Usually, the selectable regions are links to other pages. For image maps, text alternatives are needed on both the
<img> element itself (to convey the informative context) and on each of the
<area> elements (to convey the link destination or the action that will be initiated if the link is followed).
An organizational chart with links to individual pages
The following organizational chart is used to provide links to each director's home page. The text alternative for the image is “Board of Directors and related staff:”. Each linked
<area> has a text alternative to identify the individual – for example, “Davy Jones: Chairman”. The text alternative for individuals also states their relation in the graph.
Browser implementation for image maps varies at the time of writing; see this HTML bug. To accommodate for the different implementations, keep in mind to:
- use every image map only once. That means if multiple images with the same map are to be used, the map should be duplicated and have a different
- place the
<map>element as a direct sibling to the image.
Note: Image maps may not function correctly on some mobile devices if the coordinates for the areas are not scaled using the same proportions as the image. To compensate for this, provide redundant text links on the same page.
Related WCAG 2.0 resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels: