Form labels
F
Definition complete
Les form labels (etiquettes de formulaire) sont les balises HTML <label> associees aux champs de saisie d'un formulaire. Elles indiquent a l'utilisateur quelle information est attendue dans chaque champ et sont essentielles pour l'accessibilite et l'utilisabilite.
L'association entre label et input se fait via l'attribut "for" pointant vers l'id de l'input : <label for="email">Email</label><input id="email">. Cette liaison permet aux lecteurs d'ecran d'annoncer le label quand le champ est selectionne, et de cliquer sur le label pour focus le champ (particulierement utile pour les checkboxes).
Les exigences WCAG imposent que chaque champ de formulaire ait un label visible et associe par programmation. Les placeholders (texte grise dans le champ) ne remplacent pas les labels car ils disparaissent a la saisie et ont un contraste souvent insuffisant.
Les patterns modernes incluent : labels au-dessus du champ (meilleure lisibilite), floating labels (labels qui s'elevent au focus, esthetiques mais attention a l'accessibilite), et labels inline pour les formulaires compacts. Le positionnement impacte la vitesse de completion du formulaire.
Exemples pratiques
- Label basique : <label for="name">Votre nom</label><input type="text" id="name" name="name">
- Label implicite : <label>Email : <input type="email" name="email"></label> - l'input est enfant du label.
- Anti-pattern : <input placeholder="Email"> sans label - inaccessible et peu utilisable.
A quoi sert Form labels ?
Les form labels sont obligatoires pour l'accessibilite (WCAG, RGAA), ameliorent l'UX (comprehension immediate), augmentent la surface cliquable (clic sur label = focus sur champ), et facilitent les tests automatises.
Form labels en pratique chez 123web
Chez 123web, chaque formulaire que nous creons respecte les standards d'accessibilite avec des labels explicites et correctement associes. Nous testons au lecteur d'ecran pour garantir une experience utilisateur inclusive.