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:
    @import "../../../../theme/assets/styles/sass/variables-import";
    
    .ontario-error-messaging__container {
        display: flex;
        align-items: top;
        margin:-$spacing-1 0 $spacing-2 0;
        color: $ontario-colour-dark-red;
    }
    
    .ontario-error-messaging__content {
        margin-left: $spacing-2;
    }
    
    .ontario-input__error {
        border-color: $ontario-colour-dark-red !important;
    }
    
    .ontario-checkboxes__single-option .ontario-checkboxes__error {
        .ontario-checkboxes__label:before {
            border-color: $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: 534 Bytes
  • Contenu:
    .ontario-error-messaging__container{display:flex;align-items:top;margin:-0.25rem 0 .5rem 0;color:#d81a21}.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: 328 Bytes

Principe directeur: Aider l’utilisateur à réussir du premier coup.

Sur cette page


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

Exemple :

Diagramme d’une page de formulaire indiquant l’emplacement d’un sommaire des erreurs dans le haut de l’écran et les erreurs en ligne au-dessus du texte saisi.

Méthodes de validation de formulaire

Il y a deux façons de valider les formulaires et de fournir les messages d’erreur :

  • validation côté serveur (requise)
  • validation côté client

Validation côté serveur

La validation côté serveur est requise pour tous les formulaires, même si on utilise aussi la validation côté client. Sans validation côté serveur, les données non valides pourraient être soumises si JavaScript a été désactivé.

Validation côté client

La validation côté client utilise des langages de script comme JavaScript et a pour avantage de fournir plus rapidement une rétroaction aux utilisateurs – il n’est pas nécessaire d’aller sur le serveur, de traiter l’information puis de télécharger une autre page HTML.

Si on utilise la validation côté client, assurez-vous qu’il n’y a pas d’incompatibilité entre les règles de la validation côté client et celles de la validation côté serveur.


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.)

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.