area-alt
Web validation
<area> elements must have alternate text.An image map is a single picture divided into separate hotspots (<area>). Each hotspot acts like a link, so it needs an accessible name. Without one, assistive technology can only guess or ignore the link, leaving people unsure what each region does. Giving every <area> an alt, aria-label, or aria-labelledby value supplies that essential context.
Pass Patterns
Using the alt attribute
Every hotspot has an alt attribute that describes where the link leads.
<img src="../media/world.jpg" usemap="#world-map" />
<map name="world-map">
<area
alt="North America"
href="https://en.wikipedia.org/wiki/North_America"
coords="31,141,339,347"
shape="rect" />
<area
alt="South America"
href="https://en.wikipedia.org/wiki/South_America"
coords="263,586,387,376"
shape="rect" />
<!-- Remaining hotspots in image map... -->
</map>Using the aria-label attribute
aria-label provides the accessible name when an alt attribute is not ideal.
<img src="../media/world.jpg" usemap="#world-map" />
<map name="world-map">
<area
aria-label="North America"
href="https://en.wikipedia.org/wiki/North_America"
coords="31,141,339,347"
shape="rect" />
<area
aria-label="South America"
href="https://en.wikipedia.org/wiki/South_America"
coords="263,586,387,376"
shape="rect" />
<!-- Remaining hotspots in image map... -->
</map>Fail Patterns
No text alternatives
Hotspots are missing any accessible name.
<img src="../media/world.jpg" usemap="#world-map" />
<map name="world-map">
<area
href="https://en.wikipedia.org/wiki/North_America"
coords="31,141,339,347"
shape="rect" />
<area
href="https://en.wikipedia.org/wiki/South_America"
coords="263,586,387,376"
shape="rect" />
<!-- Remaining hotspots in image map... -->
</map>Server-side image map
The server-side image map relies on click coordinates, so no hotspot can be named or reached by keyboard.
<a href="/maps/nav.map">
<img src="/images/navbar.gif" ismap />
</a>WCAG techniques
Sufficient techniques
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page with the image map.
- Move through the image map links.
Expected results: The reader announces each hotspot, such as “North America, link”.
Actual results: The reader announces only the image filename or skips the hotspot.
FAQ
How does this issue relate to SC 2.4.4 Link Purpose (In Context)?
SC 2.4.4 requires that every link’s purpose be clear from its accessible name or its surrounding context. An unnamed <area> violates that requirement because assistive technology cannot convey where the hotspot will take the user.
Why is this issue marked as Critical?
Without an accessible name, people who rely on assistive technology cannot understand or operate image-map links, blocking navigation entirely. The barrier appears across modern browsers and screen readers, so it represents a severe loss of functionality for many users.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 2.4.4 Link Purpose (In Context) (A) | The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context, except where the purpose would be ambiguous to users in general. |
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.2.4.4 Link Purpose (In Context) | Same as the WCAG text. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 2.4.4-link-purpose, 6.A | The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context. |