• June 30, 2025

Avoid Using Server-Side Image Maps

Rule ID: server-side-image-map
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

Replace all server-side image maps with client-side image maps to ensure accessibility.

❌ Bad Example (Server-Side Image Map)

In this example, the ismap attribute causes the image to rely on server-side processing, which cannot interpret keyboard events or expose individual clickable areas to assistive technologies.

✅ Good Example (Client-Side Image Map)

In this format:

• Each <area> has a href for navigation and an alt attribute that describes its function.

• The usemap attribute on the <img> element links to the <map> tag, enabling semantic mapping and keyboard accessibility.

• Screen readers can access each hotspot, and keyboard users can tab through each link.

Best Practices

• Always provide meaningful alt text for each <area>.

• Ensure proper contrast and visibility of hotspot areas.

• Include keyboard navigation support and test focusability of hotspots.

Why it Matters

Server-side image maps rely solely on mouse input, making them inaccessible to users who navigate with keyboards or assistive technologies. They pass the click coordinates to a server-side script, which:

• Cannot be triggered using a keyboard

• Cannot provide semantic or descriptive labels for individual regions

• Offers no way for screen readers to identify or describe individual hotspots

In contrast, client-side image maps:

• Are fully keyboard accessible

• Allow the use of semantic HTML with descriptive labels via alt attributes

• Enable assistive technologies to interpret and interact with each region

This makes a critical difference for users with motor disabilities or who rely on screen readers.

Rule Description

This rule checks for the use of server-side image maps and flags them as accessibility failures. Server-side maps fail to meet minimum accessibility standards because their interactive areas are not operable via keyboard or describable via text alternatives.

The Algorithm (in Simple Terms)

The accessibility engine scans all <img> elements in the document. If it finds an image with the ismap attribute (used for server-side image maps), it flags it as a violation. The engine expects all image maps to be defined client-side using <map> and <area> elements with proper alternative text.