Comment construiriez-vous un formulaire d'inscription dont les erreurs de validation soient réellement utilisables, y compris pour les utilisateurs de lecteurs d'écran ?

Utilisez de vrais labels liés aux champs, validez au blur et à la soumission plutôt qu'à chaque frappe, et placez chaque message d'erreur à côté de son champ avec un aria describedby qui pointe dessus plus aria invalid sur le champ. À la soumission, déplacez le focus vers le premier champ invalide ou vers un résumé des erreurs. Gardez les contraintes et les types natifs pour que les claviers mobiles et le remplissage automatique fonctionnent, et ne signalez jamais une erreur par la couleur seule.

Je pars du natif, parce que l'essentiel vient gratuitement : un vrai label avec un attribut for, le bon type de champ pour que le mobile affiche le bon clavier, des attributs autocomplete pour que les gestionnaires de mots de passe fonctionnent, et required là où ça s'applique. Pour le timing, je valide un champ au blur et tout à la soumission, jamais à chaque frappe, puisque dire à quelqu'un que son e-mail est invalide pendant qu'il le tape n'est que du bruit. Une fois qu'un champ a été marqué invalide, je revalide bien pendant la saisie, pour que l'erreur disparaisse dès qu'elle est corrigée. Chaque message est juste sous son champ, et le champ reçoit aria invalid true et un aria describedby pointant vers l'id du message, ce qui fait qu'un lecteur d'écran annonce l'erreur quand le focus arrive dessus. Sur une soumission échouée, je déplace le focus vers le premier champ invalide, ou vers un court résumé d'erreurs en haut avec des liens vers chaque champ s'il y en a plusieurs. Et les erreurs ne sont jamais uniquement en couleur ; il y a du texte et une icône, parce qu'une bordure rouge seule ne veut rien dire pour beaucoup de gens.