WCAG A/AA requirement Priority: Serious
Some labels point to the wrong element
Two or more elements share the same id, and that id is used to connect a label, description or error message to a field or control.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Assistive technology follows the id to find the right text. When it is duplicated, a screen reader may read the label or error of a different field, for example the billing address instead of the delivery address, or a filter name that belongs to another filter.
Who is affected
- blind customers
- screen reader users
- voice control users
How to fix it
Make every id unique on the page, especially those referenced by aria-labelledby, aria-describedby, aria-controls or <label for>. Repeated blocks (product cards, quick-view pop-ups, mobile and desktop menus) should generate ids with a suffix, such as the product or section id. Check each reported case: axe flags it for manual review.
On Shopify
Often caused by a section or snippet rendered twice (desktop and mobile header, product cards, quick-view pop-ups) with a fixed id. Add a unique suffix in the Liquid code, for example the section.id or product.id; app widgets must be fixed by the app developer.
On Shoptet (CZ)
Usually comes from the template or from custom code added several times. Fix your own custom code first; for the template, ask Shoptet or a Shoptet partner.
On PrestaShop
Usually in theme .tpl templates or modules that output the same block more than once, such as product miniatures or a menu shown for mobile and desktop. Make ids unique in the theme or overridden module templates.
On WooCommerce
Common with page builders and widgets that are placed twice (mobile and desktop menus, repeated forms) and with plugins that hard-code ids. Fix ids in the child theme or widget settings; report plugin output 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 duplicate-id-aria.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some table headers do not describe any data
WCAG 1.3.1 A
-
Clickable elements are nested inside each other
WCAG 4.1.2 A
-
A table's title is written inside a table cell
WCAG 1.3.1 A
-
Some videos or sounds start playing with audio by themselves
WCAG 1.4.2 A