id attribute value must be unique

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, 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.

<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.

<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.

<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

<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.

<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.

<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>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Failure of Success Criterion 4.1.1 due to duplicate values of type ID

→