These docs are for CORA 0.10, an older release. Read this page in the newest docs.
Image map areas need alternative text
- Rule:
axe/area-alt - Checks: Active <area> elements must have alternative text
- WCAG: 2.4.4, 4.1.2
- Fix class:
content: A fix needs authored text.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
- People who control the page by speaking.
How to fix it
Section titled “How to fix it”An <area> has no alt, or an empty one
Section titled “An <area> has no alt, or an empty one”Give each linked <area> an alt that says where it goes, using the words shown in that part of the image where there are any. Decide the words from the destination, not from the shape.
<img src="campus-map.png" alt="Campus map" usemap="#campus"><map name="campus"> <area shape="rect" coords="0,0,120,80" href="/library" alt="Library"> <area shape="rect" coords="120,0,240,80" href="/sports-center" alt="Sports center"></map>The <img> has an alt but its areas do not
Section titled “The <img> has an alt but its areas do not”Keep the image’s alt about the map as a whole, and give every <area> its own. Assistive technology lists each area as a separate link.
Fixes that fail
Section titled “Fixes that fail”Describing the region, such as alt="Blue rectangle" or alt="Top left"
Section titled “Describing the region, such as alt="Blue rectangle" or alt="Top left"”People need to know where the link goes, not what the region looks like or where it sits.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.