# Active <area> elements must have alternative text

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/area-alt
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An image map is an `<img>` element linked to a `<map>` element via the `usemap` attribute. Inside the `<map>`, individual `<area>` elements define clickable hotspots that function as links. Each of these `<area>` elements is essentially a link, and like all links, it must have an accessible name that describes its purpose.

## Why This Is an Accessibility Problem

Screen readers cannot interpret graphical content. When a user navigates to a clickable `<area>` that lacks alternative text, the screen reader has no meaningful label to announce. In many cases, it will fall back to reading the link URL or the image filename — neither of which conveys the purpose of the link. This critically impacts:

- **Blind users** and **deafblind users** who rely entirely on screen readers to navigate and interact with content.
- **Users with mobility impairments** who use assistive technologies like switch devices or voice control, which depend on accessible names to identify interactive elements.

This rule relates to the following WCAG success criteria:

- **WCAG 2.4.4 – Link Purpose (In Context) (Level A):** The purpose of each link must be determinable from the link text alone, or from the link text combined with its programmatically determined context. An `<area>` without alternative text has no discernible purpose.
- **WCAG 4.1.2 – Name, Role, Value (Level A):** All user interface components must have a programmatically determined name. An `<area>` element is an interactive component, so it requires an accessible name.

This rule also applies under **Section 508**, **EN 301 549**, and **Trusted Tester** requirements.

## How to Fix It

Ensure every active `<area>` element inside a `<map>` has an accessible name by using one of these methods:

1. **`alt` attribute** (preferred) — Add descriptive `alt` text directly to the `<area>` element.
2. **`aria-label` attribute** — Provide a text label via `aria-label`.
3. **`aria-labelledby` attribute** — Reference another element that contains the label text.

The `alt` text should clearly describe the purpose or destination of the link, not the visual appearance of the hotspot region.

Also, make sure the parent `<img>` element has its own `alt` attribute describing the image as a whole.

## Examples

### Incorrect: `<area>` Elements Without Alternative Text

In this example, the `<area>` elements have no `alt` text. Screen readers cannot communicate what each clickable region does.

```html
<img src="solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#solar-map">
<map name="solar-map">
  <area shape="rect" coords="115,158,276,192" href="https://example.com/mercury">
  <area shape="rect" coords="115,193,276,234" href="https://example.com/venus">
  <area shape="rect" coords="115,235,276,280" href="https://example.com/earth">
</map>
```

### Correct: `<area>` Elements With `alt` Text

Each `<area>` now has a descriptive `alt` attribute that communicates the link's purpose.

```html
<img src="solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#solar-map">
<map name="solar-map">
  <area shape="rect" coords="115,158,276,192" href="https://example.com/mercury" alt="Mercury">
  <area shape="rect" coords="115,193,276,234" href="https://example.com/venus" alt="Venus">
  <area shape="rect" coords="115,235,276,280" href="https://example.com/earth" alt="Earth">
</map>
```

### Correct: Using `aria-label` Instead of `alt`

```html
<img src="floor_plan.png" alt="Office floor plan" width="600" height="400" usemap="#office-map">
<map name="office-map">
  <area shape="rect" coords="0,0,200,200" href="/rooms/conference-a" aria-label="Conference Room A">
  <area shape="rect" coords="200,0,400,200" href="/rooms/kitchen" aria-label="Kitchen">
</map>
```

### Incorrect: Server-Side Image Map

Server-side image maps use the `ismap` attribute and rely on mouse click coordinates sent to the server. These are not keyboard accessible and provide no text alternatives for individual regions. Avoid this pattern entirely.

```html
<a href="/maps/nav.map">
  <img src="navbar.gif" alt="Navigation" ismap>
</a>
```

Instead, replace server-side image maps with client-side image maps (`usemap` and `<map>`) that include proper `alt` text on each `<area>`, or use a different navigational pattern altogether such as a standard list of links.