„Formularfeld ohne Beschriftung“ in HTML beheben

Warum das ein Problem ist

Ohne zugeordnetes <label> hat ein Feld keinen Namen: Der Screenreader sagt „Eingabefeld“, ohne zu nennen, was einzugeben ist, und die Klickfläche fehlt.

So beheben Sie es — HTML

Verknüpfen Sie ein <label> über for/id (oder umschließen Sie das Feld). Ein Placeholder ersetzt KEIN Label: Er verschwindet bei der Eingabe.

Vermeiden

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

Korrekt

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

RGAA-Kriterium 11.1 — Formulaires

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

So prüfen Sie: offizielle Tests (auf Französisch)

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.