WCAG A/AA requirement Priority: Minor
A clickable image only works with a mouse
The page uses a server-side image map: a linked image where the server decides what to open from the exact spot clicked, for example an old store-locator map or a clickable catalogue picture.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Keyboard and screen reader users cannot choose an area of the image, and nothing tells them what the areas are. Whatever sits behind those clicks is out of their reach.
Who is affected
- keyboard users
- screen reader users
- voice control users
How to fix it
Replace the server-side image map (an <img ismap> inside a link) with normal text links or buttons for each destination. If you need a clickable picture, use a client-side image map (<map> with <area> elements that each have alt text) or separate linked images. Keeping a text list of the same links next to the image also helps.
On Shopify
Very rare; Shopify themes do not use this technique. If it appears, look for old HTML pasted into a page or a legacy app, and replace it with normal links.
On Shoptet (CZ)
Very rare; templates do not use it. If it appears, it is in HTML pasted into a page; replace it with normal links.
On PrestaShop
Very rare; usually old HTML in a CMS page or a legacy module. Replace it with normal links in the content or in the module's .tpl template.
On WooCommerce
Very rare; usually old HTML in a page, a legacy plugin or content migrated from an older site. Replace it with normal links or an image-map plugin that outputs alt text for each area.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 2.1.1 (A) Keyboard |
| WCAG 2.1 | 2.1.1 (A) Keyboard |
| WCAG 2.0 | 2.1.1 (A) Keyboard |
| EN 301 549 4.1.1 | 9.2.1.1 |
| EN 301 549 3.2.1 | 9.2.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.1.1 |
Automated check: axe-core rule server-side-image-map.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some headings are only bold or large text
WCAG 1.3.1 A
-
Some switches and checkboxes have no name
WCAG 4.1.2 A
-
Large tables have cells without headers
WCAG 1.3.1 A
-
Some links do not say where they go
WCAG 2.4.4 A