This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: firstname.lastname@example.org.
[DRAFT] Image maps
A client-side image map is an image divided into selectable regions defined by <area> elements ("hotspots") that allow user interaction, such as providing 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 related staff: ", and each linked <area> has a text alternative to identify the individual, such as "Davy Jones: Chairman".
<img src="../img/orgchart.png" alt="Board of Directors: " usemap="#Map">
<area shape="rect" coords="176,14,323,58" href="../res/beyond" alt="Davy Jones: Chairman">
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: