form-control-single-label

Les contrôles de formulaire ne devraient pas avoir plusieurs libellés

automaticWCAG 3.3.2 (A)confiance : highgravité : moderateunderstandable

Vérifie qu’un contrôle de formulaire est associé à au plus un <label> (par imbrication ou par label[for]).

Applicabilité. S’applique aux contrôles de formulaire pouvant être libellés (input, hors hidden/submit/reset/button/image ; select ; textarea).

Attendu. Au plus un <label> susceptible de contribuer au nom accessible du contrôle lui est associé, au sens du contrôle étiqueté défini par HTML : un <label for="..."> dont la valeur est l’id du premier élément portant cet id dans l’arbre du label lui-même, ou un <label> englobant sans for dont le premier descendant étiquetable est le contrôle (un label qui à la fois l’englobe et le référence via for compte une seule fois). Le résultat dépend de la mise en concurrence effective des libellés en surnombre pour le nom :

pass lorsqu’une surcharge (aria-labelledby / aria-label) remplace tous les <label> natifs : les libellés ne contribuent alors en rien au nom et ne peuvent donc pas être ambigus. Un écart entre libellé visible et nom relève du critère 2.5.3 Étiquette dans le nom, pas de cette règle.
cantTell lorsque deux libellés non vides ou plus sont en concurrence sans surcharge : les navigateurs joignent leur texte, dans l’ordre du DOM, en un seul nom, et seule une personne peut dire si ce nom joint a encore du sens (« Address Mailing address ») ou se lit comme du bruit.
cantTell lorsqu’un libellé non vide est accompagné d’une ou plusieurs associations de libellé vides, sans surcharge : le nom se résout généralement vers le vrai libellé, mais le traitement de l’association vide n’est pas garanti d’un agent utilisateur à l’autre.

Des associations toutes vides sans surcharge relèvent d’un nom manquant (la règle voisine form-control-programmatic-label-present), pas d’une ambiguïté ; cette règle reste donc silencieuse.

Ce que rapporte un constat.

labelCount : le nombre de libellés associés au contrôle. Dans le cas de libellés concurrents, seuls les non vides sont comptés ; dans le cas d’un libellé vide, les vides sont comptés aussi.
contributingLabelCount (le cas d’un libellé vide) : combien de ces libellés ont du texte, et donnent donc son nom au contrôle.

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

<label>Name <input type="text"></label>

Un seul label englobant ; un seul mécanisme d’étiquetage s’applique.

can't tell

<label for="address">Address</label>
<label for="address">Mailing address</label>
<input id="address" type="text">

Deux éléments label[for] distincts ciblent le même contrôle. Les navigateurs les joignent en un seul nom, « Address Mailing address », et seule une personne peut dire s’il se lit encore bien.

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.

`FORM_FIELD_EXTRA_EMPTY_LABEL`

Repérez le champ indiqué par le rapport et notez son label avec du texte ainsi que le label vide qui pointe aussi vers lui.
Ouvrez le panneau Accessibilité des outils de développement du navigateur et vérifiez que le nom du champ est le texte du vrai label.
Avec un lecteur d’écran, atteignez le champ avec Tab et écoutez son nom.

Réussite. Le nom du champ est le texte du vrai label, et rien n’est perdu à cause du label vide.

Échec. Le champ n’obtient aucun nom, ou un nom incomplet, à cause du label vide, ce qui ne respecte pas le critère WCAG 3.3.2 (ni 4.1.2).

`FORM_FIELD_MULTIPLE_LABELS`

Repérez le champ indiqué par le rapport et notez le texte de chaque label qui pointe vers lui.
Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible du champ, qui réunit tous les labels.
Avec un lecteur d’écran, atteignez le champ avec Tab et écoutez son nom.
Déterminez si le nom combiné indique toujours clairement ce qu’il faut saisir.

Réussite. Le nom combiné est clair : les labels se répètent, ou celui en plus n’est qu’un indicateur comme « obligatoire ».

Échec. Le nom combiné est confus ou trompeur, par exemple deux labels sans rapport mis bout à bout, ce qui ne respecte pas le critère WCAG 3.3.2 (et peut ne pas respecter les critères 2.5.3 et 4.1.2).

Voir le code source