WCAG A/AA requirement Priority: Moderate
Accessibility attributes are used in the wrong situation
Some elements use accessibility attributes that their type allows only under certain conditions, for example aria-checked on a real checkbox or tree-table attributes on an ordinary table row.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
A screen reader may announce a state that differs from what is on screen, for example "not checked" on a ticked "I accept the terms" box or a filter option, or read table rows as levels of a tree. Customers can make wrong choices in filters or checkout forms.
Who is affected
- screen reader users
- blind customers
How to fix it
On native checkboxes remove aria-checked and let the checked state of the input speak for itself. Use row attributes such as aria-level, aria-posinset, aria-setsize and aria-expanded on table rows only inside a role="treegrid". Prefer native HTML elements over ARIA where possible.
On Shopify
Usually custom filter, variant or checkbox code in the theme or an app. Find the element in the theme's Liquid and JavaScript files and remove the conflicting attribute; report app widgets to the developer.
On Shoptet (CZ)
Usually template filters or forms, or add-ons. Report it to Shoptet or a Shoptet partner.
On PrestaShop
Usually faceted search, product-options or form modules. Fix it in the theme's .tpl and JavaScript files or overridden module templates.
On WooCommerce
Usually filter, product-options or form plugins, or a page builder. Fix it 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 aria-conditional-attr.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some links do not say where they go
WCAG 2.4.4 A
-
A label or value stands outside its list
WCAG 1.3.1 A
-
Hidden elements can still be reached with the keyboard
WCAG 4.1.2 A
-
Custom input fields have no label
WCAG 4.1.2 A