Lorsqu’un visiteur se trompe en complétant un formulaire ou qu’il oublie un champ, indiquez clairement de quel champ il s’agit et quelle est l’erreur. Si possible, proposez aussi des suggestions de corrections, pour mieux comprendre ce qu’il faut compléter.

Un feedback clair permet d’avoir un formulaire plus convivial pour tous, principalement les personnes avec un handicap visuel ou cognitif, qui ont besoin de plus de temps pour compléter un document avec la technologie d’assistance.

Comment vous y prendre ?

Avant qu’un visiteur puisse envoyer un formulaire, il y a un contrôle automatique de tous les champs. Si certains n’ont pas été complétés (correctement), le visiteur doit savoir quels champs il doit encore remplir ou corriger, et comment.

Assurez-vous que la vérification d’erreurs répond aux exigences suivantes :

  1. Le visiteur sait de quel champ il s’agit.
  2. Le visiteur doit comprendre quelle est son erreur.
  3. Si possible, suggérez une correction .

1. Le visiteur sait de quel champ il s’agit

Indiquez toujours avec du texte quel(s) champ(s) du formulaire est/sont concerné(s). Ajoutez éventuellement d’autres indications, comme une icône près du champ en question ou marquez-le dans une autre couleur. Vous pouvez également indiquer dans le code quels champs n’ont pas été remplis correctement en utilisant les attributs ARIA. Ceux-ci permettent parfois aux visiteurs qui ont recours à une technologie d’assistance de retrouver plus facilement l’erreur.

2. Le visiteur doit comprendre quelle est son erreur

Vous devez aussi signaler avec du texte quelle erreur le visiteur a faite. Celle-ci peut être due à un champ obligatoire resté vide ou à un champ mal complété. Par exemple, une date saisie qui se situe en dehors d’une certaine plage de dates (comme une réservation d’hôtel pour une date qui est déjà passée) ou un numéro qui comprend trop peu de chiffres (comme un numéro de téléphone avec seulement 8 chiffres). Le développeur peut ici aussi utiliser des attributs ARIA en plus.

3. Si possible, suggérez une correction

On sait souvent comment remplir un champ de formulaire. Par exemple, il faut introduire 9 ou 10 chiffres pour un numéro de téléphone fixe ou de GSM, et 4 chiffres pour un code postal. Dans ce type de situations, le message d’erreur doit décrire de façon aussi claire que possible au visiteur comment compléter correctement le champ. Cette règle ne s’applique toutefois pas dans des situations où la suggestion poserait des problèmes de sécurité, comme quand le visiteur doit saisir à nouveau son mot de passe pour le confirmer.

Exemple

Vous pouvez montrer les erreurs dans un formulaire à différents moments. La première méthode consiste à le faire en temps réel, c’est-à-dire quand le visiteur est en train de répondre au formulaire. L’erreur lui est signalée dès qu’il sélectionne le champ suivant et que le système détecte que le champ précédent n’a pas été (correctement) complété. L’instruction à côté du champ peut par exemple afficher le message « erreur : [nom du champ] » et le champ peut être marqué dans une autre couleur.

 

Certaines technologies d’assistance ne détectent pas l’erreur

Il peut arriver que certaines technologies d’assistance ne détectent pas le message d’erreur de cette première méthode. Il est donc conseillé de la combiner à une deuxième méthode : un message d’erreur apparaît quand le visiteur a fini de compléter le formulaire et veut l’envoyer. Le contrôle ne se fait qu’à ce moment-là. Signalez avec du texte quelles erreurs ont été retrouvées dans quels champs. Montrez aussi clairement de quels champs il s’agit, en ajoutant par exemple le mot « erreur » dans l’instruction près de ceux-ci et en les marquant dans une autre couleur.

Pour les redacteurs

Le rédacteur est responsable de la clarté des messages d’erreur qu’il rédige.

Pour les développeurs

Le développeur doit veiller à ce que les messages d’erreur soient placés et s’affichent correctement (d’un point de vue technique) sur un formulaire et à ce que les rédacteurs puissent adapter eux-mêmes ces messages pour chaque champ.