Accessibility Insights

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

  • title attribute

Better

  • aria-label

Best

  • aria-labelledby attribute
  • alt attribute

Example

 

Fail

An image map of a business's locations is comprised of three <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>
 

Pass

Each <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>

About this rule

This rule passes if ANY of the following is true:

  • Element has a non-empty alt attribute
  • Element has an aria-labelledby attribute that references an element or elements containing text
  • Element has a non-empty aria-label attribute
  • Element has a non-empty title attribute

More examples