Skip to content
English
  • There are no suggestions because the search field is empty.

A: Active < area> elements must have alternative text (WCAG 2.4.4 + 4.1.2) 

area-alt

Ensures that <area> elements have alternative texts.

This means

Interactive image areas (<area href="…">) in client-side image maps require a recognizable name. Without alt (or an allowed equivalent naming), screen readers and similar tools do not know where the hotspot leads.

Impact

The target and purpose of the links remain unclear. Users with screen readers or low vision lose orientation, abandon processes, and this constitutes a WCAG violation (A/AA).

Recommendation

  • For each active <area> set a precise alt text (short, descriptive of the target).
  • No purely decorative hotspot: If without function, remove href (make not focusable).
  • Use of aria-label only in exceptional cases; prefer alt, as it is HTML-compliant and widely supported.
  • For multiple hotspots: use unique alternative texts; describe <img> itself meaningfully.

Example

Problematic

<img src="standorte.png" usemap="#map" alt="Locations">
<map name="map">
  <area shape="rect" coords="10,10,120,60" href="/berlin">        <!-- no name -->
  <area shape="circle" coords="200,80,40" href="/hamburg" alt="">  <!-- empty name -->
  <area shape="poly" coords="..." href="/muenchen" title="Munich"> <!-- title≠name -->
</map>

Better

<img src="standorte.png" usemap="#map" alt="Locations in Germany">
<map name="map">
  <area shape="rect"   coords="10,10,120,60" href="/berlin"   alt="Branch Berlin">
  <area shape="circle" coords="200,80,40"    href="/hamburg"  alt="Branch Hamburg">
  <area shape="poly"   coords="..."          href="/muenchen" alt="Branch Munich">
  <!-- Decorative? Then without href (not interactive) -->
  <!-- <area shape="rect" coords="..." alt="Decorative"> -->
</map>

Related WCAG criterion:
WCAG 2.4.4 – Link purpose
WCAG 4.1.2 – Name, Role, Value