W3C home Web Accessibility Initiative (WAI) home

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

[DRAFT] Image maps

A client-side image map is an image divided into selectable regions defined by <area> elements ("hotspots") that carry out actions, such as provide links to other pages. In this case, text alternatives are needed on 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.

Example 1: 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 each linked <area> has a text alternative to identify the director, such as "Davy Jones: Chairman".

Board of directors: Davy Jones: Chairman Carole Brewster: Company Secretary Harry H Brown: Marketing Director Paula Holbein: Sales Director Hugh Howard: Finance Director

Code snippet

<img src="../img/orgchart.png" alt="Board of Directors: " usemap="#Map">
<map name="Map">
<area shape="rect" coords="176,14,323,58" href="../res/beyond" alt="Davy Jones: Chairman">

Full code for Image map example (new window)

Note: Image maps may not function correctly on some mobile devices if the coordinates for the areas are not scaled in the same proportion as the image. To overcome this you could provide redundant text links on the same page.

Related WCAG2.0 Techniques

The following WCAG 2.0 techniques were used in the examples above: