IDs used in ARIA and label associations must be unique to avoid broken references.

When multiple elements on a page share the same id attribute, any ARIA or label association that references that id will only resolve to the first matching element in the DOM. This means the intended target of an aria-labelledby, aria-describedby, aria-controls, or label[for] reference may not be reached at all. The result is controls that lack accessible names, descriptions that point to the wrong content, or relationships between elements that silently break.

Screen reader users are the most directly affected. If a form input's label[for] attribute points to a duplicated id, the screen reader may announce the label text from an unrelated element, or announce nothing at all. The same applies to aria-labelledby and aria-describedby: when the referenced id appears more than once, browsers return the first element with that id, ignoring any subsequent matches. A user who relies on the announced name or description of a control will receive incorrect or missing information, making the interface difficult or impossible to use.

This rule maps to WCAG success criterion 4.1.2 (Name, Role, Value) at Level A. That criterion requires that all user interface components have names and roles that can be programmatically determined. When a duplicate id breaks the reference between a label and its control, the control's name cannot be programmatically determined, and the page fails this criterion.

How to fix it

The fix depends on your specific page structure. Audit the document for duplicate id values and make each one unique. A few common scenarios:

• A template or component is rendered multiple times on the same page, producing identical id values each time. Append a unique suffix (such as an index or a generated identifier) to each instance.
• A copy-paste error has introduced the same id on two unrelated elements. Rename one of them.
• A label[for] or aria-labelledby reference was written to target one specific element, but a second element with the same id was added later. Update either the duplicate id or the referencing attribute so the association is unambiguous.

After making changes, verify that every aria-labelledby, aria-describedby, aria-controls, and label[for] attribute still resolves to the correct, unique element.

Examples

Duplicate id breaking a label association

In this example, two inputs share the id value "email". The second label's for attribute resolves to the first input, leaving the second input without an accessible name.

<label for="email">Personal email</label>
<input type="email" id="email">

<!-- Later in the same page -->
<label for="email">Work email</label>
<input type="email" id="email">

Fixed: unique id values

Each input has a distinct id, so both labels correctly reference their respective inputs.

<label for="personal-email">Personal email</label>
<input type="email" id="personal-email">

<label for="work-email">Work email</label>
<input type="email" id="work-email">

Duplicate id breaking aria-describedby

Here, two elements share the id "hint". The second input's aria-describedby resolves to the first paragraph, so the user hears the wrong hint text.

<p id="hint">Enter your first name.</p>
<input type="text" aria-label="First name" aria-describedby="hint">

<p id="hint">Enter your last name.</p>
<input type="text" aria-label="Last name" aria-describedby="hint">

Fixed: unique id values for descriptions

<p id="first-name-hint">Enter your first name.</p>
<input type="text" aria-label="First name" aria-describedby="first-name-hint">

<p id="last-name-hint">Enter your last name.</p>
<input type="text" aria-label="Last name" aria-describedby="last-name-hint">

Duplicate id in a repeated component

When rendering the same component multiple times (for example, in a loop), each instance must produce unique id values.

<!-- Two instances of a toggle component with the same id -->
<button aria-controls="panel">Settings</button>
<div id="panel">Settings content</div>

<button aria-controls="panel">Notifications</button>
<div id="panel">Notifications content</div>

Fixed: scoped id values per instance

<button aria-controls="settings-panel">Settings</button>
<div id="settings-panel">Settings content</div>

<button aria-controls="notifications-panel">Notifications</button>
<div id="notifications-panel">Notifications content</div>

Learn more:

W3C Reference

Understanding WCAG 2.1: Parsing

→

W3C Reference

Understanding WCAG 2.1: Name, Role, Value

→

W3C Reference

HTML Technique H93: Ensuring that id attributes are unique on a Web page

→