WCAG A/AA requirement Priority: Serious
Hidden elements can still be reached with the keyboard
Some parts of the page are hidden from screen readers but still receive keyboard focus.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Keyboard users jump into invisible links, and screen reader users land on silent or unnamed elements. In closed menus or pop-ups this makes the shop confusing to navigate.
Who is affected
- screen reader users
- keyboard users
- blind customers
How to fix it
Do not put focusable elements inside aria-hidden="true". When hiding a menu or dialog, also hide it from focus: use the hidden attribute, display:none, inert, or tabindex="-1" on its controls.
On Shopify
Usually off-canvas menus, drawers, pop-ups or carousels in the theme or apps. Fix the hiding logic in the theme's JavaScript or Liquid; report app widgets to the developer.
On Shoptet (CZ)
Usually template menus, carousels or pop-ups. Report it to Shoptet or a partner.
On PrestaShop
Usually mobile menus, carousels or modal modules. Fix it in the theme's templates and JavaScript or report it to the module developer.
On WooCommerce
Usually mobile menus, sliders, pop-up or cookie plugins. Fix it in child-theme code 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 aria-hidden-focus.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some vector graphics have no text description
WCAG 1.1.1 A
-
Embedded content has no name
WCAG 4.1.2 A
-
A list is built incorrectly
WCAG 1.3.1 A
-
Checkout fields are not filled in automatically
WCAG 1.3.5 AA