Le problème
Une bordure rouge n’explique pas le rejet. Un message « Erreur » sans champ ni suggestion laisse l’utilisateur chercher comment progresser.
Exemple : mauvais et correct
Mauvais
<input type="email" class="bordure-rouge">
<p>Erreur</p>Correct
<label for="email">Adresse e-mail (obligatoire)</label>
<input id="email" name="email" type="email" required
autocomplete="email" aria-invalid="true"
aria-describedby="email-erreur">
<p id="email-erreur">
Adresse e-mail : saisissez une adresse au format nom@domaine.fr.
</p>Le fragment montre une erreur après validation. Ne marquez pas le champ invalide à l’arrivée ; actualisez état et message après correction.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 11.10 — Expliciter obligations, formats et erreurs.
- Critère 11.11 — Fournir les suggestions de correction nécessaires.
- Critère 3.1 — Compléter la couleur du signal d’erreur.
- Critère 7.5 — Restituer les erreurs dynamiques constituant un statut.
Impact utilisateur
Un signal visuel peut échapper à une personne aveugle ; une règle obscure gêne les personnes ayant des difficultés cognitives. Un message précis réduit les tentatives répétées.
Correction
- Nommez le champ et la règle attendue. Conservez les réponses déjà saisies pour permettre une correction ciblée.
- Après validation, associez l’erreur au champ et exposez son état invalide. Conservez l’id d’une aide encore utile dans aria-describedby.
- Adaptez l’annonce : résumé d’erreurs recevant le focus pour un formulaire long, ou alerte dynamique selon le contexte. Évitez les annonces simultanées répétées.
Méthode de test
- Envoyez le formulaire vide puis avec des formats incorrects : chaque message doit identifier le champ et la correction attendue.
- Au lecteur d’écran, vérifiez nom, état et erreur au focus du champ, puis l’annonce après validation.
- Corrigez et validez : message et aria-invalid doivent suivre le nouvel état, sans supprimer les autres réponses.
Points de vigilance
- aria-describedby ne garantit pas l’annonce immédiate d’une mise à jour.
- Évitez l’erreur définitive à chaque caractère d’une saisie incomplète.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.