Corregir «Campo de formulario sin etiqueta» en Svelte

Por qué es un problema

Sin un <label> asociado, el campo no tiene nombre: el lector de pantalla dice «campo de edición» sin indicar qué rellenar y se pierde el área de clic.

Cómo corregirlo — Svelte

Asocie un <label> con for/id (o envuelva el campo). Un placeholder NO sustituye a la etiqueta: desaparece al escribir y no es fiable.

Evitar

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

Correcto

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

Criterio RGAA 11.1 — Formulaires

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

Cómo verificarlo: pruebas oficiales (en francés)

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.