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

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">
  <p>Attention, si 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;
 }
 [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.

/*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
 */

'use strict';

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

function addAlert() {
  var alerte = document.getElementById('alerteZone');
  var template = document.getElementById('alerteInfo').innerHTML;
  alerte.innerHTML = template;
}