Zones live ARIA
Aperçu : Zones live ARIA
Les zones live ARIA, développées afin de rendre les contenus dynamiques accessibles aux lecteurs d’écran, sont des zones d’une page Web qui annoncent les mises à jour dynamiques de leur contenu lorsque le focus de l’utilisateur et celui du système sont différents. Exemples de cas d’utilisation de zones live :
- L’utilisateur reçoit un avis sur Facebook/Twitter
- Augmentations de prix sur un afficheur boursier
- Réception d’un nouveau message de clavardage
- Actualisation d’une barre de progression
- Erreur de validation d’un formulaire
- Actualisation du total dans un panier d’achat
- Une section sur les scores sportifs est actualisée périodiquement pour refléter les statistiques d’un match
- Un compte à rebours visible est actualisé une fois par minute
- L’utilisateur clique sur le bouton de carrousel « Suivant » pour passer à une autre diapositive (le contenu de la diapositive est annoncé)
- L’utilisateur trie le contenu d’un tableau par nom, ce qui déclenche l’annonce « Trié alphabétiquement par nom » Dans cette situation, le texte actualisé pourrait être masqué puisque les utilisateurs voyants n’ont pas besoin de la notification.
La norme WAI-ARIA offre quatre attributs qui permettent à l’auteur d’identifier les zones live et leurs propriétés : aria-live
, aria-relevant
, aria-atomic
et aria-busy
. WAI-ARIA offre également cinq rôles spécialisés pour certains types de zones live.
aria-live
Une zone live est désignée par un attribut aria-live
associé à un élément conteneur, p. ex.<span>
ou <div>
. Les navigateurs et l’API d’accessibilité surveillent le conteneur pour détecter tout texte injecté par script. Dès que du texte est injecté dans la zone live, le lecteur d’écran l’annonce.
La zone live doit être vide au moment du chargement de la page, ou lorsqu’elle est ajoutée pour la première fois au DOM. Il est préférable d’ajouter une zone live au moment du chargement de la page, mais si vous ajoutez la zone au DOM de façon dynamique, il est préférable d’attendre au moins 2 secondes pour que l’API d’accessibilité puisse l’identifier avant d’injecter du texte.
L’attribut aria-live
accepte trois valeurs possibles : assertive, polite ou off.
- aria-live="assertive"
- Une annonce assertive interrompt tout ce que lecteur d’écran lit. Utilisez des annonces assertive seulement lorsque l’utilisateur doit être avisé immédiatement.
- aria-live="polite"
- Une annonce polie est retardée jusqu’à ce que le lecteur d’écran termine sa phrase actuelle ou jusqu’à ce que l’utilisateur arrête de taper. Vous utiliserez la valeur polie la plupart du temps.
- aria-live="off"
- Indique au lecteur d’écran de suspendre temporairement les interruptions aria-live.
Le Widget de carrousel utilise aria-live="off"
associé au conteneur de diapositive lorsque les diapositives avancent automatiquement, et aria-live="polite"
lorsque l’utilisateur fait progresser manuellement les diapositives. Ainsi, un diaporama automatique ne pourra pas submerger l’utilisateur d’un lecteur d’écran qui essaie de lire la page, et il sera plus facile de lire un diaporama manuel.
Bon exemple : Attribut aria-live
Ici, un élément <div>
fournit un conteneur pour une zone live, identifié avec l’attribut aria-live="polite"
. L’élément est vide au moment du chargement de la page.
HTML
Début du code
<div aria-live="polite" class="wb-inv"></div>
Fin du code
Lorsque l’utilisateur clique sur un bouton de tri dans l’en-tête d’une colonne de tableau, JavaScript remplit l’élément <div>
avec du texte. Le lecteur d’écran annonce « Trié alphabétiquement par nom ».
HTML
Début du code
<div aria-live="polite" class="wb-inv">
Trié alphabétiquement par nom
</div>
Fin du code
Comme le résultat du tri est apparent pour les utilisateurs visuels, la région en direct est masquée visuellement avec la classe CSS WET .wb-inv
.
CSS
Début du code
.wb-inv {
clip: rect(1px,1px,1px,1px);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
width: 1px;
}
Fin du code
aria-atomic
Utilisez l’attribut aria-atomic
pour préciser si toute la zone live doit être annoncé, ou seulement le texte qui a changé.
- aria-atomic="false"
- Lorsqu’une zone live est actualisée, seul le texte actualisé est annoncé. Utilisez cette valeur lorsque le texte actualisé fait du sens par lui-même. Il s’agit de la valeur par défaut.
- aria-atomic="true"
- Lorsqu’une zone live est actualisée, toute la zone est annoncée. Utilisez cette valeur lorsque le texte statique voisin dans la zone live fournit le contexte nécessaire pour donner un sens au texte actualisé.
Bon exemple : aria-atomic false ou true
Dans ces exemples, le prix total actualisé au cours d’un processus d’achat est annoncé lorsque l’utilisateur ajoute un produit.
Dans ce premier exemple, l’attribut aria-atomic
n’est pas utilisé, de sorte que la valeur par défaut s’applique, c’est-à-dire « false ». Seul le contenu dynamique est annoncé, c’est-à-dire le prix. Si le contenu dynamique n’est pas significatif en soi, il peut facilement confondre les utilisateurs. Dans ce cas, le contenu dynamique à lui seul est vague: « 84,52 $ ».
HTML
Début du code
<p aria-live="polite">
Prix total :
<span id="total-price">84,52 $</span>
</p>
Fin du code
Dans ce deuxième exemple, l’attribut aria-atomique
est fixé à « true ». Tout le contenu de la zone live est annoncé, fournissant le contexte nécessaire pour donner un
sens au contenu dynamique : « Prix total : 84,52 $ ».
HTML
Début du code
<p aria-live="polite" aria-atomic="true">
Prix total :
<span id="total-price">84,52 $</span>
</p>
Fin du code
aria-relevant
L’attribut aria-relevant
spécifie quels types de changement apportés à une zone live doivent être annoncés.
- aria-relevant="all"
- Tous les changements sont annoncés. À utiliser avec prudence, car ce paramètre peut être verbeux.
- aria-relevant="additions"
- Les insertions de nœuds dans la zone live sont annoncées.
- aria-relevant="removals"
- Les suppressions de nœuds dans la zone live sont annoncées. À réserver pour des changements importants, comme un collègue qui quitte une salle de clavardage.
- aria-relevant="text"
- Les modifications au contenu textuel (y compris les équivalents textuels, comme alt text) dans la zone live sont annoncées.
Une zone live a une valeur aria-relevant
implicite « additions » et « text », donc l’attribut n’est pas nécessaire si la conception suppose le comportement normal, c’est-à-dire l’annonce de contenu ajouté. Utilisez seulement l’attribut aria-relevant
si vous devez communiquer la suppression de contenu d’une zone live.
aria-busy
Utilisez l’attribut aria-busy
pour aviser la technologie d’assistance qu’elle devrait ignorer temporairement les changements apportés à un élément lorsque des éléments sont en cours de chargement. Configurez aria-busy="true"
initialement et, une fois tous les éléments chargés, effacez l’attribut ou configurez-le à aria-busy="false"
.
Types particuliers de zone live
role="alert"
Utilisez le rôle ARIA alert
pour annoncer des informations importantes et généralement urgentes qui nécessitent l’attention immédiate de l’utilisateur. Configurer role="alert"
équivaut à configurer aria-live="assertive"
et aria-atomic="true"
. La seule différence réside dans le fait que certains lecteurs d’écran commencent l’annonce en disant « Alerte », pour indiquer à l’utilisateur qu’il s’agit d’une information urgente.
Bon exemple : Utilisation de role="alert"
Dans cet exemple, un élément <div>
utilise l'attribut role="alert"
et la déclaration CSS display: none
.
Suppression de la declaration CSS display: none
déclenche l’annonce de la zone live. Exposer ce texte caché précédemment équivaut à injecter du texte.
L’alerte initiale comporte le nom de classe CSS
hidden
, ce qui masque le texte de l’alerte avec display: none
HTML
Début du code
<form id="updateProfile" method="post" action="javascript:void(0)">
<p><button>Mettre à jour le profil<button></p>
<div class="confirm hidden" role="alert">Votre profil a été mis à jour.</div>
</form>
Fin du code
CSS
Début du code
.hidden { display: none; }
Fin du code
L’alerte est déclenchée en supprimant le nom de classe CSS
hidden
:
HTML
Début du code
<form id="updateProfile" method="post" action="javascript:void(0)">
<p><button>Mettre à jour le profil<button></p>
<div class="confirm" role="alert">Votre profil a été mis à jour.</div>
</form>
Fin du code
role="status"
Utilisez le rôle ARIA status
pour annoncer à
l’utilisateur des informations moins urgentes qu’une alerte.
Configurer role="status"
équivaut à configurer
aria-live="polite"
et
aria-atomic="true"
.
Si un élément de la page contrôle ce qui est affiché dans l’état,
attribuez à l’élément de contrôle l’attribut
aria-controls="IDREF"
en pointant vers la valeur
d’attribut id
de l’élément avec
role="status"
.
Bon exemple : Utilisation de role="status"
Dans cet exemple, un paragraphe comportant l'attribut role="status"
affiche le nombre d’articles dans un panier d’achat. Puisque role="status"
par défaut utilise aria-atomic="true"
, l’ensemble du contenu du paragraphe est annoncé. Lorsque le nombre d’articles est actualisé, l’annonce de la zone live est activée. Les lecteurs d’écran déclarent le texte visuellement caché "Panier d'achat", le nombre d’articles actualisé et le mot « articles ».
L'attribut title
du <span>
contenant l'icône fournit une étiquette visuelle aux utilisateurs de la souris. Comme la prise en charge de l'attribut title
n'est pas uniforme d'un lecteur d'écran à l'autre, l'élément est masqué pour tous les lecteurs d'écran (à l'aide de l'attribut aria-hidden="true"
) et le texte visuellement masqué, plus fiable, est utilisé pour étiqueter l'icône (à l'aide de la classe CSS WET .wb-inv
).
L’attribut aria-controls="IDREF"
est associé
au bouton et reçoit la valeur d’attribut id
de
l’élément qui utilise l'attribut role="status"
.
L'exemple commence
Panier d’achat 0 articles
L'exemple finit
HTML
Début du code
<p role="status" id="cart">
<span title="Panier d’achat" aria-hidden="true" class="glyphicon glyphicon-shopping-cart"></span>
<span class="wb-inv">Panier d’achat</span>
<span id="cart-count">0</span>
articles
</p>
<button id="btn" onclick="buy()" aria-controls="cart">Ajouter au panier</button>
Fin du code
Voir le JavaScript
Début du code
let counter = 0;
function buy() {
counter += 1;
document.getElementById("cart-count").innerHTML = counter;
}
Fin du code
Voir le CSS
Début du code
.wb-inv {
clip: rect(1px,1px,1px,1px);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
width: 1px;
}
.glyphicon {
position: relative;
top: 2px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.glyphicon-shopping-cart:before {
content: "\e116";
}
Fin du code
role="timer"
Utilisez le rôle ARIA timer
pour identifier un
compteur numérique indiquant le temps écoulé depuis un point de
départ ou le temps restant avant un point de fin. Le rôle comporte
la valeur implicite aria-live="off"
pour éviter que
des annonces trop fréquentes submergent l’utilisateur du lecteur
d’écran. Toutefois, vous pouvez annoncer le délai à intervalles
réguliers en utilisant JavaScript pour définir brièvement les
attributs aria-live="assertive"
et
role="alert"
de manière à ignorer
aria-live="off"
et role="timer"
.
Bon exemple : Compte à rebours annoncé à intervalles réguliers
Dans cet exemple, un compte à rebours utilise
role="timer"
, et est donc silencieux pour les
lecteurs d’écran en raison de son paramètre implicite
aria-live="off"
.
HTML
Début du code
<div id="countdown" role="timer" aria-atomic="true">
Il reste <span id="number">45</span> secondes!
</div>
Fin du code
Toutefois, à des intervalles de 15 secondes, JavaScript
ajoute brièvement l’attribut
aria-live ="assertive"
et remplace le rôle
timer
par role="alert"
. Les lecteurs
d’écran annoncent l’alerte initiale, « Il reste
60 secondes! », puis le temps restant toutes les
15 secondes : « Il reste
45 secondes! », etc.
HTML
Début du code
<div id="countdown" role="alert" aria-live="assertive" aria-atomic="true">
Il reste <span id="number">45</span> secondes!
</div>
Fin du code
En fait, un intervalle de 15 secondes entre les annonces est trop courte en pratique et nous l’utilisons ici simplement pour illustrer la technique. Une minute est un intervalle plus pratique.
Faites l’essai en visitant la démonstration (S'ouvre dans un nouvel onglet) avec un lecteur d’écran.
Voir le JavaScript
Début du code
function decrement() {
var numElement = document.getElementById('number');
var newNumber = parseInt(numElement.textContent - 1);
if (newNumber > -1) {
numElement.textContent = newNumber;
}
if ((newNumber % 15)===0 || newNumber == 0) {
setAlert();
}
}
function setAlert() {
var liveRegion = document.getElementById('countdown');
liveRegion.setAttribute('aria-live', 'assertive');
liveRegion.setAttribute('role', 'alert');
setTimeout(function() {
liveRegion.removeAttribute('aria-live');
liveRegion.setAttribute('role', 'timer');
}, 999);
}
window.setInterval(function() {
decrement();
}, 1000);
window.addEventListener('load', function () {
setAlert(); //alerte à 60 secondes (ou au début)
});
Fin du code
role="marquee"
Utilisez le rôle ARIA marquee
pour définir une zone comme un type de
zone live comportant des annonces non essentielles qui changent
fréquemment. Par exemple, le contenu d’un afficheur boursier et les
bannières publicitaires fréquemment actualisées.
Les éléments comportant le rôle marquee
ont une valeur aria-live="off"
implicite. Comme pour le rôle timer
, le contenu change trop
fréquemment pour être annoncé par les lecteurs d’écran. Les
utilisateurs de lecteur d’écran peuvent néanmoins naviguer jusqu’à la
zone pour lire le texte.
Une zone marquee doit avoir un nom accessible. Si une étiquette
visible est présente, utilisez aria-labelledby
; sinon, utilisez
aria-label
.
role="log"
Utilisez le rôle ARIA log
pour faire le suivi des actualisations
séquentielles, comme un journal de clavardage, un historique des
messages, un journal de jeu ou un journal d’erreurs. Les nouvelles
informations sont ajoutées à la fin et, facultativement, les
informations plus anciennes sont supprimées du début. Les
actualisations de la zone live sont annoncées lorsque l’utilisateur
est inactif. La zone live définie par role="log"
comporte des valeurs
implicites d’attribut aria-live="polite"
et aria-atomic="true"
.
Ressources WCAG connexes
Ressources WCAG connexes
Critères de succès
Techniques
- ARIA19 : Utiliser ARIA role=alert ou des régions réelles pour identifier des erreurs (en anglais)
- ARIA22 : Utiliser role="status" pour présenter les messages d’état de l’instance (en anglais)
- ARIA23 : Utiliser role=log pour identifier des mises à jour séquentielles de l’information (en anglais)