Corriger « Champ de formulaire sans étiquette » en Angular

Pourquoi c'est un problème

Sans <label> associé, un champ n'a pas de nom : le lecteur d'écran annonce « zone de saisie » sans dire quoi remplir, et la zone cliquable de l'étiquette est perdue.

Comment corriger — Angular

Associez un <label> via for/id (ou englobez le champ). Un placeholder ne remplace PAS une étiquette : il disparaît à la saisie et n'est pas fiable.

À éviter

<input type="email" placeholder="E-mail">

Correct

<label for="email">Adresse e-mail</label>
<input id="email" type="email">

Critère RGAA 11.1 — Formulaires

Chaque champ de formulaire a-t-il une étiquette ?

Comment vérifier : tests officiels

Test 11.1.1
Chaque champ de formulaire vérifie-t-il une de ces conditions ?
Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
Le champ de formulaire possède un attribut WAI-ARIA aria-label ;
Une balise <label> ayant un attribut for est associée au champ de formulaire ;
Le champ de formulaire possède un attribut title ;
Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
Test 11.1.2
Chaque champ de formulaire associé à une balise <label> ayant un attribut for, vérifie-t-il ces conditions ?
Le champ de formulaire possède un attribut id ;
La valeur de l’attribut for est égale à la valeur de l’attribut id du champ de formulaire associé.
Test 11.1.3
Chaque champ de formulaire ayant une étiquette dont le contenu n’est pas visible ou à proximité (masqué, aria-label) ou qui n’est pas accolé au champ (aria-labelledby), vérifie-t-il une de ses conditions ?
Le champ de formulaire possède un attribut title dont le contenu permet de comprendre la nature de la saisie attendue ;
Le champ de formulaire est accompagné d’un passage de texte accolé au champ qui devient visible à la prise de focus permettant de comprendre la nature de la saisie attendue ;
Le champ de formulaire est accompagné d’un passage de texte visible accolé au champ permettant de comprendre la nature de la saisie attendue.