Message d'erreur
Dans un formulaire, un message d’erreur permet d’identifier les éléments de formulaire erronés et d’indiquer le correctif à appliquer.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Voici les variantes disponibles :
- Message avec icône
- Message avec mention textuelle « erreur »
Quand l’utiliser
Les champs ou les éléments en erreur doivent être faciles à repérer. Un message d’erreur peut s’afficher dès qu’un champ ou un élément est hors focus, c’est-à-dire dès que l’utilisateur a terminé la saisie et a cliqué à l’extérieur de l’élément. Le message d’erreur peut également s’afficher au moment où l’utilisateur procède à son envoi. Consulter la fiche Gestion d’erreur pour connaître l’ensemble de ces orientations.
Anatomie
- Indicateur visuel (bordure rouge)
- Icône (ou mention textuelle « erreur »)
- Message textuel
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Indicateur visuel
L’utilisation de la couleur rouge permet de mettre en évidence les champs erronés et de les différencier des champs normaux.
Icône
L’icône à gauche du message textuel aide au repérage de l'erreur pour les utilisateurs ayant une anomalie de la vision affectant la perception des couleurs.
Mention textuelle « erreur »
Il est possible de remplacer l’icône par une mention textuelle « erreur » précédant le message. Dans ce cas, il faut s’assurer de l’appliquer à tous les champs. Il ne peut y avoir à la fois des champs en erreur avec une icône et d’autres avec la mention « erreur » au sein d’un même formulaire ou site.
Message textuel
Le message doit être clair et concis. Il doit préciser la nature de l’erreur. Pour garantir la cohérence et la standardisation des messages, on peut utiliser la structure suivante, nécessitant seulement de changer le libellé du champ : «Le champ [libellé du champ] est obligatoire». Si le message concerne le format attendu d'un champ, il doit être formulé ainsi : « Le format du champ [libellé du champ] doit être [format souhaité] ».
Exemples :
- «Le champ date est obligatoire»
- «Le format du champ date doit être AAAA-MM-JJ»
Une autre formulation est possible, mais elle nécessite davantage de personnalisation. Il s'agit de supprimer le mot « champ » et de ne mentionner que l'objet du champ (le sujet). Cette structure peut toutefois nécessiter un ajustement du déterminant selon le contexte. Par exemple, «[Déterminant] [sujet] est obligatoire» devient : «La date est obligatoire», «Le prénom est obligatoire», etc. S’il s’agit d’indiquer le format attendu d’un champ, il faut écrire : «Le format [déterminant] [sujet] doit être [format souhaité]».
Les messages génériques tels que « Ce champ est erroné » ou « Format invalide » n’aident pas l’utilisateur à corriger le problème. Donner plus d’informations permet de corriger rapidement le problème et diminue les points de frictions.
À ne pas faire
À faire
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
À consulter aussi
Dernière mise à jour : 15 janvier 2026