WCAG A/AA requirement Priority: Serious
Clickable elements are nested inside each other
Some clickable elements sit inside other clickable elements, for example a wishlist button inside a clickable product card.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader and keyboard users may not be able to reach or tell apart the inner control, so they may miss quick-add or wishlist actions, or open the wrong thing.
Who is affected
- screen reader users
- keyboard users
- voice control users
How to fix it
Do not put links, buttons or inputs inside another link or button, or inside an element with role="button" or similar. Make the card's main link and its buttons siblings; extend the main link's clickable area with CSS if needed.
On Shopify
Usually product cards with quick-add or wishlist buttons from the theme or apps. Restructure the card in the theme's Liquid snippet; report app buttons to the developer.
On Shoptet (CZ)
Usually product cards in the template. Report it to Shoptet or a partner.
On PrestaShop
Usually product miniature templates with quick-view or wishlist buttons. Restructure the theme's product miniature .tpl template.
On WooCommerce
Usually product loops from the theme, page builders or wishlist plugins. Restructure the template in a child theme or report it to the plugin author.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automated check: axe-core rule nested-interactive.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
The page declares two different languages
WCAG 3.1.1 A
-
Accessibility attributes have wrong values
WCAG 4.1.2 A
-
A table's title is written inside a table cell
WCAG 1.3.1 A
-
Clickable elements are nested inside each other
WCAG 4.1.2 A