Active <area> elements must have alternate text

Why it is important

There are several purposes for alternative text:

• Screen readers provide alternative text for images, helping users with vision problems or cognitive impairments understand the content and function of an image.
• The browser will display alternative text in the place of an image if an image cannot be loaded or if the user has blocked images.
• During the evaluation of the content and purpose of a page, search engines use alternative text.
• Some Assistive Technologies attempt to replace missing text using the file name of the image. However, simply relying on the file name is not sufficient for many reasons. The names of files (e.g., images/nav01.gif) may not be descriptive, and technical specifications are not required to provide this information. When a text alternative is not provided via HTML attributes, some Assistive Technologies may not even read the file name.

Fixing the problem

There should be an alt, aria-label or aria-labelledby attribute value associated with each image map to describe the purpose of the non-text content, so that at least the user knows what it is and why it is there.

Using the usemap attribute, you can identify image maps that contain a set of <map> tags defining clickable hotspots, defined by area attribute values. Alternate text must also be defined for each area using the alt attribute:

<img src="welcome.gif" usemap="#map1"  alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"  href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"  href="media.html" alt="Audio visual lab" />
</map>

Incorrect Example

Don't use server-side image maps that rely on mouse clicks. Text alternatives to the actionable areas of the map aren't provided for these maps, and they aren't keyboard accessible.

<a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>