Fix "Duplicate ID referenced by ARIA" in HTML
Why it's a problem
aria-labelledby, aria-describedby or a <label for> point to their target by id. If two elements share the same id, the browser takes the first one: the field gets another field's label or description, often with nothing visible on screen.
How to fix it — HTML
Make every id unique in the page. The typical case is a reused component (card, repeated form, modal) with a hard-coded id: generate it per instance — useId() in React, a counter or prefix elsewhere.
<!-- Le même composant, rendu deux fois -->
<label for="email">E-mail de facturation</label>
<input id="email" type="email">
<label for="email">E-mail de contact</label>
<input id="email" type="email"><label for="email-facturation">E-mail de facturation</label>
<input id="email-facturation" type="email">
<label for="email-contact">E-mail de contact</label>
<input id="email-contact" type="email">Check your site in 30 seconds
Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.
Free scan