# Image map <area> elements must have alternative text.

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

Image maps use `<area>` elements to define clickable regions within an image. Each `<area>` element acts as a link, but without alternative text, screen reader users have no way to know what a given region does or where it leads. The screen reader may announce the `href` value (a raw URL), or it may announce nothing at all. Either way, the region is effectively unlabeled and unusable.

This problem affects anyone who relies on assistive technology to interpret non-text content. Screen reader users are the most directly affected group, but speech recognition users can also be blocked if there is no accessible name to use as a voice command target.

## Why this matters

WCAG success criterion 1.1.1 (Non-text Content) requires that all non-text content has a text alternative that serves an equivalent purpose. An `<area>` element without an `alt` attribute fails this requirement because there is no text equivalent for the clickable region.

WCAG success criterion 4.1.2 (Name, Role, Value) requires that all user interface components have an accessible name that can be programmatically determined. Since `<area>` elements function as links, they need an accessible name. The `alt` attribute is the standard mechanism for providing one.

Both criteria are Level A, the baseline conformance level in WCAG.

## How to fix it

Add an `alt` attribute to every `<area>` element. The text should describe the purpose or destination of the clickable region, just as you would write `alt` text for a link. Keep it concise and specific.

If an `<area>` is purely decorative and has no interactive purpose, it should not be in the image map at all. Every `<area>` is inherently a link, so each one needs a meaningful label.

For image maps with many regions or complex layouts, consider replacing the image map with a different approach:

- An SVG image with embedded `<a>` elements, where each link can have its own accessible text.
- A simple list of text links placed near or in place of the image.
- An interactive component built with standard HTML and CSS, which gives more control over accessibility and responsiveness.

Image maps are an older HTML pattern and do not adapt well to different screen sizes. These alternatives are often a better choice for both accessibility and responsive design.

## Examples

### Incorrect: `<area>` elements without `alt` attributes

```html
<img src="office-map.png" usemap="#office" alt="Office floor plan">
<map name="office">
  <area shape="rect" coords="0,0,100,100" href="/kitchen">
  <area shape="rect" coords="100,0,200,100" href="/meeting-room">
  <area shape="rect" coords="200,0,300,100" href="/lobby">
</map>
```

Screen readers cannot determine what each clickable region represents. Users may hear the raw URL or nothing.

### Correct: `<area>` elements with descriptive `alt` attributes

```html
<img src="office-map.png" usemap="#office" alt="Office floor plan">
<map name="office">
  <area shape="rect" coords="0,0,100,100" href="/kitchen" alt="Kitchen">
  <area shape="rect" coords="100,0,200,100" href="/meeting-room" alt="Meeting room">
  <area shape="rect" coords="200,0,300,100" href="/lobby" alt="Lobby">
</map>
```

Each `<area>` now has an `alt` attribute that tells screen reader users what the region is and where the link goes.

### Alternative approach: replacing the image map with a list of links

```html
<img src="office-map.png" alt="Office floor plan">
<ul>
  <li><a href="/kitchen">Kitchen</a></li>
  <li><a href="/meeting-room">Meeting room</a></li>
  <li><a href="/lobby">Lobby</a></li>
</ul>
```

This approach removes the image map entirely and provides standard text links that are accessible by default. It also works well across screen sizes.