Zones live ARIA

Introduction

Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.

Zones « live » basiques

Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.

aria-live :: L’attribut aria-live=VALEUR_POLITESSE est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : off/polite/assertive. La valeur par défaut est off. Cet attribut est de loin le plus important.
aria-controls :: L’attribut aria-controls=[LISTE_IDs] est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un ID dans un élément <div>, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par une espace, par exemple : aria-controls="maZoneID1 maZoneID2".; Nous ne savons pas si aria-controls pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.

Normalement, seul aria-live="polite" est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.

Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec aria-live="off".

Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran

Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

<div role="region" id="bird-info" aria-live="polite">

Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur polite, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.

Préférences de rôles pour les zones « live » spécialisées

Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :

Rôle	Description	Compatibilité
log	Chat, erreur, jeux ou autres types de journalisation	Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle.
status	Une barre d’état ou un zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.	Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle.
alert	Message d’erreur ou avertissement qui clignotera à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)	Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. (TBD : Vérifier que ceci est est nécessaire ou si cela cause des problèmes de double lecture.)
progressbar	Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément).
marquee	Pour faire défiler un texte, comme pour un téléscripteur, ou afficheur alphanumérique.
timer	Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre.

Zones « live » avancées

(TBD : Qu'est-ce qui est pris en charge par qui ?)

aria-atomic :: L’attribut aria-atomic=BOOLÉEN est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont false/true. La valeur par défaut est false.
aria-relevant :: L’attribut aria-relevant=[LISTE_DES_CHANGEMENTS] est utilisé pour définir quel type de changements est adéquate à une zone « Live » – les valeurs possible sont additions (addition)/removals (suppression)/text (texte)/all (tous). La valeur par défaut est « additions text. »
aria-labelledby :: L’attribut aria-labelledby=[LISTE_ID] est utilisé pour associer une zone avec ses labels, similaire à aria-controls mais au-lieu d’associer des labels à la zone encore et encore, les identifiants des labels sont séparé par une espace.
aria-describedby :: L’attribut aria-describedby=[LISTE_ID] est utilisé pour associer un zone avec ses descriptions, similaire à aria-controls mais au-lieu d’associer des descriptions à la zone encore et encore, les identifiants des descriptions sont séparé par une espace.

Cas d’étude avancé : liste de contacts

Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. Afficher une liste d’utilisateurs où l’état de connexion ou de déconnexion des utilisateurs sera dynamiquement interprété (sans actualisation de la page).

<ul id="roster" aria-live="polite" aria-relevant="additions removals">
	<!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs-->
</ul>

Détails des propriétés « live » d’ARIA :

L’attribut aria-live="polite" indique au lecteur d’écran qu’il doit attendre que l’utilisateur soir inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur assertive briserai son flux de lecture.
L’attribut aria-atomic n’est pas défini (false par défaut) ainsi, seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.
L’attribut aria-relevant="additions removals" assure que les utilisateurs ajoutés ainsi que ceux supprimés de la liste seront lu.

TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".