WCAG A/AA requirement Priority: Moderate
Custom menu items or tabs are outside their group
Some custom items, such as menu items, tabs or options, are not inside the group they belong to.
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 not hear that items belong together or how many there are, so menus, tabs and option lists are harder to understand.
Who is affected
- screen reader users
- blind customers
How to fix it
Place each item inside the container role it requires, for example role="tab" inside role="tablist", role="option" inside role="listbox", role="menuitem" inside role="menu" or "menubar". Check wrapper elements without roles in between, or remove roles that are not needed.
On Shopify
Usually theme menus, tabs or app widgets. Fix the structure in the theme's Liquid sections or 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 theme menus or module templates. Fix it in the .tpl templates or JavaScript.
On WooCommerce
Usually theme menus, page-builder tabs 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-parent.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
A clickable image only works with a mouse
WCAG 2.1.1 A
-
Some gauges have no name
WCAG 1.1.1 A
-
The page uses outdated blinking-text markup
WCAG 2.2.2 A
-
A table's title is written inside a table cell
WCAG 1.3.1 A