server-side-image-map
Web validation
A server-side image map is an ismap image placed inside a link. When the user clicks the image, the browser sends the click coordinates to the server, which decides what to do.
Focus never lands on individual regions, so people who use a keyboard, screen reader, or voice control cannot operate the map. Replace it with a client-side image map or ordinary text links so everyone can reach the same destinations.
Pass Patterns
Client-side image map
Each hotspot is an <area> element, so it receives focus and exposes an accessible name.
<img src="world.png" alt="World map" usemap="#world-map" />
<map name="world-map">
<area shape="rect" coords="34,44,270,350" href="/oceania" alt="Oceania" />
<area shape="circle" coords="337,300,44" href="/europe" alt="Europe" />
</map>Redundant text links
Text links beside the image give everyone, including keyboard users, a clear way to reach the same pages.
<p>
<a href="/oceania">Oceania</a> |
<a href="/europe">Europe</a>
</p>Fail Patterns
Server-side map with no alternative
The ismap image sends only click coordinates, so keyboard users cannot reach the destinations.
<a href="/mapper">
<img src="nav.png" alt="Site navigation" ismap />
</a>WCAG techniques
Sufficient techniques
Failure techniques
Try It Yourself
Using a keyboard
- Load the page.
- Press Tab repeatedly.
- Watch where focus lands.
Expected results: Focus reaches a control for each destination.
Actual results: Focus skips the regions, and the hotspots cannot be activated.
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Turn on a screen reader.
- Navigate by links or press Tab on the page with the image map.
- Listen to the announced elements.
Expected results: Each destination is announced with its accessible name.
Actual results: Only a single image link is announced, with no information about the destinations.
FAQ
How does this issue relate to 2.1.1 Keyboard?
SC 2.1.1 requires all functionality to be operable with a keyboard. A server-side image map depends on mouse coordinates, so keyboard users cannot reach the linked content, which fails the criterion.
Why is this issue marked as Minor?
The barrier is limited to the specific image, and developers can usually fix it quickly by switching to a client-side map or adding text links. The impact is real but narrow, so it is rated minor.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 2.1.1 Keyboard (A) | All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. |
| EN 301 549 | 9.2.1.1 Keyboard | Same as the WCAG text. |
| Section 508 | 1194.22(f) | Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. |
| 508 Trusted Tester | 2.1.1-keyboard-access, 4.A | All functionality can be accessed and executed using only the keyboard. |