Fix "Form field without a label" in HTML
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 — HTML
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.
<input type="email" placeholder="E-mail"><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-labelledbyré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 attributforest 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-ARIAaria-label,aria-labelledbyoutitlelui fournit un nom accessible.Test 11.1.2
Chaque champ de formulaire associé à une balise
<label>ayant un attributfor, vérifie-t-il ces conditions ?Le champ de formulaire possède un attribut
id;La valeur de l’attribut
forest égale à la valeur de l’attributiddu 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
titledont 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.
Full page for criterion 11.1 · Official text: Référentiel général d'amélioration de l'accessibilité (RGAA) 4.1, DINUM, Licence Ouverte 2.0.
See for another framework
Check your site in 30 seconds
Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.
Free scan