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

<div aria-live="polite" class="wb-inv"></div>

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

<div aria-live="polite" class="wb-inv">
   Trié alphabétiquement par nom
</div>

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

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

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

<p aria-live="polite">
   Prix total :
   <span id="total-price">84,52 $</span>
</p>

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


<p aria-live="polite" aria-atomic="true">
   Prix total :
   <span id="total-price">84,52 $</span>
</p>

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

<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>

CSS

.hidden { display: none; }

L’alerte est déclenchée en supprimant le nom de classe CSS hidden :

HTML

<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>

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".

Panier d’achat 0 articles

HTML

<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>
Voir le JavaScript
let counter = 0;
function buy() {
   counter += 1;
   document.getElementById("cart-count").innerHTML = counter;
}
Voir le CSS
.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";
}

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

<div id="countdown" role="timer" aria-atomic="true">
   Il reste <span id="number">45</span> secondes!
</div>

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

<div id="countdown" role="alert" aria-live="assertive" aria-atomic="true">
   Il reste <span id="number">45</span> secondes!
</div>

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
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)
});

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

WAI-ARIA 1.1

Haut de la page