Messages d'erreur
Utilisez les messages d’erreur pour informer l’utilisateur de l’existence de problèmes dans un formulaire et lui expliquer comment les régler.
-
Contenu:
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables; .ontario-error-messaging { display: flex; align-items: flex-start; margin: (spacing.$spacing-1 * -1) spacing.$spacing-0 spacing.$spacing-2 spacing.$spacing-0; color: colours.$ontario-colour-dark-red; max-width: globalVariables.$standard-width; } .ontario-error-messaging__content { margin-left: spacing.$spacing-2; } .ontario-input__error { border-color: colours.$ontario-colour-dark-red !important; } .ontario-checkboxes__single-option .ontario-checkboxes__error { .ontario-checkboxes__label:before { border-color: colours.$ontario-colour-dark-red; } } - URL: /components/raw/error-messaging/error-messaging.scss
- Chemin du système de fichiers: fractal/components/components/form/error-messaging/error-messaging.scss
- Taille: 957 Bytes
-
Contenu:
.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 .5rem 0;color:#d81a21;max-width:48rem}.ontario-error-messaging__content{margin-left:.5rem}.ontario-input__error{border-color:#d81a21 !important}.ontario-checkboxes__single-option .ontario-checkboxes__error .ontario-checkboxes__label:before{border-color:#d81a21} - URL: /components/raw/error-messaging/error-messaging.css
- Chemin du système de fichiers: fractal/components/components/form/error-messaging/error-messaging.css
- Taille: 340 Bytes
Principe directeur: Aider l’utilisateur à réussir du premier coup.
Quand utiliser cette composante
Les messages d’erreur informent l’utilisateur qu’une action a échoué.
Par exemple, si l’utilisateur ne remplit pas correctement un champ ou omet un champ obligatoire, l’application doit l’en informer par un message d’erreur. Ce message doit expliquer, en langage clair, précis et convivial, la nature de l’erreur et la façon d’y remédier.
Il existe trois grands principes à suivre au moment d’utiliser des messages d’erreur dans les formulaires :
- les messages d’erreur doivent être faciles à comprendre.
- les messages d’erreur doivent être faciles à repérer.
- les champs contenant des erreurs doivent être faciles à trouver.
Si un utilisateur soumet un formulaire contenant des erreurs, il faut lui retourner le formulaire et indiquer les erreurs en utilisant :
- un sommaire des erreurs, dans le haut de la page
- les erreurs en ligne à côté des champs visés
Example
Sommaire des erreurs
Un sommaire des erreurs est une alerte de page qui informe l’utilisateur que l’action a échoué et résume de manière générale les champs contenant des erreurs.
La fourniture d’un sommaire des erreurs dans le haut de la page est une bonne pratique pour l’accessibilité, et il est bon de le faire même s’il n’y a qu’une erreur de validation.
Pratiques exemplaires
À faire :
- toujours fournir le sommaire des erreurs dans le haut de la page. S’assurer qu’il chapeaute le titre de premier niveau (
h1). - utiliser « Un problème est survenu » en haut du sommaire des erreurs.
- ajouter « Erreur » au début de la page
<titre>pour que les lecteurs en prennent connaissance dès que possible. - lors du téléchargement de la nouvelle page ou du nouvel affichage, s’assurer que le sommaire des erreurs soit bien en vue.
- ajouter
role="alert"au conteneur du sommaire des erreurs. - dire à l’utilisateur comment corriger les erreurs et lui rappeler les exigences relatives au format.
- inclure un lien intra-page renvoyant à l’élément correspondant du formulaire pour faciliter l’accès des utilisateurs.
- s’assurer que le message d’erreur du lien intra-page dans le sommaire correspond au message d’erreur en ligne de l’élément du formulaire.
Erreurs en ligne
Ces erreurs apparaissent directement au-dessus du champ non valide.
Elles décrivent :
- ce qui n’a pas fonctionné et pourquoi (le problème précis);
- comment on peut corriger la situation (les instructions sur les mesures à prendre).
Les erreurs en ligne doivent être affichées lorsqu’un utilisateur :
- omet de remplir une zone de saisie obligatoire;
- entre un format incorrect dans la zone de saisie;
- omet de sélectionner un bouton radio ou de cocher une case.
Pratiques exemplaires
À faire :
- être clair, concis et précis;
- utiliser un langage positif, simple et utile;
- fournir aux utilisateurs des instructions sur les mesures appropriées à prendre;
- indiquer le problème (ce qui n’a pas fonctionné), sa cause (pourquoi) et la solution (comment l’utilisateur peut le régler);
- placer le texte d’erreur directement au-dessus de la zone de saisie ou du groupe du formulaire (et après le texte d’indication, le cas échéant).
À ne pas faire :
- blâmer l’utilisateur;
- afficher les erreurs dans des infobulles;
- écrire un message d’erreur en majuscules;
- vider les champs contenant une erreur;
- afficher le texte des erreurs en ligne en dessous ou à côté de la zone de saisie du formulaire;
- activer la validation HTML5 (le style visuel, le placement et le contenu des messages d’erreur HTML5 pourraient être incohérents d’un navigateur/appareil à l’autre et ne sont pas compatibles avec le système de conception.)
Méthodes de validation de formulaire
La validation peut intervenir à différents stades d’une interaction d’un utilisateur avec un formulaire.
| Validation en direct | Validation avant soumission | Validation après soumission | |
|---|---|---|---|
| Quand a-t-elle lieu? | When the user’s focus leaves a field after interacting with it | Après que l’utilisateur a effectué une action « Continuer » ou « Soumettre », mais avant que le formulaire ne soit soumis au serveur | Lorsque le formulaire est soumis au serveur |
| Comment est-elle mise en œuvre? | Côté client (JavaScript) | Côté client (JavaScript) | Côté serveur |
| Où sont présentés les renseignements sur les erreurs? |
|
|
|
| Est-elle obligatoire ou recommandée? | Recommandée uniquement lorsqu’elle apporte une valeur ajoutée | Recommandée | Obligatoire |
Validation en direct
Cette technique de validation est utilisée immédiatement après que l’utilisateur a effectué une saisie. Elle permet d’améliorer l’expérience de l’utilisateur dans le cas de champs compliqués ou de formulaires longs.
Effectuez des recherches et des tests pour déterminer si vous devez l’utiliser. Apprenez davantage sur la validation en direct.
Validation avant soumission
Cette technique de validation est utilisée avant qu’un utilisateur ne soumette des données à un serveur.
Par exemple, si l’utilisateur sélectionne le bouton « Soumettre » d’un formulaire en ligne et qu’il y a des erreurs de saisie, le message d’erreur sera écrit dynamiquement sur la page directement.
L’avantage est que les utilisateurs reçoivent une rétroaction plus rapidement : il n’est pas nécessaire de se connecter au serveur, de traiter l’information, puis de télécharger une autre page HTML.
La validation avant soumission utilise des langages de script côté client, tels que JavaScript. Les données de l’utilisateur sont validées par son client ou son navigateur.
Affichez un sommaire des erreurs au-dessus du formulaire et faites en sorte que la cible de saisie de l’utilisateur se porte de nouveau sur celui-ci.
Placez la cible de saisie sur le message d’erreur à l’aide d’un script côté client en utilisant la fonctionnalité focus() de JavaScript.
Si vous utilisez la validation avant soumission, assurez-vous que les règles de validation côté client et côté serveur n’entrent pas en conflit.
Validation après soumission (côté serveur)
La validation après soumission a lieu après qu’un utilisateur a soumis des données à un serveur.
La validation côté serveur est obligatoire pour tous les formulaires, même si vous utilisez également la validation côté client.
Par exemple, lorsqu’un utilisateur sélectionne le bouton « Soumettre » d’un formulaire en ligne, cette action est traitée par un langage de script côté serveur. La rétroaction est ensuite envoyée à l’utilisateur sous la forme d’une nouvelle page Web générée dynamiquement.
Sans validation côté serveur, un utilisateur pourrait soumettre des données non valides si JavaScript était désactivé.
Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.