Message d'erreur

Un message d'erreur doit apparaître au niveau de chaque champ de formulaire en erreur et proposer des suggestions de coorection. Dans le cas où plusieurs champs sont en erreur, on pourra implémenter au début du formulaire un message global pour signaler que plusieurs champs sont en erreur.

Règles d’implémentation pour l’accessibilité

Lorsqu’au moment de la soumission du formulaire, une erreur est signalée, il faudra messtre à jour le titre de la page en commençant par « Erreur ».

<head>
  [...]
  <title>Erreur - ...</title>
  [...]
</head>

Message d’erreur global

Pour l’affichage du message d’erreur global, référez-vous aux règles d’implémentation d’un message d’alerte exposées dans la rubrique Motifs de conception - Motifs dynamiques -Message d’alerte (le script javascript de cette rubrique ne sera pas nécessaire).

Message d’erreur contextuel

À chaque champ en erreur, sera associé un message d’erreur et des suggestions de correction de l’erreur ; ce message sera positionné au niveau du champ en erreur.
Le champ en erreur aura comme attribut supplémentaire aria-invalid="true".
S’il est court et simple, le message d’erreur pourra être directement intégré entre les balises <label>...</label>.
Pour un message d’erreur et de suggestion de correction nécessitant beaucoup d’informations (comme le modèle d’un mot de passe, par exemple), celui-ci sera positionné après le champ en erreur et relié au champ en erreur de la manière suivante :
- l’élément expliquant l’erreur aura un id ;
- le champ en erreur portera l’attribut aria-describedby avec comme valeur l’id (ou les id) du texte explicatif.
Le focus clavier sera positionné sur le premier champ en erreur du formulaire.

Visuel

Message d’erreur et de suggestion directement intégré entre les balises `label`

Message d’erreur et de suggestion relié au champ en erreur

Extraits de code

Code HTML pour un message directement intégré entre les balises `label`

<label for="identifiant">
Votre identifiant *
<input type="text" id="courriel" name="identifiant" required aria-invalid="true" />
<span class="erreur">Veuillez respecter le format de l'identifiant composé de 2 lettres en majuscules suivies de 6 chiffres. Exemple : AB123456.</span>
</label>

Code HTML pour un message relié au champ en erreur

<label for="mdp">Mot de passe *</label>
<input type="text" id="mdp" name="mdp" required  aria-invalid="true" aria-describedby="erreurMdp">
<div id="erreurMdp" class="erreur">Le mot de passe doit respecter les caractéristiques suivantes : 
  <ul>
    <li>Le mot de passe doit comporter au moins 12 caractères</li>
    <li>Le mot de passe doit se composer de quatre types de caractères différents :
    <ul>
      <li>majuscules</li>
      <li>minuscules</li>
      <li>chiffres</li>
      <li>signes de ponctuation ou caractères spéciaux parmi : + * & # $ € , ; </li>
    </ul>
    </li>
  </ul>
</div>

Code CSS

/** Alerte **/
.erreur {
  color: darkred;
}
.erreur::before {
  content: "";
  background-color: currentColor;
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);
  vertical-align: calc((.65em - var(--icon-size))*.5);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0ibTEyLjg2NiAzIDkuNTI2IDE2LjVhMSAxIDAgMCAxLS44NjYgMS41SDIuNDc0YTEgMSAwIDAgMS0uODY2LTEuNUwxMS4xMzQgM2ExIDEgMCAwIDEgMS43MzIgMFptLTguNjYgMTZoMTUuNTg4TDEyIDUuNSA0LjIwNiAxOVpNMTEgMTZoMnYyaC0ydi0yWm0wLTdoMnY1aC0yVjlaIi8+PC9zdmc+);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0ibTEyLjg2NiAzIDkuNTI2IDE2LjVhMSAxIDAgMCAxLS44NjYgMS41SDIuNDc0YTEgMSAwIDAgMS0uODY2LTEuNUwxMS4xMzQgM2ExIDEgMCAwIDEgMS43MzIgMFptLTguNjYgMTZoMTUuNTg4TDEyIDUuNSA0LjIwNiAxOVpNMTEgMTZoMnYyaC0ydi0yWm0wLTdoMnY1aC0yVjlaIi8+PC9zdmc+);
}
input[aria-invalid="true"] {
  border: 3px solid darkred;
}