---\ntitle: Associations d’étiquettes uniques\ncheck: avoid-duplicate-for-labels\nnavHidden: true\ncategory: Accessibilité\nstandard: WCAG 2.0 A 1.3.1\ncreated: 2026-07-16T03:30:00Z\nupdated: 2026-08-23T19:10:16Z\n---\n\n# Associations d’étiquettes uniques\n\nSilktide vérifie les étiquettes de formulaire qui nomment leur champ à l’aide d’un ID, et signale\nles étiquettes qui partagent le même ID avec une autre étiquette. Chaque champ doit avoir\nexactement une étiquette qui le référence, afin qu’il soit toujours annoncé de la même manière.\n\nEn , un <label> est lié à son champ de formulaire en définissant\nl’attribut for du label sur l’id du champ. Quand deux étiquettes ou plus\nutilisent la même valeur de for, elles revendiquent toutes le même champ - généralement\nparce qu’un formulaire a été copié-collé et que les ID n’ont jamais été mis à jour.\n\nhtml\n<!-- Problème : les deux étiquettes pointent vers id=\"name\" -->\n<label for=\"name\">Votre nom</label>\n<input id=\"name\">\n\n<label for=\"name\">Nom de l’entreprise</label>\n<input id=\"company\">\n\n\n## Pourquoi c’est important\n\nLes doivent choisir\nquelle étiquette annoncer pour le champ, et différents\n font des choix différents - certains\nlisent la première, d’autres lisent les deux. Pendant ce temps, le champ auquel la\nseconde étiquette était destinée se retrouve sans étiquette du tout, et il est annoncé\ncomme un champ sans nom. Cliquer sur une étiquette place aussi le focus sur son champ,\nainsi un visiteur qui clique sur « Nom de l’entreprise » peut se retrouver à saisir du texte\ndans la mauvaise case.\n\n## Comment corriger\n\n1. Donnez à chaque champ de formulaire son propre id unique.\n2. Faites pointer l’attribut for de chaque étiquette vers l’ID du seul champ qu’elle\n décrit :\n\nhtml\n<!-- Corrigé : chaque étiquette pointe vers son propre champ -->\n<label for=\"name\">Votre nom</label>\n<input id=\"name\">\n\n<label for=\"company\">Nom de l’entreprise</label>\n<input id=\"company\">\n\n\n3. Si plusieurs morceaux de texte décrivent réellement un même champ, conservez un seul\n <label> et reliez le texte supplémentaire avec aria-describedby plutôt qu’avec une\n seconde étiquette.\n\n## Comment Silktide teste ceci\n\n1. Rechercher chaque élément <label> avec un attribut for sur chaque page.\n2. Regrouper les étiquettes selon leur valeur for.\n3. Lorsque deux étiquettes ou plus partagent la même valeur, signaler chaque étiquette du\n groupe.\n\n## Dépannage\n\n### Les étiquettes sont dans des formulaires distincts\n\nLes ID doivent être uniques sur l’ensemble de la page, pas seulement à l’intérieur d’un formulaire. Deux\nformulaires qui contiennent chacun <label for=\"email\"> sur la même page entrent tout de même en\nconflit - renommez les ID pour qu’ils diffèrent, par exemple signup-email et\nnewsletter-email.\n\n## Pour aller plus loin\n\n- Comprendre le critère de succès 1.3.1 : Informations et relations (WCAG 2.2)\n- Technique H93 : S’assurer que les attributs id sont uniques (WCAG)\n- L’élément label (MDN)\n- Identifiants d’étiquettes valides\n