form-control-label-quality
Les libellés des champs de formulaire devraient être descriptifs et distinguables
Signale un libellé visible de champ de formulaire qui est un texte générique de remplissage (« Label », « Field »), ou qui répète le libellé d’un autre champ sans contexte visible (titre, légende ou ligne) permettant de les distinguer. Les libellés de remplissage anglais sont toujours reconnus, et les allemands, espagnols, français ou japonais lorsque le champ est dans cette langue.
Applicabilité. Champs de formulaire visibles : input natif (hors hidden et types de type bouton), select, textarea, ou élément doté de l’un des rôles de widget ARIA listés par ACT cc0f0a (checkbox, combobox, listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox ; le premier vrai jeton de rôle de l’attribut role, sans tenir compte de la casse), qui portent un libellé programmatique visible : une association <label>, ou les éléments vers lesquels pointe aria-labelledby. Un champ nommé uniquement par aria-label/title n’a pas de libellé visible à évaluer et est hors périmètre ici (son mécanisme d’étiquetage relève de form-control-programmatic-label-quality, sa présence de form-control-programmatic-label-present). Un élément personnalisé auquel ses ElementInternals donnent l’un de ces rôles (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle. Lorsqu’elle ne trouve rien à mettre en question, elle renvoie notApplicable, et non pass : elle ne s’applique qu’à ce que son contrôle signale, et ne rien y trouver ne montre pas que tout va bien.
Attendu. Le texte du libellé visible (a) n’est pas un texte de remplissage oublié dans le balisage (« label », « field », « enter text », ...), (b) n’est pas partagé avec un autre champ sans contexte visible pour les distinguer (le même « Name » deux fois, sans rien de visible à l’écran indiquant lequel correspond à la livraison et lequel à la facturation), et (c) constitue la totalité du libellé programmatique du champ, et non le fragment visible d’un libellé dont la partie descriptive est masquée.
Ce que rapporte un constat.
label: le texte du libellé visible du champ.sharedWith: le nombre d’autres champs qui ont le même libellé sans rien de visible pour les distinguer, un décompte. 0 lorsqu’aucun autre champ ne le partage.hiddenLabelParts: le nombre de parties du libellé du champ masquées à la vue, un décompte. 0 lorsque tout le libellé est visible.
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
<label>Label <input type="text" name="f1"></label>
Le texte du libellé est le mot de remplissage « Label » lui-même, pas une vraie description du champ.
<label for="e">Email address:</label><input id="e" type="text">
Le texte du libellé est un nom réel et descriptif pour le champ.
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_LABEL_TEXT
- Repérez le champ indiqué par le rapport et les autres champs ayant la même étiquette visible.
- Regardez l’écran autour de chacun : une légende, un titre, le texte d’une ligne ou un texte voisin qui indique lequel est lequel.
- Déterminez si les champs demandent la même chose (un champ de recherche répété) ou des choses différentes (nom de livraison et nom de facturation).
Réussite. Les champs servent le même objectif, ou un élément visible près de chacun indique clairement lequel est lequel.
Échec. Des champs différents partagent une étiquette et rien de visible ne les distingue : l’utilisateur ne peut pas savoir lequel remplir, ce qui ne respecte pas le critère WCAG 2.4.6 (G131).
PARTIALLY_HIDDEN_LABEL
- Repérez le champ indiqué par le rapport et lisez son étiquette visible à l’écran.
- Inspectez le champ dans le panneau Accessibilité et lisez son nom calculé complet, parties masquées comprises.
- Regardez ce qui est visible autour du champ, comme le titre d’un groupe, un titre de section ou la ligne ou la colonne où il se trouve, qui peut donner son sens à la partie masquée.
- Demandez-vous si l’étiquette visible, lue avec ce qui est visible autour, dit à un utilisateur voyant quoi saisir ou choisir.
Réussite. La partie visible de l’étiquette, seule ou avec ce qui est visible autour, décrit le champ ; la partie masquée n’ajoute que des précisions.
Échec. Ni la partie visible de l’étiquette ni rien de visible autour n’identifie le champ sans la partie masquée (par exemple, seul « OK » est affiché), ce qui ne respecte pas le critère WCAG 2.4.6 (ACT cc0f0a).
PLACEHOLDER_LABEL_TEXT
- Repérez le champ indiqué par le rapport et lisez son étiquette visible.
- Déduisez de la page à quoi sert le champ.
- Déterminez si l’étiquette le dit, ou s’il s’agit d’un texte de modèle comme « Étiquette », « Champ » ou « Saisir du texte ».
Réussite. L’étiquette est un vrai nom pour ce que demande le champ dans ce contexte (par exemple « Valeur » dans un éditeur clé/valeur).
Échec. L’étiquette est un texte de remplacement qui ne dit pas à quoi sert le champ, ce qui ne respecte pas le critère WCAG 2.4.6 (G131).