Active <area> elements must have alternative text
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every clickable <area> must have descriptive alt text.
Why this matters and how to fix it
Why this matters
Screen reader users rely on text alternatives to understand the purpose of image map controls. Without an accessible name on an <area> element, users cannot determine what action it performs or which part of the image it refers to.
How to fix this issue
Provide a meaningful `alt` attribute for every clickable <area> element. The text should describe the function or destination of the clickable region (e.g., “View product details”). For decorative areas, use `alt=""` so screen readers ignore them.
Developer guidance
Although image maps are less common, ensure every interactive area has a clear text alternative. Test with a screen reader by tabbing to the <area> and confirming that the name is announced correctly. Consider replacing image maps with semantic HTML elements when possible.
Code examples
Incorrect Implementation
<map name="m"><area href="/product"></map>Correct Implementation
<map name="m"><area href="/product" alt="View product details"></map>Real-World Examples
Before
<map name="homepage"><area href="/about"></map> <!-- No description, screen reader announces only 'link' -->After
<map name="homepage"><area href="/about" alt="About us"></map> <!-- Screen reader announces 'About us' -->Manual testing
- 1. Inspect each <area> element in the image map.
- 2. Verify that all clickable areas have a meaningful `alt` attribute.
- 3. For decorative areas, ensure `alt=""` is used.
- 4. Navigate the image map with a screen reader and confirm that each interactive area is announced correctly.
- 5. Ensure that no interactive region is left without a descriptive text alternative.
Trusted by organizations across Europe working toward WCAG and EAA conformance