form-control-programmatic-label-quality
Les contrôles de formulaire devraient avoir un libellé affiché à l’écran
Signale les contrôles de formulaire dont le nom accessible provient de placeholder, de title, d’aria-label, ou d’un aria-labelledby qui ne pointe que vers du texte masqué, dont aucun n’est un libellé affiché à l’écran. Préférez un <label> visible, ou un aria-labelledby qui pointe vers du texte visible.
Applicabilité. S’applique aux contrôles de formulaire natifs pouvant être libellés et exposés aux technologies d’assistance :
- input (hors type=hidden|submit|reset|button|image)
- select
- textarea
role="presentation"/"none" ne sont exclus que lorsque l’élément ne peut pas recevoir le focus. Un contrôle qui n’est pas dessiné à l’écran est exclu : transparent (opacity 0, la sienne ou celle d’un ancêtre) ou masqué par découpage (comme un texte visuellement masqué), à l’image d’une case à cocher cachée derrière un interrupteur stylé. Il n’a pas de libellé visible à juger ; c’est son substitut visible qui en a un. Seuls comptent les contrôles qui ont un nom programmatique : un contrôle qui n’en a aucun relève du constat de form-control-programmatic-label-present, pas d’une question sur la qualité de son nom.
Attendu. Si un contrôle a un nom programmatique, celui-ci ne devrait pas provenir UNIQUEMENT de :
- placeholder (non vide)
- title (non vide)
- aria-label
- aria-labelledby dont tous les éléments référencés ne sont pas rendus (hidden, display:none, visibility:hidden)
Préférez un <label> associé ou un aria-labelledby qui pointe vers du texte visible.
Ce que rapporte un constat.
labelMethod: la provenance du libellé du contrôle :placeholder,title,aria-labelouaria-labelledby.reasonCode:label_from_placeholder_primary,label_from_title_primary,label_from_aria_label_onlyoulabel_from_hidden_labelledby.sourceText: le texte du libellé, jusqu’à 120 caractères.
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 for="email">Email address</label><input type="text" id="email" placeholder="name@example.com">
Un <label> persistant fournit le nom ; placeholder n’est ici qu’une indication de format.
<input type="text" placeholder="Email address">
Le seul nom du contrôle provient de placeholder, qui disparaît dès que l’utilisateur commence à taper.
<input type="text" title="Name">
Le seul nom du contrôle provient de title, qui ne s’affiche qu’au survol. L’un comme l’autre donnent un nom au contrôle, donc le critère WCAG 4.1.2 est satisfait ; ce qui manque, c’est un libellé affiché pour tout le monde, ce qui relève du critère 3.3.2.
<input type="search" aria-label="Search">
Le seul nom du contrôle provient d’aria-label, qui n’est jamais affiché à l’écran. Un texte visible à côté du champ, comme un bouton de recherche, peut quand même indiquer aux personnes voyantes à quoi il sert : il faut donc y regarder de plus près plutôt que conclure à un échec.
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.
label_from_aria_label_only
- Repérez à l’écran le champ indiqué par le rapport et lisez son aria-label, que le rapport donne.
- Cherchez un texte affiché à côté du champ (un label visible, un titre ou une légende) qui dit quoi saisir.
Réussite. Un texte affiché à côté du champ, ou une icône au sens évident comme une loupe sur un champ de recherche, dit quoi saisir.
Échec. Rien à l’écran ne dit quoi saisir dans le champ, ce qui ne respecte pas le critère WCAG 3.3.2.
label_from_hidden_labelledby
- Repérez le champ indiqué par le rapport et, dans les outils de développement, suivez ses id aria-labelledby jusqu’aux éléments qu’ils désignent.
- Vérifiez si ces éléments sont affichés à l’écran quand le champ l’est.
- Cherchez un autre texte affiché à côté du champ qui dit quoi saisir. Un bouton juste après le champ qui dit ce qu’il fait, comme Rechercher après un champ de recherche, compte aussi.
Réussite. Le texte d’étiquette est affiché avec le champ, ou un autre texte à côté, ou un bouton juste après comme Rechercher, dit quoi saisir.
Échec. Le label ne se trouve que dans des éléments masqués et rien à l’écran ne dit quoi saisir, ce qui ne respecte pas le critère WCAG 3.3.2.
label_from_placeholder_primary
- Repérez le champ indiqué par le rapport et lisez son placeholder.
- Saisissez quelque chose dans le champ.
- Vérifiez si quelque chose encore affiché à l’écran dit à quoi sert le champ : une étiquette ou un texte à côté. Un bouton juste après le champ qui dit ce qu’il fait, comme Rechercher après un champ de recherche, compte aussi.
Réussite. Une étiquette, un texte à côté du champ ou un bouton juste après comme Rechercher reste affiché une fois le champ rempli et dit quoi saisir.
Échec. Une fois le champ rempli, rien à l’écran ne dit à quoi il sert, ce qui ne respecte pas le critère WCAG 3.3.2.
label_from_title_primary
- Regardez le champ indiqué par le rapport sans le survoler.
- Cherchez un texte affiché à côté qui dit quoi saisir. Un bouton juste après le champ qui dit ce qu’il fait, comme Rechercher après un champ de recherche, compte aussi.
- Atteignez le champ au clavier avec Tab et notez que l’info-bulle du title n’apparaît pas.
Réussite. Sans survol, un texte à côté du champ, ou un bouton juste après comme Rechercher, dit quoi saisir.
Échec. Seul le title, affiché au survol de la souris, dit quoi saisir : les utilisateurs du clavier et du tactile ne le voient jamais, ce qui ne respecte pas le critère WCAG 3.3.2.