WCAG A/AA requirement Priority: Serious
Custom controls are missing required information
Some custom controls declare a role but miss information that role needs, such as whether a dropdown is open.
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 know whether a filter is expanded, which option is selected or the value of a slider, so menus and filters become hard to use.
Who is affected
- screen reader users
- blind customers
How to fix it
Add the attributes the role requires, for example aria-expanded on role="combobox" or aria-valuenow on role="slider". Keep them updated with JavaScript as the state changes. Prefer native HTML elements where possible.
On Shopify
Usually custom menus, filters or sliders in the theme or apps. Fix the attributes in the theme's Liquid and JavaScript files; ask app developers to fix their widgets.
On Shoptet (CZ)
Usually template menus or add-ons. Report it to Shoptet or a partner, since the controls are part of the template.
On PrestaShop
Usually theme menus or modules such as faceted search. Fix it in the theme's templates and JavaScript or report it to the module developer.
On WooCommerce
Usually theme menus, page-builder widgets or filter 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-required-attr.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some graphics have no text description
WCAG 1.1.1 A
-
Some text scrolls and cannot be stopped
WCAG 2.2.2 A
-
Links in text look like normal text
WCAG 1.4.1 A
-
Custom menus or lists are built incorrectly
WCAG 1.3.1 A