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 ariarole="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 estassertive
. 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 estfalse
. 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;
}