Rôles dynamiques

Les rôles dynamiques (live region) sont utilisés pour définir des éléments dont le contenu sera modifié dynamiquement.

Les rôles « Live Region » permettent aux les utilisateurs utilisant des logciels de synthèse vocale d’être informé d’une mise à jour dynamique du contenu de la page. Ces « Live Region » comprennent plusieurs rôles aria (attribut role) dont alert et status.

Le rôle alert

Le rôle alert est utilisé pour communiquer un message important, et généralement urgent, à la personne. Lorsque ce rôle est ajouté à un élément, le navigateur enverra un évènement d’alerte accessible aux outils d’assistance qui pourront alors notifier la personne.

  • Le rôle alert doit uniquement être utilisé pour le contenu texte et pas pour les éléments interactifs comme les liens ou les boutons.
  • Le rôle alert est destiné au contenu affiché dynamiquement. Il ne doit pas être utilisé pour du contenu qui apparaît au chargement initial de la page.
  • Les alertes doivent uniquement être annoncées lorsque le contenu de l’élément ayant role="alert" est mis à jour. Par conséquent, il est nécessaire que l’élément avec le rôle alert soit initialement présent dans le balisage de la page, cela permettra d’amorcer le navigateur et le lecteur d’écran qui surveilleront alors les changements sur l’élément.
  • Il n’est pas nécessaire que les éléments avec le rôle alert puissent recevoir le focus, les outils d’assistance annonceront le contenu mis à jour lorsque le rôle est ajouté, quel que soit l’état du focus.

remarque

Lorsque le rôle alert est présent, chaque changement apporté au contenu est annoncé, et il faut donc l'utiliser avec parcimonie. Par définition, les alertes sont perturbantes. S'il y a plusieurs alertes simultanées ou des alertes inutiles, l'expérience utilisateur sera médiocre.

Exemple de code

HTML
Code au chargement de la page. La zone sera ensuite peuplée dynamiquement selon les interactions de l’utilisateur avec la page.

<div role="alert"></div>

CSS
Cette déclaration permet de ne pas afficher la zone à l’écran lorsqu’elle est vide.

div[role="alert"]:empty {
     display: none;
}

Rôle status

Le rôle status est une zone dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte.
Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.
Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut aria-controls.

Exemple de code

HTML
Code au chargement de la page. La zone sera ensuite peuplée dynamiquement selon les interactions de l’utilisateur avec la page.

<div role="status"></div>

<!-- Avec un bouton de contrôle -->
<button aria-controls="monStatut">Ya quelqu'un ?</button>
<div role="status" id="monStatut"></div>

CSS
Cette déclaration permet de ne pas afficher la zone à l’écran lorsqu’elle est vide.

div[role="status"]:empty {
     display: none;
}