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 precisealttext (short, descriptive of the target). - No purely decorative hotspot: If without function, remove
href(make not focusable). - Use of
aria-labelonly in exceptional cases; preferalt, 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