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

Visuel

Extraits de code

Code HTML

N.B. : On pourrait aussi implémenter un élément de titraille dans l’élément div (à la place du premier p) pour struturer sa page.

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

Code CSS

Pour adapter les couleurs, modifier les codes couleurs dans la déclaration :root.

/** Statut **/
:root {
     --TEXT-color: #015c15;
     --BACKGROUND-color: #D9F7DB;
 }
 [role="status"] {
   margin-top: .5em;
   padding: .5em;
   border: 2px solid var(--TEXT-color);
   border-radius: 4px;
   background: var(--BACKGROUND-color);
   color: var(--TEXT-color);
 }

 [role="status"] p:first-child {
  font-size: 1.5em;
  font-weight: bold;
}