What This Rule Checks
When navigating a website, users who rely on screen readers depend on descriptive text to understand the purpose of clickable regions within an image map. These regions, defined using <area> elements, must include meaningful accessible names — typically using alt, aria-label, or aria-labelledby.
Even if the alt attribute is present, if the text is too vague or generic (like “Click here” or “Area 1”), screen readers won’t convey useful information. This creates confusion and prevents blind or visually impaired users from understanding what each region does.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Image maps without alt text on <area> elements are a direct violation of WCAG 1.1.1 (Non-text Content) and 4.1.2 (Name, Role, Value). Screen reader users encounter unlabeled hotspots with no indication of where they lead. This is commonly cited in ADA Title III lawsuits.
How to Fix
Use descriptive alt text or ARIA labels: Every <area> must have an accessible name that clearly explains its purpose — not just any text. For example, use alt=”Mercury” instead of alt=”Click here” or alt=”Area 1″.
Avoid server-side image maps: These rely on mouse coordinates and are inaccessible. Use client-side image maps with clearly labeled areas using alt, aria-label, or aria-labelledby.
Code Examples
<!-- Image map area with no alt text -->
<map name="infographic">
<area shape="rect" coords="0,0,100,100" href="/sales">
<area shape="rect" coords="100,0,200,100" href="/support">
</map>
Copy
<!-- Image map area with descriptive alt text -->
<map name="infographic">
<area
shape="rect"
coords="0,0,100,100"
href="/sales"
alt="View sales dashboard">
<area
shape="rect"
coords="100,0,200,100"
href="/support"
alt="Contact support team">
</map>
Copy
Common Mistakes to Avoid
- Using vague alt text like “Area 1” or “Click here” on map areas.
- Forgetting that each <area> needs its own alt, not just the parent <img>.
- Using server-side image maps instead of client-side maps with labeled areas.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: When writing alt text, describe the image’s function and meaning, not just its appearance. For complex images like charts, provide a brief alt attribute and a longer description in surrounding text or a linked resource.
Related WCAG Criteria
- 4.1.2: Name, Role, Value
- 2.4.4: Link Purpose (In Context)