Message d'alerte

Une alerte est déclenchée par un événement, tel qu'une erreur, une condition d'avertissement ou l'arrivée d'informations importantes.

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

• L’affichage d’un message d’alerte ne nécessite pas de rechargement de la page.
• Un message d’alerte est une zone définit par l’élément HTML div et porte le rôle aria role="alert".
• La zone d’alerte 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’alerte 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

Une fois le message d’alerte fermé, pour tester à nouveau l’affichage du message, il vous faudra recharger la page ; le bouton de fermeture supprimant entièrement le texte du DOM.

Extraits de code

Code HTML

<button type="button" id="alerteBouton">Afficher l'alerte</button>
<div id="alerteZone" role="alert"></div>
<script type="text/template" id="alerteInfo">
<button id="btnAlerteClose" autofocus>
X <span class="sr-only">Masquer le message</span></button>
    <h3>Alerte info</h3>
    <p>Tant que ce n'est pas accessible, ce n'est pas terminé !</p>
</script>

Code CSS

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

/** Alerte **/
:root {
     --TEXT-color: #7c0303;
     --BACKGROUND-color: #F4CDCD;
 }
.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;
}
#btnAlerteClose {
  background-color: transparent;
  border:0;
  color: var(--TEXT-color);
  float: right;
  padding: .25em .5em;
}
#btnAlerteClose:focus {
  outline: 2px solid var(--TEXT-color);
}
#alerteZone h3 {
  color: var(--TEXT-color);
  margin: 0;
}
 [role="alert"] {
   margin-top: .5em;
   padding: .5em;
   border: 2px solid var(--TEXT-color);
   border-radius: 4px;
   background: var(--BACKGROUND-color);
   color: var(--TEXT-color);
 }
 [role="alert"]: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 d’alerte d’une autre manière.

/** Adaptation du pattern "Alert" du W3C */

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

function addAlert() {
  const zoneAlerte = document.getElementById('alerteZone');
  const contenuAlerte = document.getElementById('alerteInfo')
  zoneAlerte.innerHTML = contenuAlerte.innerHTML;
  document.getElementById('btnAlerteClose').focus();
}

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

});