Champ de saisie de formulaire
Un champ de saisie de formulaire est l'élément HTML dans lequel l'utilisateur entre ou sélectionne des données : texte libre, date, case à cocher, liste déroulante, fichier à téléverser. Pour être accessible, chaque champ doit être relié dans le code à une étiquette (label) qui identifie la donnée attendue. Sans cette liaison, les lecteurs d'écran restituent un champ muet.
48,2 % des pages d'accueil analysées par le WebAIM Million 2025 présentent au moins un champ de formulaire sans étiquette. C'est la troisième erreur d'accessibilité la plus répandue sur le web, après le contraste insuffisant et les images sans texte alternatif.
#Qu'est-ce qu'un champ de saisie ?
Le glossaire du RGAA distingue plusieurs types :
- Saisie libre :
<input>(texte, courriel, mot de passe, date…),<textarea> - Choix prédéfini :
<select>, boutons radio, cases à cocher - Téléversement de fichier :
<input type="file">
Les boutons (<button>, <input type="submit">) n'en font pas partie.
Chaque champ a besoin d'un nom accessible : le texte que les technologies d'assistance annoncent quand l'utilisateur atteint le champ. La technique H44 du W3C recommande de le créer via l'élément <label> :
<!-- Label explicite : for + id -->
<label for="courriel">Courriel</label>
<input id="courriel" type="email">
<!-- Label implicite : le champ est à l'intérieur -->
<label>
Courriel
<input type="email">
</label>Les deux méthodes sont équivalentes pour les lecteurs d'écran. La première est plus courante dans les projets React ou Vue, où label et input vivent rarement dans le même composant.
#Le piège du placeholder sans label
Beaucoup de maquettes remplacent l'étiquette par un placeholder. Le texte apparaît dans le champ, la mise en page est épurée. Sauf que le placeholder disparaît dès la première frappe. L'utilisateur ne sait plus quel champ il remplit.
Le problème est pire pour les personnes avec des troubles cognitifs ou une mémoire à court terme réduite. Et certains lecteurs d'écran n'annoncent tout simplement pas le placeholder comme nom du champ.
<!-- ❌ Placeholder seul — pas d'étiquette accessible -->
<input type="email" placeholder="[email protected]">
<!-- ✅ Label visible + placeholder comme indice complémentaire -->
<label for="email">Courriel</label>
<input id="email" type="email" placeholder="[email protected]">Le placeholder est un indice. Pas une étiquette.
#Le bon type change tout
Utiliser type="text" partout est une occasion manquée. Les types HTML5 (email, tel, url, date) adaptent le clavier virtuel sur mobile, activent la validation native du navigateur et permettent l'auto-complétion. Un type="email" affiche le @ directement sur le clavier. Un type="tel" ouvre le pavé numérique.
Pas de JavaScript nécessaire. Le navigateur fait le travail.
#En résumé
Chaque champ de saisie a besoin d'un <label> relié dans le code, pas juste d'un texte posé à côté. Le placeholder ne remplace jamais l'étiquette. Et le type d'input le plus précis possible donne à l'utilisateur le bon clavier, la bonne validation et le bon auto-remplissage.