Back to Info and Examples for Accessibility Insights for Web
area-alt
Interactive <area> elements (those with a valid href or which have been made focusable and interactive by use of the tabindex attribute and scripting) must have alternative text.
Why it matters
An image map is a single image with multiple selectable areas. People with good vision can infer the purpose of each clickable area from its visual aspects. People who use screen readers or other assistive technologies rely on alternative text to communicate the purpose of each area.
How to fix
Provide alternative text for each <area> element using ONE of the following methods.
Good
titleattribute
Better
aria-label
Best
aria-labelledbyattributealtattribute
Example
Fail
<area> elements, each representing a business location.
The <area> elements do not have any alternative text. When an assistive technology user selects an <area>, its href value might (or might not) be announced. In any case, the href value isn't helpful.<p>Select a location to see our business hours:</p>
<img src="locations.png" width="800" height="400" alt="Map of business locations" usemap="#locations-map">
<map name="locations-map">
<area shape="rect" coords="0,0,200,400" href="location1.htm">
<area shape="rect" coords="0,0,400,400" href="location2.htm">
<area shape="rect" coords="0,0,600,400" href="location3.htm">
</map>
<img src="locations.png" width="800" height="400" alt="Map of business locations" usemap="#locations-map">
<map name="locations-map">
<area shape="rect" coords="0,0,200,400" href="location1.htm">
<area shape="rect" coords="0,0,400,400" href="location2.htm">
<area shape="rect" coords="0,0,600,400" href="location3.htm">
</map>
Pass
<area> element has an alt attribute that identifies its corresponding business location. All users have the information they need to make an informed selection.<p>Select a location to see our business hours:</p>
<img src="locations.png" width="800" height="400" alt="Map of business locations" usemap="#locations-map">
<map name="locations-map">
<area shape="rect" coords="0,0,200,400" alt="Corporate headquarters" href="location1.htm">
<area shape="rect" coords="0,0,400,400" alt="Elm Street store" href="location2.htm">
<area shape="rect" coords="0,0,600,400" alt="Maple Street store" href="location3.htm">
</map>
<img src="locations.png" width="800" height="400" alt="Map of business locations" usemap="#locations-map">
<map name="locations-map">
<area shape="rect" coords="0,0,200,400" alt="Corporate headquarters" href="location1.htm">
<area shape="rect" coords="0,0,400,400" alt="Elm Street store" href="location2.htm">
<area shape="rect" coords="0,0,600,400" alt="Maple Street store" href="location3.htm">
</map>
About this rule
This rule passes if ANY of the following is true:
- Element has a non-empty
altattribute - Element has an
aria-labelledbyattribute that references an element or elements containing text - Element has a non-empty
aria-labelattribute - Element has a non-empty
titleattribute