Image Maps
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”.
Full code for Image map example
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 you could provide redundant text links on the same page.
Related WCAG2.0 resources
Techniques: