Message de succès

Lorsque la soumission du formulaire s'est bien passée, une bonne pratique consiste à informer l'utilisateur du bon déroulement de la procédure.

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

Le message de succès est une zone définit par l’élément HTML div et porte le rôle aria role="status".
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 de succès ne doit pas disparaître automatiquement ; seule une action de l’utilisateur peut la faire disparaître (bouton de fermeture, appel à une autre page…).

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.

Visuel

Succès

Vos informations ont bien été prises en compte.

Extraits de code

Code HTML

<div role="status" aria-live="polite">
<h2>Succès<p>
<p>Vos informations ont bien été prises en compte.</p>
</div>

Code CSS

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