Formulaire accessible : labels, messages d'erreur, focus et autocomplétion

Le label : fondation de l'accessibilité des formulaires

Chaque champ de formulaire doit avoir un label explicitement associé via l'attribut for / id, ou implicitement par emboîtement. Le placeholder n'est pas un substitut au label (il disparaît à la saisie).

<!-- CORRECT -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

Les messages d'erreur accessibles

Les messages d'erreur doivent être :

• Associés au champ via aria-describedby
• Explicites ("L'email doit contenir un @", pas "Champ invalide")
• Annoncés aux lecteurs d'écran via aria-live="assertive"
• Identifiés visuellement (pas seulement par la couleur)

<input aria-describedby="erreur-email" aria-invalid="true">
<p id="erreur-email" role="alert">L'adresse email est invalide.</p>

L'autocomplétion (autocomplete)

WCAG 1.3.5 (AA) exige que les champs collectant des données personnelles aient l'attribut autocomplete approprié. Cela profite à tous les utilisateurs mais est crucial pour les personnes avec des troubles cognitifs.

Le focus lors de la validation

Après soumission d'un formulaire avec erreurs, le focus clavier doit se déplacer vers le premier champ en erreur ou le résumé des erreurs, jamais rester sur le bouton de soumission.