# id attribute value must be unique

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/duplicate-id
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `id` attribute is the primary mechanism for uniquely identifying an element in the DOM. Many accessibility features depend on `id` references to create relationships between elements — for example, a `<label>` element uses its `for` attribute to point to the `id` of a form input, and `aria-labelledby` or `aria-describedby` attributes reference one or more `id` values to associate descriptive text with a control.

When two or more elements share the same `id`, browsers and assistive technologies have no reliable way to determine which element is being referenced. In practice, most screen readers and client-side scripts will act on only the first element with a given `id` and silently ignore subsequent ones. This means:

- **Screen reader users** may hear incorrect or missing labels for form fields, table cells, or other interactive elements.
- **Keyboard-only users** who rely on skip links or in-page anchors may be taken to the wrong location on the page.
- **Users of voice control software** may be unable to target the correct element by its label.

While duplicate `id` values are technically an HTML validation error (previously addressed by WCAG 1.0 and the now-deprecated WCAG 2.0 Success Criterion 4.1.1 — Parsing), they remain a practical accessibility concern. Valid markup eliminates an entire category of potential accessibility failures, and ensuring unique `id` values is one of the simplest ways to maintain it.

## How to Fix the Problem

1. **Audit your page for duplicate `id` values.** You can use the [W3C Markup Validator](http://validator.w3.org), browser DevTools, or an accessibility testing tool like axe to find them quickly.
2. **Rename any duplicated `id` values** so that each one is unique within the document. Choose descriptive, meaningful names that reflect the element's purpose.
3. **Update all references** to the renamed `id`. Search for any `for`, `aria-labelledby`, `aria-describedby`, `aria-controls`, `headers`, or anchor `href` attributes that pointed to the old `id` and update them to match the new value.
4. **Check dynamically generated content.** If your page injects HTML via JavaScript or server-side templates (e.g., rendering a component multiple times in a loop), make sure each instance generates a unique `id`, such as by appending an index or a unique identifier.

## Examples

### Incorrect: Duplicate `id` Values

In this example, two input elements share the same `id` of `"email"`. The second label's `for` attribute points to `"email"`, but the browser associates it with the first input, leaving the second input effectively unlabeled for assistive technology users.

```html
<label for="email">Personal Email</label>
<input type="email" id="email" name="personal_email">

<label for="email">Work Email</label>
<input type="email" id="email" name="work_email">
```

### Correct: Unique `id` Values

Each input has a distinct `id`, and the corresponding `label` elements reference the correct one.

```html
<label for="personal-email">Personal Email</label>
<input type="email" id="personal-email" name="personal_email">

<label for="work-email">Work Email</label>
<input type="email" id="work-email" name="work_email">
```

### Incorrect: Duplicate `id` in `aria-labelledby` References

Here, two sections use the same `id` for their headings. An `aria-labelledby` reference on the second region will resolve to the first heading instead.

```html
<section aria-labelledby="section-title">
  <h2 id="section-title">Latest News</h2>
  <p>News content here.</p>
</section>

<section aria-labelledby="section-title">
  <h2 id="section-title">Upcoming Events</h2>
  <p>Events content here.</p>
</section>
```

### Correct: Unique `id` Values for `aria-labelledby`

```html
<section aria-labelledby="news-title">
  <h2 id="news-title">Latest News</h2>
  <p>News content here.</p>
</section>

<section aria-labelledby="events-title">
  <h2 id="events-title">Upcoming Events</h2>
  <p>Events content here.</p>
</section>
```

### Incorrect: Duplicate `id` from Repeated Components

A common source of duplicate `id` values is rendering the same component template multiple times.

```html
<div class="card">
  <button aria-describedby="card-desc">Buy Now</button>
  <p id="card-desc">Free shipping on this item.</p>
</div>

<div class="card">
  <button aria-describedby="card-desc">Buy Now</button>
  <p id="card-desc">Ships within 2 days.</p>
</div>
```

### Correct: Unique `id` for Each Component Instance

Append a unique suffix (such as a product ID or index) to each `id`.

```html
<div class="card">
  <button aria-describedby="card-desc-1">Buy Now</button>
  <p id="card-desc-1">Free shipping on this item.</p>
</div>

<div class="card">
  <button aria-describedby="card-desc-2">Buy Now</button>
  <p id="card-desc-2">Ships within 2 days.</p>
</div>
```