Formulaires accessibles
Un formulaire accessible associe chaque champ à une étiquette explicite, signale clairement les erreurs et évite de redemander les mêmes informations. Il améliore le taux de complétion pour tous les utilisateurs.
Les règles essentielles
- Labels explicites :
<label for="id">relié à chaque champ. - Instructions avant le champ, pas seulement après.
- Erreurs : message textuel précis, relié au champ par
aria-describedby, annoncé parrole="alert"ou une zonearia-live. - Regroupement :
<fieldset>et<legend>pour dates, adresses, choix multiples. - Autocomplétion : attribut
autocompleteadapté à la finalité du champ. - CAPTCHA : proposez une alternative ; WCAG 3.3.8 interdit les tests cognitifs sans solution de remplacement.
Exemple de code
<label for="email">Adresse e-mail</label>
<input id="email" name="email" type="email" autocomplete="email"
aria-describedby="email-err" aria-invalid="true" required>
<p id="email-err" role="alert">Saisissez une adresse valide, par exemple nom@exemple.fr.</p>Comment tester
Naviguez au clavier, écoutez les annonces avec NVDA ou VoiceOver, soumettez le formulaire vide, puis avec des erreurs. Connectez-vous avec un gestionnaire de mots de passe. Critères RGAA : 11.1, 11.2, 11.5, 11.6, 11.10, 11.13.
Questions fréquentes
Faut-il indiquer les champs obligatoires ?
Oui, en texte (« obligatoire ») et avec l’attribut required, sans reposer uniquement sur la couleur ou un astérisque non expliqué.
Peut-on utiliser le placeholder comme label ?
Non : il disparaît à la saisie, son contraste est souvent insuffisant et il n’est pas un substitut fiable à un label visible.