Utiliser le rôle log

Cette technique présente l'utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d'assistance.

Le rôle log est utilisé pour identifier un élément qui crée une zone live où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l'historique d'une messagerie ou un fichier d'erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l'enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement log accessible aux produits de technologie d'assistance qui pourront alors le notifier à l'utilisateur.

Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser aria-atomic="true". Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, aria-live="assertive" peut être défini pour lancer des mises à jour plus agressives.

Lorsque le rôle log est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes :

• Présenter l'élément ayant un rôle de journal à l'API d'accessibilité du système d'exploitation ;
• Déclencher un événement journal accessible à l'aide de l'API d'accessibilité du système d'exploitation si elle le prend en charge.

Les technologies d'assistance devraient être à l'écoute de tels événements et les notifier à l'utilisateur en conséquence :

• Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que aria-live="assertive" soit défini, dans quel cas l'utilisateur peut être interrompu.
• Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.

Exemple 1 : Ajout du rôle dans du code HTML

L'extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

<div id="liveregion" class="region" role="log"></div>

Exemple 2 : Extrait d'un exemple d'application

Cet extrait de code crée le journal dans une application de chat AJAX.

<div id="chatArea" role="log">
  <ul id="chatRegion" aria-live="polite" aria-atomic="false">
    <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li>
  </ul>

  <ul
    id="userListRegion"
    aria-live="off"
    aria-relevant="additions removals text"></ul>
</div>

Voir l'exemple sur CodeTalks pour plus d'informations.

Exemples concrets

• http://test.cita.illinois.edu/aria/live/live1.php ;
• http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ ;
• http://codetalks.org/source/live/chat.html [notes].

• L'utilisation du rôle log sur un élément implique que cet élément possède l'attribut aria-live="polite".
• Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle marquee.

• log.

• Rôle marquee.

• Bonnes pratiques ARIA – Implémentation des zones live : #LiveRegions.