---
title: No Server-Side Image Maps | Accessibility Rule
description: Server-side image maps must not be used
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/server-side-image-map
  md: https://testingbot.com/support/accessibility/web/rules/server-side-image-map/index.md
---
# Ensure that server-side image maps are not used

Rule ID: server-side-image-mapUser Impact: minorGuidelines: 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. 

    <!-- 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:

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

#### Correct

A client-side image map:

    <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

- [W3C: Image Maps](https://www.w3.org/WAI/tutorials/images/functional/#image-maps)

## Other Rules

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

- [summary-name](https://testingbot.com/support/accessibility/web/rules/summary-name)
- [svg-img-alt](https://testingbot.com/support/accessibility/web/rules/svg-img-alt)
- [td-headers-attr](https://testingbot.com/support/accessibility/web/rules/td-headers-attr)
- [th-has-data-cells](https://testingbot.com/support/accessibility/web/rules/th-has-data-cells)
- [valid-lang](https://testingbot.com/support/accessibility/web/rules/valid-lang)