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

Related fixes