Fix "Form field without a label" in Vue

Why it's a problem

Without an associated <label>, a field has no name: the screen reader says "edit text" without saying what to fill in, and you lose the label's click target.

How to fix it — Vue

Associate a <label> via for/id (or wrap the field). A placeholder does NOT replace a label: it vanishes on input and isn't reliable.

Avoid

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

Correct

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

RGAA criterion 11.1 — Formulaires

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

How to check: official tests (in French)

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.