Active <area> elements must have alternate text

Rule ID: area-alt
Ruleset: axe-core 3.2
User Impact: Critical
WCAG: 1.1.1

What if your accessibility tools could do more?

Axe can catch a lot of accessibility issues, but what if accessibility tools could do more? Join our beta program for a new tool that takes an exciting new approach to accessibility testing.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Deafblindness
  • Mobility/Dexterity

Requirement(s)

  • WCAG 2.1 (A): MUST
  • WCAG 2.0 (A): MUST
  • Section 508: MUST

WCAG Success Criteria

  • 1.1.1 Non-text Content

Section 508 Guidelines

  • 1194.22 (a) Text equivalent for non-text elements

How to Fix the Problem

Ensure each clickable <area> within an image map has an alt, aria-label or aria-labelledby attribute value that describes the purpose of the link.

<img> elements with usemap attribute values identify image maps that use a set of <map> tags enclosing clickable hotspots defined by area attribute values. An additional alt attribute is required to define alternate text for each area:

<img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
    <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
    <!-- Remaining hotspots in image map... -->
</map>

Bad Example

Don't use server-side image maps that rely on mouse click coordinates. These maps are not keyboard accessible, and do not provide text alternatives to the actionable areas of the image map.

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

Why this is Important

Ensure each clickable <area> within an image map has an alt, aria-label or aria-labelledby attribute value that describes the purpose of the link.

<img> elements with usemap attribute values identify image maps that use a set of <map> tags enclosing clickable hotspots defined by area attribute values. An additional alt attribute is required to define alternate text for each area:

<img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
    <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
    <!-- Remaining hotspots in image map... -->
</map>

Bad Example

Don't use server-side image maps that rely on mouse click coordinates. These maps are not keyboard accessible, and do not provide text alternatives to the actionable areas of the image map.

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

Rule Description

An image map is a single image with many clickable areas. Like all images, an image map must have alternate text for each of the different clickable areas, as well as for the larger image itself, since screen readers have no way of translating graphics into text.

The Algorithm (in simple terms)

Ensures area elements of image maps have alternate text.

Resources

Refer to the complete list of axe 3.2 rules.