Corriger « Identifiant référencé par ARIA dupliqué » en HTML
Pourquoi c'est un problème
aria-labelledby, aria-describedby ou un <label for> désignent leur cible par son id. Si deux éléments portent le même id, le navigateur prend le premier : le champ reçoit l'intitulé ou la description d'un autre, souvent sans que rien ne se voie à l'écran.
Comment corriger — HTML
Rendez chaque id unique dans la page. Le cas typique est un composant réutilisé (carte, formulaire répété, modale) qui fixe un id en dur : générez-le par instance — useId() en React, un compteur ou un préfixe ailleurs.
<!-- 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">Vérifiez votre site en 30 secondes
Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.
Scan gratuit