Identifiants en double
Silktide repère les pages où la même valeur id est utilisée sur plusieurs éléments. Les ID doivent être uniques sur une page, car tout ce qui se réfère à un ID — étiquettes de formulaire, relations ARIA, liens internes — ne peut retrouver qu'un seul des doublons.
<!-- Les deux champs partagent id="name" : à quel champ chaque libellé correspond-il ? -->
<label for="name">Votre nom</label>
<input id="name">
<label for="name">Nom de l'entreprise</label>
<input id="name">
Pourquoi c'est important
Les dépendent des références d'ID pour relier les éléments associés. Lorsque des ID sont dupliqués, un peut lire le mauvais libellé pour un champ de formulaire, ou aucun libellé du tout — dans l'exemple ci-dessus, les deux champs peuvent être annoncés comme "Votre nom", si bien que l'utilisateur saisit son nom dans le champ entreprise. La même défaillance affecte les attributs comme aria-labelledby et aria-describedby, ainsi que les liens internes qui pointent vers un #id.
Comment corriger
- Renommez les doublons afin que chaque
idde la page soit unique, puis mettez à jour tout ce qui s'y référait (attributsfor, attributs ARIA, liens). - Si les doublons proviennent d'un composant répété — un modèle utilisé plusieurs fois par page — corrigez le modèle pour générer des ID uniques, ou utilisez des classes au lieu d'ID pour des accroches de style qui n'ont pas besoin d'être référencées.
- Si un doublon signalé est réellement sans conséquence dans votre contexte, vous pouvez ignorer ce constat.
Comment Silktide teste cela
- Repère tous les éléments de la page qui possèdent un attribut
id. Les éléments situés à l'intérieur des graphiques SVG sont ignorés, car leurs ID appartiennent à un contexte distinct. - Regroupe les éléments par leur valeur d'
id. - Lorsque plusieurs éléments partagent le même
id, signale chacun d'eux.