Les 8 erreurs corrigées
- Information portée par la couleur seule : un champ en erreur se distingue aussi par une bordure plus épaisse, une icône ⚠ et le préfixe « Erreur : » dans le message.
- Erreur non liée au champ : chaque champ a
aria-describedby vers son message, et aria-invalid="true" quand il est invalide.
- Erreurs non annoncées : le récapitulatif a
role="alert" et la confirmation d’envoi a role="status".
- Pas de récapitulatif ni de gestion du focus : à l’envoi, le focus va sur un récapitulatif dont chaque lien amène au champ en erreur.
- Focus invisible : le
outline: none est supprimé et un :focus-visible bien contrasté est ajouté.
- Champ sans étiquette : le téléphone a un vrai
<label for> au lieu d’un <div> et d’un placeholder.
- Validation au
blur : la validation se fait à l’envoi, puis l’erreur disparaît dès que le champ est corrigé.
- Champs obligatoires non signalés :
aria-required="true" est ajouté et l’introduction explique la signification de l’astérisque.