Avoid server-side image maps
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Keyboard‑only users must be able to reach and operate all content, including iframes and scrollable regions.
How to fix this issue
Keep iframes in the tab order when they contain focusable content; add descriptive `title`. Make scrollable regions focusable with `tabindex="0"` and ensure keyboard scrolling works.
Developer guidance
Ship a ScrollArea/Iframe component with correct focus management. Add jest-axe tests for keyboard reachability.
Code examples
Incorrect Implementation
<img ismap src="/map.png">Correct Implementation
<img src="/map.png" usemap="#m"><map name="m"><area href="/store" alt="Store"></map>
Trusted by organizations across Europe working toward WCAG and EAA conformance