Client-side Image Maps

Accessibility Standards Checklist

Requirement

Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Reason

Client-Side image maps allow an author to assign text to each image map active region, or "hot spot." This allows someone using a screen reader to identify and activate regions of the map. Provide alt and title text equivalents for each active region of an image map. As with other links, the link text should make sense when read out of context.

Examples

Alt and Title Text for Image Maps

To identify an image as a map, use the "usemap" attribute. Use the <map> tag, which includes <area> tags that identify the hot spots on the image.

If you roll your mouse over Davidson, Shelby, and Knox counties, you will notice that the name which pops up is the alt and title description for that hot spot. Below the map is the actual code and usemap.

Map of Tennessee Counties. Shelby County Davidson County Knox County

  • <img src="images/tennessee.gif" alt="Map of Tennessee Counties." width="750" height="200" border="0" usemap="#Map" />
  • <map name="Map" id="Map">
  • <area shape="poly" coords="11,178,28,141,65,142,63,183" href="http://www.tennesseeanytime.org/local/shelby.html" alt="Shelby County" title="Shelby County" />
  • <area shape="poly" coords="289,80,288,70,301,39,308,39,313,37,326,55,334,68,332,72,324,84,305,74" href="http://www.tennesseeanytime.org/local/davidson.html" alt="Davidson County" title="Davidson County" />
  • <area shape="poly" coords="524,89,532,80,542,76,540,71,551,60,571,61,577,81,560,97,550,92,534,101" href="http://www.tennesseeanytime.org/local/knox.html" alt="Knox County" title="Knox County" />
  • </map>

Suggestions for testing this on your pages

[Back To List]