WCAG A/AA requirement Priority: Serious
Custom menus or lists are built incorrectly
Some custom components, such as menus, tab lists or listboxes, do not contain the items they need inside them.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users may hear an empty menu or list, or be unable to move through tabs and options, so navigation and filters become hard to use.
Who is affected
- screen reader users
- blind customers
How to fix it
Give each ARIA container the child roles it requires, for example role="menuitem" inside role="menu", role="tab" inside role="tablist", role="option" inside role="listbox". If the component is not a real menu, remove the role instead.
On Shopify
Usually theme menus, tabs or app widgets that use ARIA roles. Fix the roles in the theme's Liquid sections and JavaScript; report app widgets to the developer.
On Shoptet (CZ)
Usually template menus or tabs. Report it to Shoptet or a partner.
On PrestaShop
Usually menus, tabs or faceted search modules. Fix it in the theme's or module's templates and JavaScript.
On WooCommerce
Usually menus, tabs or sliders from the theme, page builders or plugins. Fix it in child-theme code or report it to the plugin author.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 1.3.1 (A) Info and Relationships |
| WCAG 2.1 | 1.3.1 (A) Info and Relationships |
| WCAG 2.0 | 1.3.1 (A) Info and Relationships |
| EN 301 549 4.1.1 | 9.1.3.1 |
| EN 301 549 3.2.1 | 9.1.3.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.3.1 |
Automated check: axe-core rule aria-required-children.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Buttons have a hidden name that differs from their visible text
WCAG 2.5.3 A
-
Text spacing cannot be adjusted
WCAG 1.4.12 AA
-
Links in text look like normal text
WCAG 1.4.1 A
-
The site works in only one screen orientation
WCAG 1.3.4 AA