Les formulaires accessibles sont plus faciles à remplir pour tout le monde. Ils aident les utilisateurs de lecteurs d’écran, les utilisateurs du clavier, les personnes sur petits écrans et toute personne qui accomplit une tâche rapidement.
Ce tutoriel couvre quelques modèles qui rendent les formulaires plus fiables sans ajouter beaucoup de complexité.
Utilisez de vraies étiquettes
Les textes indicatifs ne sont pas des étiquettes. Ils disparaissent dès qu’une personne commence à saisir, et ils sont faciles à manquer.
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
L’attribut for relie l’étiquette au champ de saisie. Cliquer sur l’étiquette met le champ en focus, et les technologies d’assistance peuvent annoncer correctement l’étiquette.
Ajoutez des descriptions utiles
Utilisez aria-describedby lorsqu’un champ a besoin de conseils supplémentaires.
<label for="password">Password</label>
<input
id="password"
name="password"
type="password"
autocomplete="new-password"
aria-describedby="password-help"
required
>
<p id="password-help">Use at least 12 characters.</p>
La description reste disponible après que l’utilisateur a commencé à saisir.
Reliez les erreurs aux champs
Les messages d’erreur doivent être précis et liés de façon programmatique.
<label for="postal-code">Postal code</label>
<input
id="postal-code"
name="postal-code"
autocomplete="postal-code"
aria-invalid="true"
aria-describedby="postal-code-error"
>
<p id="postal-code-error">Enter a five-digit postal code.</p>
Évitez les messages vagues comme « saisie invalide ». Indiquez à l’utilisateur ce qu’il doit corriger.
Gardez le focus prévisible
Lorsque la validation échoue après l’envoi, déplacez le focus vers un résumé en haut du formulaire.
<div tabindex="-1" role="alert" id="form-errors">
<p>Please fix the following fields:</p>
<ul>
<li><a href="#postal-code">Postal code must be five digits.</a></li>
</ul>
</div>
Le résumé aide les utilisateurs à comprendre l’état complet du formulaire avant de passer aux champs individuels.
Testez au clavier
Un passage rapide au clavier permet de détecter de nombreux problèmes :
- Chaque élément interactif peut-il recevoir le focus ?
- L’ordre du focus correspond-il à l’ordre visuel ?
- L’indicateur de focus est-il visible ?
- Le formulaire peut-il être envoyé sans souris ?
- Les erreurs apparaissent-elles près du champ concerné ?
Conclusion
Les modèles de formulaires accessibles reposent surtout sur la clarté. De vraies étiquettes, des descriptions reliées, des erreurs précises et un focus prévisible rendent les formulaires plus humains et plus faciles à maintenir.
Lectures complémentaires
- CSS Grid Mastery : construisez n’importe quelle mise en page imaginable — organisez vos formulaires et vos pages avec des démonstrations CSS Grid interactives et en direct.
- Créer une grille de cartes de documentation responsive — un modèle de grille responsive pour les index de documentation et les bibliothèques de ressources.
Comments