Message de statut

Un message statut ou de notification fournit une information ou un avertissement non critique (contrairement au message d'alerte).

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

• L’affichage d’un message de notification ne nécessite pas de rechargement de la page.
• Un message de notification 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 notification ne doit pas disparaître automatiquement ; seule une action de l’utilisateur peut la faire disparaître (bouton de fermeture, rechargement de la page…).

Visuel

Extraits de code

Code HTML

<button type="button" id="statutBouton">Afficher la notification</button>
<div id="statutZone" role="status"></div>
<script type="text/template" id="statutInfo">
<button id="btnStatutClose">
X <span class="sr-only">Masquer le message</span></button>
    <h3>Bravo !</h3>
    <p>Vous développez du code accessible.</p>
</script>

Code CSS

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

/** Statut **/
:root {
     --TEXT-color: #015c15;
     --BACKGROUND-color: #D9F7DB;
 }
 #btnStatutClose {
  background-color: transparent;
  border:0;
  color: var(--TEXT-color);
  float: right;
  padding: .25em .5em;
}
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
#btnStatutClose:focus {
  outline: 2px solid var(--TEXT-color);
}
#statutZone h3 {
  color: var(--TEXT-color);
  margin: 0;
}
 [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"]:empty {
   display: none;
 }

Code javascript

Le code javascript est utilisé pour la démonstration. Il est tout à fait possible d’implémenter du contenu dans la zone de notification d’une autre manière.

window.addEventListener('load', function () {
  const button = document.getElementById('statutBouton');
  button.addEventListener('click', addAlert);
});

function addAlert() {
  const zoneStatut = document.getElementById('statutZone');
  const contenuStatut = document.getElementById('statutInfo')
  zoneStatut.innerHTML = contenuStatut.innerHTML;
  document.getElementById('btnStatutClose').focus()
}

document.body.addEventListener("click", (evt) => {
  if (evt.target.matches("#btnStatutClose")) {
    const node = document.getElementById("statutZone");
    node.parentNode.removeChild(node);
    document.getElementById('statutBouton').focus();
  }
});