How to fix: duplicate id attributes

What it looks like in the wild

aria-describedby and label-for break unpredictably.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Multiple elements with the same id break attribute references.

The wrong pattern (avoid)

<label for="email">A</label><input id="email">
<label for="email">B</label><input id="email">

The right pattern (copy this)

<label for="email-a">A</label><input id="email-a">
<label for="email-b">B</label><input id="email-b">

Notes from real audits

• Duplicate IDs break aria-describedby, aria-labelledby, and label[for] — the browser picks the first match arbitrarily.

• React component re-use is the #1 cause: the same component with a hardcoded id="email" rendered twice creates a duplicate.

• Use generated IDs (useId() in React 18+, or a UUID) for inputs inside reusable components.

• Automated scanners catch all duplicate IDs reliably — run an axe scan before every release to prevent this class of regression.