Area-alt

Rule ID: area alt

ACT Rules: c487ae
Issue Type: Failure
Impact: Critical
Tags: cat.text-alternatives, wcag2a, wcag244, wcag412, section508, section508.22.a, TTv5, TT6.a, EN-301-549, EN-9.2.4.4, EN-9.4.1.2, ACT, RGAAv4, RGAA-1.1.2

Rule Description

Every <area> element inside an image map must carry descriptive alternative text through the alt attribute. This ensures each clickable region of the map communicates its purpose and destination to assistive technologies.

Why It Matters

Image maps turn a single image into a set of interactive hotspots. Sighted users can see the shapes and labels, so they know exactly where each region leads. Users who rely on assistive technology depend entirely on the alt text to get that same information.

Here is what breaks when the alt attribute is missing:

  • Screen reader users hear nothing useful. A screen reader announces each <area> as a link, but with no alt text it may read out the raw URL, a file name, or simply say “link” with no context. Someone navigating a mall directory would hear “link, link, link” instead of “Food Court,” “Cinema,” or “Parking Level 2.” They cannot make an informed choice, so they either guess or abandon the task.
  • Keyboard-only users lose their bearings. These users tab through each hotspot in sequence. Without a clear text label, there is no visible or announced cue telling them which store or floor is currently focused. The map becomes a stack of anonymous targets.
  • It is a genuine barrier, not a minor annoyance. Because the interactive region is the primary way to reach that content, a missing label can block access to entire sections of a page. That is why this rule carries a Critical impact rating.

Fixing this is one of the fastest, highest value wins in an accessibility audit. Descriptive alt text takes seconds to add and immediately restores parity between visual and non-visual users.

Failing Code Example

The scenario below is a shopping mall directory. Visitors click regions of the floor plan to jump to each destination.

<!-- Shopping mall directory image map -->
<img src="mall-directory.png" usemap="#mall-map" width="800" height="600"
     alt="Riverside Mall three-floor directory">

<map name="mall-map">
  <!-- FAILS: no alt attribute — screen readers announce the raw URL -->
  <area shape="rect" coords="0,0,800,200"
        href="/floors/ground-floor-fashion">

  <!-- FAILS: no alt attribute — this link may be skipped entirely -->
  <area shape="rect" coords="0,201,800,400"
        href="/floors/second-floor-food-court">

  <!-- FAILS: empty regions still need a name for the linked area -->
  <area shape="rect" coords="0,401,800,600"
        href="/floors/third-floor-cinema">
</map>

 Each <area> points to a real destination, but none of them expose a usable name. Scansive flags every one of these hotspots as a failure.

Passing Code Example

Same directory, same coordinates, corrected so every hotspot announces its purpose.

<!-- Shopping mall directory image map -->
<img src="mall-directory.png" usemap="#mall-map" width="800" height="600"
     alt="Riverside Mall three-floor directory">

<map name="mall-map">
  <!-- FIXED: alt describes the destination clearly -->
  <area shape="rect" coords="0,0,800,200"
        href="/floors/ground-floor-fashion"
        alt="Ground floor — fashion and apparel stores">

  <!-- FIXED: descriptive alt so the link is announced correctly -->
  <area shape="rect" coords="0,201,800,400"
        href="/floors/second-floor-food-court"
        alt="Second floor — food court and dining">

  <!-- FIXED: every clickable region now has a meaningful name -->
  <area shape="rect" coords="0,401,800,600"
        href="/floors/third-floor-cinema"
        alt="Third floor — cinema and entertainment">
</map>

The only change is a purposeful alt value on each <area>. Now a screen reader announces “Food Court, link” and a keyboard user knows exactly where focus sits as they tab through the map.

How to Fix

Work through these steps to clear the violation in your own code:

  1. Locate every image map on the page. Search your markup for <map> and usemap to find each active image map.
  2. Add an alt attribute to every <area> element. No functional <area> should ship without one.
  3. Write the label to match the destination or action. Describe where the link goes or what it does, for example alt=”View store hours” rather than alt=”link” or a repeated file name.
  4. Keep each label unique and concise. Avoid duplicate text across hotspots so users can tell regions apart. Skip filler words like “image of” or “click here.”
  5. Reserve empty alt values for decoration only. An alt=”” is valid only when an <area> is purely presentational and has no href. Any hotspot that links somewhere needs real text.
  6. Retest with Scansive. Re-run the scan to confirm the c487ae failure has cleared, then verify manually with a screen reader by tabbing through each hotspot.

Run these checks on every template that renders an image map, and bake the alt requirement into your component standards so the issue never returns.