# Duplicate ID: Why It Still Breaks Accessibility

Source: https://allyway.ai/glossary/duplicate-id

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](https://www.w3.org/WAI/WCAG22/Understanding/parsing.html): 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 |

> **Note:** > **Prioritize referenced IDs**
> A duplicate id on two decorative `div` elements is clean-up work. A duplicate id that a label or ARIA attribute points to is a real barrier – fix those first. Audits based on WCAG 2.0 or 2.1, or on standards that reference them such as [EN 301 549](https://allyway.ai/regulations/en-301-549), may still list 4.1.1 separately.

## Examples

```html title="Example"
<!-- 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](https://allyway.ai/glossary/missing-form-label). With `aria-labelledby`, an [icon button](https://allyway.ai/glossary/icon-button) that borrows its name from a repeated element can end up with the wrong name, which confuses voice control users.

**Do:** Do

Generate ids from a unique prefix per component instance (`newsletter-email`, `product-42-title`), and give every repeated widget its own set of ids.

**Don't:** Don't

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

Q: Is a duplicate ID a WCAG failure?
A: 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.

Q: Why was 4.1.1 Parsing removed?
A: 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.

Q: What happens when two elements have the same ID?
A: 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.

Q: How do I find duplicate IDs on my website?
A: Check forms and repeated components first, because that is where duplicates matter. The [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) also shows the label and name problems they cause, measured against [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2).