Duplicate ID: Why It Still Breaks Accessibility
Also called: Duplicate id attribute, ID attribute value must be unique, Non-unique ID
Definition
A duplicate ID is an id value used on more than one element of the same page. Labels, ARIA attributes and anchor links that point to that id then reach only the first element, so other fields and controls lose their name or description.
A duplicate ID is the scanner error for an id value that appears on more than one element of a page. Tools report it as "Duplicate ID", "ID attribute value must be unique" or "Duplicate id referenced by ARIA". Since WCAG 2.2, a duplicate ID is no longer a failure by itself – but whenever a label or ARIA attribute points to it, it still breaks accessibility in a way users notice.
What it means
In WCAG 2.0 and 2.1, success criterion 4.1.1 Parsing required that "any IDs are unique". W3C has since marked that criterion as obsolete and removed in WCAG 2.2: assistive technology no longer parses HTML itself but relies on the browser, so most parsing errors no longer cause problems. W3C adds that many issues that would have failed 4.1.1 will fail Info and Relationships (1.3.1) or Name, Role, Value (4.1.2) instead. That is exactly the case for duplicate IDs.
The HTML specification still requires every id to be unique. When it is not, the browser resolves references to the first matching element in the page. Everything that relies on an id reference is affected:
| Reference | What goes wrong with a duplicate ID | WCAG impact |
|---|---|---|
<label for="email"> |
Only the first field gets the label; the second is unlabeled | 1.3.1, 4.1.2 |
aria-labelledby / aria-describedby |
The name or hint comes from the wrong element | 4.1.2 |
aria-controls, headers in tables |
Relationships point to the wrong element | 1.3.1 |
Anchor links (href="#top") |
Focus jumps to the first match only | Usability |
| Duplicate ID nobody references | No effect for users | Best practice |
Examples
<!-- Duplicate ID: the newsletter form in the footer reuses "email" -->
<label for="email">Your email</label>
<input id="email" type="email"> <!-- contact form -->
<label for="email">Newsletter email</label>
<input id="email" type="email"> <!-- footer: the label points to the first field -->
<!-- Fixed: unique ids per form -->
<label for="contact-email">Your email</label>
<input id="contact-email" type="email">
<label for="newsletter-email">Newsletter email</label>
<input id="newsletter-email" type="email">The second field above is announced without a name – the same result as a missing form label. With aria-labelledby, an icon button that borrows its name from a repeated element can end up with the wrong name, which confuses voice control users.
Generate ids from a unique prefix per component instance (newsletter-email, product-42-title), and give every repeated widget its own set of ids.
Hard-code ids in a component that appears several times per page, copy and paste form markup between sections, or use ids for styling where a class would do.
How to fix a duplicate ID
Questions
Is a duplicate ID a WCAG failure?
Not by itself in WCAG 2.2, because 4.1.1 Parsing was removed. It fails 1.3.1 or 4.1.2 when it breaks a label, name or relationship – for example when a label or aria-labelledby points to a duplicated id.
Why was 4.1.1 Parsing removed?
According to W3C, assistive technology used to parse markup itself and now relies on the browser, and browsers handle parsing errors much better. The remaining real problems are covered by other criteria.
What happens when two elements have the same ID?
References resolve to the first matching element in the page. Labels, ARIA names and descriptions, and anchor links therefore all point to the first element, and the others lose them.
How do I find duplicate IDs on my website?
Check forms and repeated components first, because that is where duplicates matter. The free WCAG scanner also shows the label and name problems they cause, measured against WCAG 2.2.
Related terms
Missing Form Label: Error Explained and Fixed
A missing form label means an input field, checkbox, select or textarea has no programmatically associated label or other accessible name. Screen readers announce only the field type, so users do not know what to enter.
Read definition: Missing Form Label: Error Explained and FixedIcon Button: How to Give It an Accessible Name
An icon button is a button that shows only a symbol – a magnifier, a cross, three lines – and no visible text. To be accessible it needs an accessible name in code that tells assistive technology what the button does.
Read definition: Icon Button: How to Give It an Accessible NameEmpty Button: What the Error Means and How to Fix It
An empty button is a button element with no accessible name – no text, no aria-label and no alt text on an image inside it. Screen readers announce only that it is a button, not what it does.
Read definition: Empty Button: What the Error Means and How to Fix It