Features
Start a free trial

Ensure that server-side image maps are not used

Rule ID: server-side-image-map User Impact: minor Guidelines: WCAG 2.0

Server-side image maps should be replaced with client-side image maps to ensure accessibility for all users, including those relying on keyboard navigation.

About This Rule

This guideline ensures that image maps are accessible to all users by prohibiting the use of server-side image maps. Adhering to this practice aligns with the following standards:

  • WCAG 2.1 (A): 2.1.1 Keyboard
  • WCAG 2.0 (A): 2.1.1 Keyboard
  • WCAG 2.2 (A): 2.1.1 Keyboard
  • 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.
  • Trusted Tester: 4.A
  • EN 301 549

Why It Matters

Server-side image maps require mouse clicks to access the links within the image, making them inaccessible to users who navigate via keyboard. In contrast, client-side image maps are keyboard accessible and allow for the inclusion of text alternatives for each clickable area, enhancing usability for individuals with disabilities. ([dequeuniversity.com](https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=RuleDescription&utm_source=chatgpt.com))

How to Fix

To improve accessibility:

  • Replace Server-Side Image Maps with Client-Side Image Maps: Define clickable areas directly in the HTML using the <map> and <area> elements.
    Copy code
    <!-- Server-Side Image Map (Avoid) -->
<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>

<!-- Client-Side Image Map (Preferred) -->
<img src="images/solar_system.jpg" alt="Solar System" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_(planet)" alt="Mercury">
  <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
  <!-- Additional areas -->
</map>

Examples

Incorrect

A server-side image map:

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

Correct

A client-side image map:

Copy code
<img src="images/solar_system.jpg" alt="Solar System" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_(planet)" alt="Mercury">
  <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
  <!-- Additional areas -->
</map>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: