Image Maps

title: "Image Maps — Making Client-Side Image Maps Accessible" description: "Learn how to make client-side image maps accessible with proper alt text on area elements, keyboard support, and screen reader navigation." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Client-side image maps with clickable areas need alt text on each area element and keyboard accessibility for all regions.

## What You'll Learn

How to create accessible image maps with proper alt text, focusable areas, and keyboard navigation.

## Why It Matters

Image maps present multiple clickable regions on a single image. Without alt text on each area, screen reader users cannot navigate or understand the options.

## Real-World Use

An image map of the United States shows clickable states. Each area element has alt="California", alt="Oregon", etc. A screen reader user tabs through the states in order.

## Image Map Structure

```html
<img src="us-map.png" alt="Map of the United States"
     usemap="#statesmap">

<map name="statesmap">
  <area shape="rect" coords="50,50,150,150"
        href="/california" alt="California">
  <area shape="poly" coords="200,50,250,100,200,150"
        href="/oregon" alt="Oregon">
  <area shape="circle" coords="300,100,40"
        href="/washington" alt="Washington">
</map>

Keyboard Accessibility

<map name="accessible-map">
  <area shape="rect" coords="10,10,100,100"
        href="/region-a" alt="Region A"
        tabindex="0"
        onfocus="highlightArea('region-a')">
  <area shape="rect" coords="120,10,210,100"
        href="/region-b" alt="Region B"
        tabindex="0">
</map>

Alternative to Image Maps

<!-- A list of links alongside the image is often more accessible -->
<img src="campus-map.png" alt="Campus map">
<ul>
  <li><a href="/building-a">Building A - Administration</a></li>
  <li><a href="/building-b">Building B - Library</a></li>
  <li><a href="/building-c">Building C - Science Center</a></li>
</ul>

Common Mistakes

1. No alt on area elements

Area elements without alt are announced as unlinked regions.

2. Area alt text too long

Keep area alt text short. The region name is usually sufficient.

3. Image missing alt text

The main image should describe the overall map. Areas describe individual regions.

4. No focus indicators on areas

Areas need visible focus indicators. CSS outline on area is unreliable. Use JavaScript.

5. Using image maps when a link list is better

Image maps should be avoided when a simple list of links would work.

Practice Questions

1. What attribute on area provides the accessible name? The alt attribute on the area element provides the accessible name.

2. How does a screen reader navigate an image map? Area elements are treated as links. The user tabs through them in DOM order.

3. What is the best alternative to an image map? A list of text links alongside or below the image, which is more accessible and easier to maintain.

Challenge: Create an image map of a floor plan with 5 clickable rooms. Add alt text to each area. Then create a link-list alternative.

FAQ

Mini Project

Create an interactive campus map using an image map with 6 buildings. Add proper alt text to all areas. Create an alternative text-based navigation below the map.

What's Next

Learn how to perform Image Testing to verify image accessibility across your site.