Active <area> elements must have alternate text

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

Checks the <area> elements of image maps to ensure that they have an alternative text.

Why this is Important

Screen readers have no way of translating graphics into words. It is therefore important that all images, including image maps, have alt text.

If no alternate text is supplied, the screen reader will typically announce the filename of the image. This usually is not very helpful to the user and thus should be avoided.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): MUST
  • Section 508: MUST
  • WCAG 2.1 (A): 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 that each clickable <area> within an image map has an alt, aria-label or aria-labelledby attribute that describes the purpose of the link.

<img> elements with usemap attributes signify image maps that use a set of <map> tags that enclose clickable hotspots defined with area attributes. For each area, an additional alt attribute is needed to define alternate text. This can be done as follows:

<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="" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="" alt="Venus">
    Remaining hotspots in image map...

Bad Example

Don't use server-side image maps because they rely on mouse click coordinates, are not keyboard accessible, and do not allow text alternatives to the actionable areas.

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

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
  • ARIA
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: area-alt