duplicate-id

Les ID doivent être uniques

automaticWCAG 4.1.1 (A)confiance : highgravité : moderaterobust

Vérifie que chaque valeur d’attribut id non vide est unique dans son propre document ou arbre shadow (WCAG 2.0/2.1, critère 4.1.1, supprimé dans WCAG 2.2).

Applicabilité. S’applique à tout élément portant un attribut id non vide. La visibilité n’entre pas en compte : un id en double casse les mêmes recherches que l’élément soit affiché ou non, c’est pourquoi ACT 3ea0c8 évalue aussi les éléments masqués.

Attendu. Aucun autre élément du même arbre ne porte la même valeur d’id, comparée exactement telle qu’elle est écrite (id="a " et id="a" sont des ids différents). Les ids ont une portée par arbre de document et par arbre shadow : le même id dans deux shadow roots différentes n’est donc pas un doublon.

Ce que rapporte un constat.

reasonCode : DUPLICATE_ID_IN_SHADOW_TREE lorsque les éléments se trouvent dans une même shadow tree, que construit un script et que le balisage servi par la page ne contient pas ; DUPLICATE_ID sinon. Les deux échouent de la même façon.
id : l’id dupliqué.
count : le nombre d’éléments du même arbre qui le portent.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

pass

<div id="section-1">First</div>
<div id="section-2">Second</div>

Chaque élément a un id distinct.

can't tell

<div id="section-1">First</div>
<div id="section-1">Second</div>

L’id section-1 est utilisé par deux éléments du même arbre, ce qui casse <label for>, les liens vers des fragments et getElementById.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

`DUPLICATE_ID`

Inspectez les éléments indiqués par le rapport et notez l’id qu’ils partagent.
Vérifiez si quelque chose fait référence à cet id : l’attribut for d’un label, un attribut aria-* comme aria-labelledby, ou un lien vers #the-id.
Si quelque chose y fait référence, suivez la référence (cliquez sur le label ou le lien, ou lisez le nom dans le panneau Accessibilité) et vérifiez qu’elle atteint l’élément voulu.
Vérifiez quelle version des WCAG et quelle norme l’audit applique ; selon WCAG 2.2, ou 2.0/2.1 avec l’errata de 2023, le critère 4.1.1 est satisfait pour le HTML.

Réussite. Rien ne casse à cause du doublon (les références atteignent l’élément voulu) et l’audit utilise WCAG 2.2, ou 2.0/2.1 avec l’errata, selon lesquels le critère 4.1.1 est satisfait.

Échec. Un label, une référence ARIA ou un lien atteint le mauvais élément (WCAG 1.3.1 ou 4.1.2), ou l’audit suit une norme qui conserve le texte du critère 4.1.1, comme l’EN 301 549 V3.2.1, selon laquelle les id en double ne respectent pas le critère 4.1.1 (F77).

`DUPLICATE_ID_IN_SHADOW_TREE`

Inspectez les éléments indiqués par le rapport, dans la même racine shadow, et notez l’id qu’ils partagent.
Vérifiez si quelque chose fait référence à cet id : l’attribut for d’un label, un attribut aria-* comme aria-labelledby, ou un lien vers #the-id.
Si quelque chose y fait référence, suivez la référence (cliquez sur le label ou le lien, ou lisez le nom dans le panneau Accessibilité) et vérifiez qu’elle atteint l’élément voulu.
Vérifiez quelle version des WCAG et quelle norme l’audit applique ; selon WCAG 2.2, ou 2.0/2.1 avec l’errata de 2023, le critère 4.1.1 est satisfait pour le HTML.

Échec. Un label ou une référence ARIA du composant atteint le mauvais élément (WCAG 1.3.1 ou 4.1.2), ou l’audit suit une norme qui conserve le texte du critère 4.1.1, comme l’EN 301 549 V3.2.1, selon laquelle les id en double ne respectent pas le critère 4.1.1 (F77).

Voir le code source