Les formulaires sont partout sur le web (formulaire de contact, création de compte, connexion, paiement, recherche, inscription à une newsletter, etc.) et pourtant, ils sont encore aujourd'hui parmi les fonctionnalité les plus bloquantes pour beaucoup d'utilisateurs en terme d'accessibilité numérique.
Un formulaire inaccessible peut empêcher un utilisateur de finaliser un achat, d'effectuer une démarche administrative ou simplement de contacter une entreprise.
Parmi les bonnes pratiques essentielles, l'utilisation correcte des étiquettes de formulaire joue un rôle central.
Dans cet article, nous allons voir à quoi sert une balise <label>, pourquoi elle est indispensable pour l'accessibilité et quelles erreurs éviter pour concevoir des formulaires réellement utilisables par tous.
À quoi sert une étiquette <label> ?
Une étiquette de formulaire permet d'indiquer clairement à quoi sert un champ de saisie.
Par exemple :
- Nom
- Adresse email
- Mot de passe
- Téléphone
Une étiquette correctement implémentée et reliée à son champ permet notamment aux lecteurs d'écran d'annoncer correctement le nom du champ et aux utilisateurs de comprendre rapidement la saisie attendue.
En HTML, cette étiquette est généralement créée avec la balise <label>.
Bien relier l'étiquette <label> à son champ <input>
L'association entre l'étiquette <label> et le champ <input> est essentielle.
Cette relation permet notamment aux technologies d'assistance de faire correctement le lien entre le texte et le champ associé.
La méthode la plus courante consiste à utiliser les attributs for et id.
<label for="prenom">Prénom</label><input id="prenom" type="text">L'attribut for est à placer sur l'étiquette <label> et l'id directement sur le champ <input>.
Pour relier correctement l'étiquette et le champ, la valeur de l'attribut for doit correspondre exactement à celle de l'id.
Pourquoi les étiquettes sont essentiels pour l'accessibilité ?
Pour une personne utilisant un lecteur d'écran, l'étiquette permet de comprendre immédiatement le rôle du champ.
Sans étiquette, un lecteur d'écran ne sera pas en capacité d'annoncer la valeur attendue dans un champ.
Les étiquettes sont également importantes pour les personnes ayant des troubles cognitifs ou de l'attention. Un formulaire clair et correctement structuré réduit la charge cognitive et limite les erreurs de saisie.
Enfin, une bonne utilisation des étiquettes améliore globalement l'expérience utilisateur pour tous les utilisateurs.
Vous souhaitez que vos équipes prennent en main le sujet plus en détail, découvrez nos modules de formation express. Ils vous permettent d'approfondir rapidement les thématiques qui vous intéressent.
Attention : un placeholder n'est pas une étiquette
C'est une erreur encore très fréquente.
Beaucoup de formulaires utilisent uniquement un placeholder pour indiquer le contenu attendu dans un champ.
<input type="text" placeholder="Votre prénom">Le problème, c'est que le placeholder disparaît au moment de la saisie. L'utilisateur peut alors perdre le contexte du champ.
De plus, les attributs placeholder présentent souvent des contrastes insuffisants.
Un placeholder peut donc servir d'aide complémentaire, mais il ne doit jamais remplacer une véritable étiquette.
Nommage explicite et aides à la saisie
Une bonne étiquette doit être explicite, c'est-à-dire qu'elle doit permettre à elle seule de comprendre la saisie attendue dans le champ. Mais une bonne étiquette ne consiste pas uniquement à nommer un champ. Elle doit aussi aider l'utilisateur à comprendre le format attendu (exemple : format d'une adresse email).
Ces indications permettent de prévenir certaines erreurs avant même la validation du formulaire.
<label for="email">Votre adresse email - Format attendu : nom@domaine.fr</label><input id="email" type="email">Faire le point sur l'accessibilité de votre site ? Explorez nos différentes offres d'audits d'accessibilité.
Conclusion : les labels, une base simple mais essentielle
La balise <label> joue un rôle essentiel dans l'accessibilité des formulaires.
Des formulaires clairs, compréhensibles et correctement structurés permettent à davantage d'utilisateurs d'utiliser un service numérique sans difficulté.
Et dans la majorité des cas, mettre en place de bonnes étiquettes représente une amélioration relativement simple pour les équipes techniques.
Besoin d'accompagnement sur l'accessibilité de vos formulaires ?
Vous souhaitez évaluer l'accessibilité de vos formulaires ou monter en compétence sur ces sujets ? Contactez-nous pour en discuter.
Chez Arya Access, nous accompagnons les organisations dans l'amélioration de l'accessibilité de leurs services numériques : audits RGAA, formations, accompagnement des équipes techniques et sensibilisation.
Envie d'en savoir plus sur un autre sujet technique ? Découvrez aussi notre article : Composants JS : pièges fréquents et bonnes pratiques
