Message d'erreur

Chaque erreur doit être signalée et proposer des suggestions de correction tant lors de la saisie (cas vérification native au champ de formulaire) qu'après la soumission du formulaire.

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

Au moment de la soumission du formulaire, si un ou plusieurs champs sont en erreur, il faudra :

  • mettre à jour le titre de la page en commençant par « Erreur » ;
  • implémenter au début du formulaire un message global pour signaler que un ou plusieurs champs sont en erreur ;
  • signaler chaque champ en erreur et apporter des informations de correction de l’erreur.

Titre du document HTML

Le titre du document HTML sera mis à jour en commençant par « Erreur ».

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

Message d’erreur global

  • Le message d’erreur est une zone définit par l’élément HTML div et porte le rôle aria role="alert".
  • La zone de notification est inplémentée vide dans le code HTML et ne sera peuplée de contenu qu’en cas de besoin.
  • Il est possible de spécifier la façon dont le logiciel de synthèse vocale restitura l’information quand la zone sera peuplée d’informations via les attributs aria :
    • aria-live : permet d’indiquer à quel moment le logiciel de synthèse vocale va restituer l’information. Par défaut (donc inutile de le spécifier) la valeur est assertive. Les valeurs possibles sont :
      • aria-live="assertive" : indique aux technologies d’assistance d’interrompre d’autres processus pour fournir aux utilisateurs une notification immédiate des modifications pertinentes du conteneur d’alerte.
      • aria-live="polite" : indique aux technologies d’assistance que le contenu de la zone d’alerte doivent être vocalisée à la prochaine opportunité, comme à la fin de la phrase en cours ou lorsque l’utilisateur interrompt sa saisie.
      • aria-live="off" : indique aux technologies d’assistance que le contenu de la zone d’alerte ne doit pas être vocalisé sauf si l’utilisateur se positionne sur cette zone.
    • aria-atomic : permet d’indiquer si la totalité de la zone d’alerte doit être lue ou seulement la partie modifiée. Par défaut (donc inutile de le spécifier) la valeur est false. Les valeurs possibles sont :
      • aria-atomic="true" : indique aux technologies d’assistance que la totalité de la zone d’alerte doit être lue.
      • aria-atomic="false" : indique aux technologies d’assistance de ne vocaliser que la partie modifée de la zone d’alerte.
  • Le message d’erreur ne doit pas disparaître automatiquement ; seule une action de l’utilisateur peut la faire disparaître (bouton de fermeture, appel à une autre page, nouvelle soumission du formulaire,…).

Il est fortement recommandé de positionner dès le chargement de la page l’attribut aria-live pour maximiser la compatibilité avec les différents couples navigateurs et lecteurs d’écran. Par conséquent cette zone sera prévue dès le chargement de la page et peuplée en cas d’erreur.

Message d’erreur contextuel

La gestion des erreurs doit suivre les règles suivantes :

  • Pour le champ en erreur :
    • Il est relié au message d’erreur grâce à l’attribut aria-describedby pour pouvoir être restitué par les logiciels de synthèse vocale 
    • Il (et/ou son label) n’est pas signalé uniquement par la couleur (le champ en erreur pourra alors avoir une bordure plus grosse par exemple et son libellé écrit en gras) ;
    • Il possède l’attribut aria-invalid="true"  ;
    • Le focus clavier est mis sur le premier champ en erreur afin de pouvoir parcourir tout le formulaire ;
  • Pour le message d’erreur :
  • Il est accolé au champ en erreur ;
  • Il explique les raisons de l’erreur de manière claire et sans ambiguïté ;
  • Il rappelle ce qui est attendu dans le champ et donne des suggestions de correction (exemple : Veuillez renseigner un email valide du type nom@domaine.fr) ;
  • Le message d’erreur pour un champ obligatoire est contextualisé et unique (exemple : Le champ “Nom” est obligatoire) ;
  • Il est inséré dans une zone (élément HTML div) portant l’attribut id le reliant au champ ;
  • Pour maximiser la compatibilité avec les logiciels de synthèse vocale (même si cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.), la zone du message d’erreur (élément HTML div) aura l’attribut aria-live="assertive".

remarque

Il est fortement recommandé de positionner dès le chargement de la page l’attribut aria-live pour maximiser la compatibilité avec les différents couples navigateurs et lecteurs d’écran. Par conséquent ces zones seront prévues dès le chargement de la page et peuplées uniquement en cas d’erreur.

Exemple de message d’erreur global

Visuel

Erreur

Il y a 2 erreurs dans le formulaire.

Code HTML

<div role="alert" aria-live="assertive">
  <h2>Erreur</h2>
  <p>Il y a 2 erreurs dans le formulaire.</p>
</div>

Code CSS

div[role="alert"] {
  padding: 1.25rem ;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  color: darkred;
  background-color: #FFD6D6;
  border-left: 0.75rem solid darkred;
}
div[role="alert"] h2  {
  font-weight: bold;
  font-variant: small-caps;
  font-size: 1.75rem;
  margin-bottom: 0;
}
div[role="alert"] p:last-of-type {
  margin-bottom: 0;
}
div[role="alert"]:empty {
  display: none;
}

Exemple de message d’erreur contextuel

Visuel

Veuillez renseigner un email valide (prenom.nom@domaine.fr)

Code HTML

Remarquez dans le code ci-dessous que l’élément input se trouve dans l’élément label.

<label for="email">Adresse e-mail
<input type="email" id="email" name="email" autocomplete="email" required aria-invalid="true"  aria-describedby="erreurEmail" />
</label>
<div id="erreurEmail" aria-live="assertive" class="erreurContexte"></div>

Code CSS

label {
  display: block;
}
label:has([aria-invalid="true"]) {
  color: darkred;
}
input {
  width: 300px;
  display: block;
  padding: 0.5em 0.75em;
}
input[aria-invalid="true"] {
  border: 3px solid darkred;
}
div[aria-live="assertive"]:empty {
  display: none;
}
.erreurContexte {
  color: darkred;
}
.erreurContexte p:first-child::before {
   --icon-size: 1rem;
  content: "";
  background-color: currentColor;
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);
  vertical-align: calc((.75em - var(--icon-size))*.5);
  margin-right: calc(var(--icon-size)*0.25);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
}