ID en double
Silktide repère les pages où la même valeur d’attribut id est utilisée sur plus d’un élément. Les ID doivent être uniques dans une page, car tout ce qui s’y réfère — étiquettes de formulaire, relations ARIA, liens internes — ne peut trouver qu’un seul des doublons.
<!-- Les deux champs input partagent id="name" : quelle étiquette décrit quel champ ? -->
<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 des éléments connexes.
Lorsque des ID sont dupliqués, un
peut lire le mauvais libellé pour un champ de formulaire, ou aucun libellé — 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 de l’entreprise. Le même problème touche
et des attributs comme aria-labelledby et aria-describedby, ainsi que les liens dans la page
qui mènent vers un #id.
Comment corriger
- Renommez les doublons de sorte que chaque
idde la page soit unique, puis mettez à jour tout ce qui y faisait référence (attributsfor, attributs ARIA, liens). - Si les doublons proviennent d’un composant répété — un gabarit appliqué plusieurs fois par page — corrigez le gabarit pour générer des ID uniques, ou utilisez des classes plutôt que des ID pour des besoins de style qui n’ont pas besoin d’être référencés.
- Si, dans votre contexte, un doublon signalé est réellement inoffensif, vous pouvez ignorer ce signalement.
Comment Silktide vérifie cela
- Repérer chaque élément de la page ayant un attribut
id. Les éléments à l’intérieur des graphiques SVG sont ignorés, car leurs ID existent dans un contexte distinct. - Regrouper les éléments selon leur valeur d’
id. - Lorsqu’au moins deux éléments partagent le même
id, signaler chacun d’eux.