server-side-image-map

Description

The server-side-image-map rule ensures that server-side image maps (created using the ismap attribute on <img> elements) are not used. Server-side image maps work by sending mouse-click coordinates to a server to determine the destination or action. Because they depend entirely on mouse coordinates, they are fundamentally inaccessible to keyboard users, who cannot generate coordinate data, and to screen reader users, who have no way to discover or navigate the clickable regions of the map.

This rule meets WCAG requirements by:

1. Keyboard Operability (WCAG 2.1.1 Keyboard): It prevents the use of image maps that cannot be operated through a keyboard interface, ensuring all navigation and interaction remains keyboard-accessible.
2. Non-text Content Alternatives (WCAG 1.1.1 Non-text Content): It ensures that image-based navigation provides text alternatives for the selectable regions, rather than relying on opaque coordinate-based server logic.

To comply with this rule, replace server-side image maps with client-side image maps using <map> and <area> elements, or replace them with standard semantic HTML navigation.

Examples

This example shows an <img> element using the ismap attribute to create a server-side image map. Clicking anywhere on the image sends coordinates to the server, but keyboard users have no way to interact with specific regions.

The corrected version replaces the server-side image map with a client-side image map using <map> and <area> elements. Each clickable region is defined as an <area> with a descriptive alt attribute, making all regions keyboard-accessible.

How to fix?

To fix violations of the server-side-image-map rule, follow these steps:

• Remove the ismap attribute from any <img> element.

• If the image map provides navigation, replace it with a client-side image map by adding usemap to the <img> and defining clickable areas with a <map> element and <area> elements, each with a descriptive alt attribute.

• For complex navigation scenarios, consider replacing the image map entirely with a standard HTML navigation structure using <nav>, <ul>, and <a> elements, which provides better accessibility and maintainability.

Reference

• WCAG Success Criterion 2.1.1: Keyboard

• WCAG Success Criterion 1.1.1: Non-text Content