Server-side image maps must not be used

Rule Description

The document contains an image map that is server-side instead of client-side.

The Algorithm, in Simple Terms

Ensures that server-side image maps are never used.

Why this is Important

Server-side image maps are not keyboard accessible; mouse clicks are required to access the links contained in the image, making the image inaccessible to people who only use keyboards for their navigation.

Server side image maps pass the coordinates of the mouse click to the server-side script used to process the image map. Because they rely on mouse clicks, they are not keyboard accessible, whereas client-side image maps are keyboard accessible. In addition, it is not possible to provide text alternatives to the actionable areas of a server-side image map like you can with the areas of a client-side image map.

Compliance Data & Impact

User Impact: Minor
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Minor
Issue Type:
  • WCAG 2.0 (A): MUST
  • Section 508: MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 2.1.1 Keyboard
Section 508 Guidelines:
  • 1194.22 (f) Client-side image maps instead of server-side

How to Fix the Problem

Change all server-side image maps to client-side image maps.

Bad Example

Don't use server-side image maps.

<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>

Good Example

A client-side image map is contained by an <img> element. They have a usemap attribute containing the name of the image map (i.e. <img usemap="myImageMap" src="..." >). After the <img> element, a set of <map> elements encloses the space where clickable hotspots are defined on the map as follows:

<img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
    <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
    Remaining hotspots in image map...
</map>

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: server-side-image-map