4.1.8 Lors de la validation, les erreurs sont indiquées et expliquées par du texte

En cas d'erreur lors de la validation d'un formulaire, indiquez la nature de l'erreur et l'endroit où l'erreur a été commise. Ceci ne doit pas être fait uniquement au moyen de la couleur.

Pourquoi?

Une indication d'erreur uniquement en couleur ne serait pas visible pour les personnes ne distinguant pas les couleurs, ni pour les lecteurs d'écran.

En pratique

Expliquez clairement la nature de l'erreur et comment la corriger

Pour indiquer l'endroit de l'erreur il y a plusieurs possibilités:

  • Ajoutez une indication à côté du champ à corriger, par exemple
    • une icône (point d'exclamation) avec une alternative textuelle correcte
    • une courte description textuelle.
  • Énumérez les erreurs en indiquant bien chaque champ par son intitulé exact, ce qui permet de les retrouver en utilisant une recherche. Vous pouvez faire ceci:
    • en haut de formulaire
    • au moyen d'un pop-up (alert box)

Vous pouvez également utiliser une couleur pour mettre en évidence les champs qui sont à corriger mais combinez toujours avec une autre caractéristique.

Exemple: 'indication insuffisante des erreurs

capture d'écran du formulaire avec erreurs indiquées en rouge et gras uniquement - code HTML ci-dessous

Les champs qui comportant des erreurs sont entourés en rouge et en gras. Il manque donc une explication de la nature de l'erreur ainsi qu'une indication de l'endroit où se trouve l'erreur qui soit accessible à tous.

input.erreur {  
 border: 2px solid red;
}

Exemple: indication suffisante des erreurs (Mieux)

capture d'écran du formulaire avec erreurs indiquées en rouge et gras et en texte en début de formulaire - code HTML ci-dessous

Dans cet exemple les erreurs sont expliquées par du texte en début de formulaire et en couleur dans le formulaire. C'est suffisant, mais il serait utile, surtout si le formulaire est long, d'ajouter également une indication textuelle ou sous forme d'icône dans le label de chaque champ qui comporte une erreur.

input.erreur {  
 border: 2px solid red;
}

Exemple: indication des erreurs en début de formulaire et à côté des champs (Encore mieux)

Ici on a ajouté la mention "invalide" et "manquant" dans le label des champs concernés.

capture d'écran du formulaire avec erreurs indiquées en début de formulaire et en texte et en couleur dans le formulaire - code HTML ci-dessous

input.erreur {  
 border: 2px solid red;
}

Recommandation

Veillez à donner un feedback clair après l'envoi d'un formulaire, quel que soit le résultat. Une courte phrase suffit : "Merci, vos données ont bien été envoyées" ou "Attention, il y a des erreurs de validations dans le formulaire. Merci de les corriger et de le renvoyer."

comment tester

  1. Est-ce que les champs qui comportent des erreurs sont énumérés en début de formulaire?
    • Oui: est-ce que la nature de l'erreur est décrite au même endroit?
      • Oui: OK
      • Non: Voir question suivante (2)
    • Non: Voir question suivante (2)
  2. Est-ce que les erreurs sont indiquées dans le label des champs au moyen d'un texte ou d'une image avec alternative textuelle?
    • Oui: OK
    • Non : pas OK, il faudra adapter le formulaire