WCAG A/AA requirement Priority: Serious
Clickable areas of an image have no description
The page uses an image map (one picture split into several clickable areas), and some of these areas have no text that says where they lead.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users hear only "link" or a file address, for example on a banner that links to different categories or a size chart split into regions. They cannot choose the right area and may miss offers or product pages.
Who is affected
- blind customers
- screen reader users
- voice control users
How to fix it
Give every <area> element with an href a short alt text that names the destination, for example alt="Women's shoes". Better still, replace the image map with ordinary links or buttons laid over or under the image, which also work better on mobile.
On Shopify
Rare in Shopify themes. Usually comes from old HTML pasted into a page, blog post or product description, or from an image-map app. Edit the HTML in the rich-text editor or ask the app developer to add alt text to each area.
On Shoptet (CZ)
Rare in Shoptet templates. Usually comes from HTML inserted into a page or description in the admin; add alt text there, or ask a Shoptet partner if the code is part of the template.
On PrestaShop
Usually comes from HTML pasted into CMS pages or product descriptions, or from a banner module. Add alt text to each <area> in the back-office editor or in the module template.
On WooCommerce
Usually comes from old HTML in pages or product descriptions, or from an image-map or "hotspot" plugin. Add alt text to each area in the editor or plugin settings, or report it to the plugin author.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.2.4.4 |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.2.4.4 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.4.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automated check: axe-core rule area-alt.
dequeuniversity.com, github.com, www.w3.org, www.w3.org
Related checks
-
There is no quick way to skip to the main content
WCAG 2.4.1 A
-
Keyboard users cannot reach some embedded content
WCAG 2.1.1 A
-
The page has no title
WCAG 2.4.2 A
-
Some form fields have more than one label
WCAG 3.3.2 A