Image-map areas must have alternative text

Rule area-alt · Images & non-text content · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Each clickable <area> in an image map is a link. Without alt text its destination is unannounced.

How to fix#

Add an alt attribute describing the link destination to every <area> that has an href (aria-label or aria-labelledby also work). An area that is not meant to be a link should lose its href rather than get an empty alt. The <img> using the map still needs its own alt describing the whole picture.

Example#

<map name="m"><area shape="rect" coords="0,0,50,50" href="/home"></map>

<map name="m"><area shape="rect" coords="0,0,50,50" href="/home" alt="Home"></map>

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

2.4.4 Link Purpose (In Context) — Level A#

The purpose of each link should be clear from its text (or its programmatically-associated context).

Understanding 2.4.4

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Image Maps