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

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.


Board of directors and related staff:

Davy Jones: Chairman Carole Brewster: Company Secretary Harry H Brown: Marketing Director (reports to chairman) Paula Holbein: Sales Director (reports to chairman) Hugh Howard: Finance Director (reports to chairman)
Code snippet:
<img src="orgchart.png"
     alt="Board of directors and related staff: "
<map id="Map" name="Map">
	<area shape="rect"
	      alt="Davy Jones: Chairman">
	<area shape="rect"
	      alt="Harry H Brown: Marketing Director (reports to chairman)">

Full code for Image map example

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 ids;
  • 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.

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: