Avis à l’utilisateur

Conception de la notification aux utilisateurs

Lorsqu’un utilisateur soumet un formulaire, avisez-le de la réussite ou de toute erreur.

Assurez-vous que les messages d’erreur sont clairs et concis et fournissent des instructions simples pour résoudre l’erreur.

Comme dans les exemples ci-dessous, fournissez de la rétroaction:

dans l’en-tête principal (optional)
dans l’élément du <title> (optional)
sous forme de liste d’erreurs avant le formulaire
En ligne, associé de manière programmatique au contrôle de formulaire

Bon exemple 1 : Utilisation de l’en-tête principal

HTML

Début du code

<h1>Votre formulaire a été soumis avec succès.</h1>

Fin du code

Bien qu’un message de réussite ait une page dédiée, des erreurs ramènent les utilisateurs au formulaire sur la même page. L’élément existant h1 doit encore décrire la fonction de la page, alors préfacez le sujet existant avec un court message d’erreur :

HTML

Début du code

<h1>2 Erreurs – Coordonnées</h1>

Fin du code

La validation des formulaires de la BOEW utilise un en-tête de niveau 2 réservé au message d’erreur (qui peut être configuré pour être inférieur) :

HTML

Début du code

<h2>Le formulaire n’a pu être soumis parce que deux erreurs ont été détectées.</h2>

Fin du code

Bon exemple 2 : Utilisation de l’élément du titre

L’élément du <titre>, dans l’élément en <tête> de page, est la première chose que les utilisateurs du lecteur d’écran entendent lors du chargement de la page. En préfaçant la valeur du titre existant avec « Succès » ou « Erreurs » (ou « 4 erreurs » si vous avez le nombre), vous donnez une rétroaction immédiate à ces utilisateurs.

HTML

Début du code

<head>
   <title>2 Erreurs : Coordonnées – Inscription – Entreprise X</title>
   […]
</head>

Fin du code

The WET form validation does not leverage the <title> element.

La validation du formulaire de la BOEW ne tire pas parti de l’élément du <titre>.

Bon exemple 3 : Liste des erreurs avant le formulaire

Énumérez les erreurs avant le formulaire et sous un en-tête qui explique ce qui se passe.

Chaque erreur indiquée doit :

Faire référence à l’étiquette de la commande de formulaire correspondant.
Fournir une description concise et facile à comprendre de l’erreur.
Indiquer comment corriger les erreurs et rappeler aux utilisateurs les exigences en matière de format.
Inclure dans la page un lien vers la commande de formulaire correspondante pour faciliter l’accès.

La validation du formulaire de la BOEW numérote également chaque erreur dans la liste et dans la commande.

L'exemple commence

L'exemple finit

Bon exemple 4 : Rétroaction en ligne

Fournir en ligne des commentaires sur la réussite et les erreurs, à même la commande du formulaire. Combiner un indicateur visuel et un message de rétroaction.

Par exemple :

Indiquer les champs de réussite avec le mot vert « OK » préfixé dans l’étiquette, une bordure verte sur la saisie et un crochet vert.
Indiquer les champs d’erreurs avec le mot « Erreur » en rouge préfixé dans l’étiquette, une bordure rouge et des instructions en rouge sur la façon de les corriger.

Dans cet exemple, chaque groupe d’étiquettes, de commandes et de messages est imbriqué dans une <div> avec un nom de classe, soit « réussite » ou « erreur », qui établit la couleur par l’entremise de CSS. Le mot « OK » ou « Erreur » est inséré au début de l’étiquette, ce qui donne un équivalent textuel aux utilisateurs daltoniens. Une rétroaction plus longue est associée à la commande du formulaire au moyen de l’attribut aria-describedby, pointant vers la valeur d’attribut id du message, maintenue dans un élément <span>. Le lecteur d’écran NVDA indique que le crochet est « activé ».

Le traitement de la rétroaction en ligne de la validation des formulaires de la BOEW diffère, comme il est décrit à la section suivante.

L'exemple commence

OK: Nom d’utilisateur: ✓

Erreur: Date d’expiration: Utilisez le format MM/AAAA.

L'exemple finit

HTML

Début du code

<div class="success"> 
   <label for="username"> 
      <strong>OK:</strong>
      Nom d’utilisateur: 
   </label> 
   <input type="text" name="username" id="username" value="Johnny" aria-describedby="userDesc">
   <span id="userDesc">✓</span>
</div> 
<div class="error"> 
   <label for="expire"> 
      <strong>Erreur:</strong>
      Date d’expiration: 
   </label> 
   <input type="text" name="expire" id="expire" value="May 2015" aria-describedby="expDesc">
   <span id="expDesc">tilisez le format MM/AAAA.</span>
</div>
<div>
   <button type="submit">Soumettre</button>
</div>

Fin du code

CSS

Début du code

.error { color: #900; } 
.success { color: #007a00; } 
.error input { border: 3px solid #900; } 
.success input { border: 3px solid #007a00; }
label { display: block; }

Fin du code

Avis aux utilisateurs de la validation des formulaires de la BOEW

La validation des formulaires de la BOEW génère des avis aux utilisateurs qui diffèrent des conseils fournis ci-dessus :

Par défaut, la BOEW utilise un en-tête <h2> pour le sommaire des erreurs et on peut le configurer pour qu’il soit plus faible. Il ne peut pas être réglé à <h1>.
La BOEW ne modifie pas l’élément du <title> pour inclure un message de succès/erreur.
La BOEW ne fournit pas de rétroaction en ligne sur le succès.
La BOEW numérote les erreurs.
Avec la rétroaction en ligne, la BOEW annexe tous les messages d’erreur dans l’étiquette, plutôt que de pointer vers le message avec l’attribut aria-describedby de la commande. Il s’agit d’un contenu verbeux pour une étiquette, mais l’utilisateur est assuré de voir l’information.

The page d’exemple pour la validation des formulaires de la BOEW couvre toute la variété des saisies par l’utilisateur.

Bon exemple : Rétroaction en ligne sur la BOEW

L'exemple commence

URL du site Web (https://www.url.com) (requis)
Erreur 6 : Veuillez entrer une URL valide.

L'exemple finit

HTML

Début du code

<div class="form-group has-error">
   <label for="pcodeca1" class="required">
      <span class="field-name"> URL du site Web (https://www.url.com) </span>  
      <strong class="required">(requis)</strong>
      <strong id="pcodeca1-error" class="error">
         <span class="label label-danger">
            <span class="prefix">Erreur 6 :</span>
            Veuillez entrer une URL valide.
         </span>
      </strong>
   </label>
   <input class="form-control error" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalcodeca="true" aria-invalid="true">
</div>

Ressources WCAG connexes

Critères de succès

Techniques

Haut de la page