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.

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

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

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

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

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

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

.hidden { display: none; }

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

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

let counter = 0;
function buy() {
   counter += 1;
   document.getElementById("cart-count").innerHTML = counter;
}

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

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

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

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