H24Sufficient technique WCAG 1.1.1 WCAG 2.4.4 WCAG 2.4.9 Level A Partly scanner-detectable

Add alt text to every image map area

An image map turns one picture into several links, and every one of those area elements needs its own alt naming where it leads. The picture itself still needs alt describing the map as a whole. W3C lists H24 as sufficient for 1.1.1 Non-text Content and for link purpose in context, and it is one of the few techniques strong enough to carry link purpose with no surrounding context at all. The boundary is the element. H24 covers area elements, so a modern hotspot map built from an inline SVG and a set of links falls outside it and has to get its names some other way.

How we find it in an audit

A missing or empty alt on an area element is one of the cleanest automated checks there is, so the scanner hands us the list. Then we read it. Region 3 and map link both satisfy a machine and tell a visitor nothing, so we check that every value names a destination somebody would recognize.

How affected users experience it

Screen readers announce each area as a link, one after another. With real alt text a campus map reads as Library, Science building, Car park, and a listener picks the one they wanted. Without it the same map reads link, link, link, and the only route to the library is to guess and go back.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

<img src="campus.png" alt="Campus map. Select a building for details." usemap="#campus">
<map name="campus">
  <area shape="rect" coords="0,0,80,40" href="library.html" alt="Library">
</map>

Fails

<area shape="rect" coords="0,0,80,40" href="library.html">

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA tool can check this
Link in context is descriptiveA tool can check this
Links with identical accessible names and same context serve equivalent purposeA tool finds candidates, you decide
Link is descriptiveA tool can check this
Links with identical accessible names have equivalent purposeA tool can check this

Other ways to satisfy this rule

39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique H24: Providing text alternatives for the area elements of image maps. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.