Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 1.7 - Wikis

All image maps are client-side and have accessible features

WCAG 1.0 Priority 1

WCAG Guideline 9. Design for device-independence.

Image maps provide a different visual relationship between content and hyperlinked information. Being primarily a visual tool, the hyperlinked information component of the image is not able to be accessed by some assistive technologies.

Server-side image maps can only be used with a mouse while some people with disabilities, such as people with Parkinson's Disease or Cerebral Palsy, can only navigate through a site with a keyboard.

Requirement

All image maps must be client side.

All client-side image maps need to be marked up properly. For more information see: All active regions of a client-side image map are also listed as redundant text links.

When using an image map:

  • All regions must have an alt attribute
  • All the image map hotspots must have an alt attribute that indicates the target of the hotspot
  • All active image hotspots must be at least 35 pixels square.

Example

<img alt=" "src="/images/map.gif"
   height="200" width="250"
   usemap="#local_map" />
<map name="local_map">
<area shape="poly" alt="Town A transport map"
   coords="97,93, 87,101, 84,95, 76,95, 73,84"
   href="town_a.htm">
<area shape="poly" alt="Town B transport map"
   coords="84,82, 89,68, 77,67, 72,70, 67,82"
   href="town_b.htm">
<area shape="poly" alt="Town C transport map"
   coords="123,93, 123,99, 118,104, 97,93"
   href="town_c">
</map>

Checking Tool

  • Internet Explorer - AIS Toolbar: Images > Show Image Maps

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-client-side-maps)

 

Back to top