A quoi correspondent les live regions ARIA et comment fonctionnent-elles ?

Ce que j’ai fait :

• lire l’article Zones live ARIA(lien externe) de Mozilla
• regarder la vidéo Introducing ARIA Live(lien externe) de Udacity
• regarder les vidéos Videos of screen readers using ARIA - Live regions(lien externe) de Zoe Mickley Gillenwater
• lire l’article Utiliser ARIA(lien externe) du Guide du développeur

Ce que j’ai appris

Définition

Les zones “live” sont des parties de la page dont le contenu est mis à jour dynamiquement alors que le focus de l’internaute ne se trouve pas forcément dans la zone en question. Par exemple : les résultats d’un match de foot mis à jour en temps réel ou le signalement de nouveaux messages dans un chatbot.

Jusqu’à encore récemment ces mises à jour de page n’étaient pas bien prises en charge, ce qui pouvait conduire à une relecture intégrale de la page actualisée ou, à l’opposé, ne rien signaler du tout ce qui laissait l’internaute dans l’ignorance la plus totale.

Les zones live ARIA permettent de signaler la mise à jour d’un contenu et de paramétrer la façon dont cette mise à jour est transmise à l’internaute.

Les attributs live regions

aria-live

aria-live permet d’indiquer si une zone est en cours de mise à jour. Cet attribut prend plusieurs valeurs, classées dans l’ordre de priorité avec lequel le lecteur d’écran doit signaler la mise à jour d’un contenu :

• aria-live="off" : c’est la valeur par défaut, la mise à jour de contenu n’est pas signalée

• aria-live="polite" : le contenu mis à jour est restitué dès lors que l’internaute ne réalise aucune action. La mise à jour est considérée comme urgente, mais pas au point d’interrompre l’internaute.

• aria-live="assertive" : le contenu mis à jour est restitué immédiatement, même si l’internaute est occupé à autre chose. Cette valeur est réservée aux messages urgents et importants, par exemple des messages relatifs au statut de la page : “La connexion a échoué, veuillez recharger la page”.

aria-live="assertive" est donc beaucoup plus intrusif que aria-live="polite". C’est ce dernier qui est majoritairement utilisé.

aria-atomic

aria-atomic indique si l’ensemble du contenu mis à jour doit être restitué (aria-atomic="true") ou seulement la partie mise à jour (aria-atomic="false").

La vidéo ARIA Live Regions Screen Reader Demo permet de bien comprendre le fonctionnement des attributs aria-live et aria-atomic et leur différence de restitution par un lecteur d’écran.

aria-relevant

aria-relevant précise les modifications qui sont effectuées, à savoir s’il s’agit :

• d’ajouts de contenus : aria-relevant="additions"

• de suppression de contenus : aria-relevant="removals"

• de contenus uniquement de type texte : aria-relevant="text"

• de modification de tout type de contenu : aria-relevant="all"

Il est possible de combiner plusieurs valeurs en même temps. Par exemple : aria-relevant="text additions".

aria-busy

Il s’agit d’un état ARIA. Il permet d’indiquer si un contenu est en cours de mise à jour ou non.

Exemple

Voici un exemple de mise à jour de live region pour afficher le score de matchs de football :

<!-- Avant la mise à jour -->
<div aria-live="polite" aria-atomic="true" aria-busy="false">Résultat du match : <span>3 - 2</span></div>

<!-- Pendant la mise à jour -->
<div aria-live="polite" aria-atomic="true" aria-busy="true">Résultat du match : <span></span></div>

<!-- Après la mise à jour -->
<div aria-live="polite" aria-atomic="true" aria-busy="false">Résultat du match : <span>3 - 3</span></div>

Le lecteur d’écran restituera “Résultat du match : 3 - 3” - car l’attribut aria-atomic indique de restituer toute la zone et pas uniquement le contenu mis à jour -, quand l’internaute sera inactif et aura cessé de naviguer car l’attribut aria-live a pour valeur polite.

Des attributs à utiliser avec précaution

Les zones live ARIA sont donc particulièrement utiles pour gérer les zones de contenu dymanique. Toutefois, il convient de les utiliser avec précaution, sans quoi ils pourraient se révéler particulièrement invasifs pour l’internaute.

Le Guide du développeur donne l’exemple d’un moteur de recherche qui afficherait ses résultats dans la même page via AJAX. L’utilisation de aria-live sur la zone mise à jour risque d’être particulièrement lourde et contre-indiquée, du fait de la longeur des contenus à restituer. Mieux vaut privilégier une prise de focus sur la zone mise à jour.

Enfin, il est impératif de tester en situation réelle l’usage des zones live, afin d’être sûr du rendu obtenu.