R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Accessible Image Maps: Ensuring Elements Have Alternate Text

  • Home
  • Blog
  • Accessible Image Maps: Ensuring Elements Have Alternate Text
  • June 1, 2025

Accessible Image Maps: Ensuring <area> Elements Have Alternate Text

Rule ID: area-alt
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To ensure image maps are accessible, each <area> element within an image map must have a descriptive text alternative using one of the following attributes:

  • alt

  • aria-label

  • aria-labelledby

These attributes provide critical context to users relying on screen readers.

Example: Correct Use of <area> Elements

html
<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" />
<!-- More area elements as needed -->
</map>

Each <area> is assigned a unique alt value that describes the destination or purpose of the link.

What to Avoid

Do not use server-side image maps (i.e., <img ismap>), as they:

  • Do not support keyboard navigation.

  • Fail to provide alternative text for the interactive regions.

  • Are generally inaccessible to assistive technologies.

Example of bad practice:

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

Why it Matters

Screen readers cannot interpret visual content. When an image map lacks alt text for its <area> elements:

  • Screen readers may announce unhelpful information like the image filename.

  • Users who are blind or have low vision miss crucial navigational or contextual cues.

  • The interactive purpose of different hotspots is lost, making navigation confusing or impossible.

Proper alt text ensures that all users, regardless of ability, can understand and interact with the content.

Rule Description

An image map allows multiple interactive regions within a single image. For accessibility:

  • Each region (<area>) must have a descriptive alternative text.

  • The image itself should also have an alt attribute describing the overall context.

This ensures assistive technologies can convey both the overall image meaning and the function of each hotspot.

The Algorithm (in Simple Terms)

  1. Look for any <img> element with a usemap attribute.

  2. Check if the referenced <map> contains <area> elements.

  3. For each <area>:

    • Ensure it includes a valid alt, aria-label, or aria-labelledby attribute.

    • Ensure the text value is not empty.

If any <area> lacks this descriptive labeling, the image map fails accessibility requirements.

Tags:
Share:

Leave A Comment