L'attribut aria-live et le role alert

  • Web
  • Intermédiaire

Les utilisateurs qui naviguent à l'aide d'un lecteur d'écran ne sont pas toujours au courant des modifications apportées dans la page. Lorsqu'une information est actualisée ou lorsqu'un message apparaît il est parfois nécessaire de faire parler le lecteur d'écran pour informer l'utilisateur. Pour ce faire, le language ARIA dispose du role alert et de l'attribut aria-live.

Le role alert #

Positionné sur un élément HTML, celui-ci permet d'indiquer au lecteur d'écran de vocaliser l'élément automatiquement lors de sa création. Veiller toutefois à utiliser ce rôle uniquement dans les cas appropriés, comme il est clairement indiqué dans la documentation MDN de Mozilla. De fait de sa nature intrusive, le role alert doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que aria-live="polite" ou autres rôles de zone live.

Pour déclencher une alerte, plusieurs méthodes sont possibles, avec des supports qui différent en fonction du couple navigateur et lecteur d'écran utilisé. Vous pouvez consulter l'article de Steve Faulkner (en anglais) à ce sujet.

Voici quelques exemples de méthodes qui sont bien supportées.

Créer un nouvel élément dans le DOM #

On peut déclencher une alerte en insérant un nouvel élément dans le DOM via Javascript.

<span role="alert">Ceci est un message d'alerte.</span>

Ajouter un role alert sur un élément existant #

Le déclenchement d'une alerte peut également s'effectuer en ajoutant un role="alert", à un élément existant, dynamiquement via Javascript.


document.getElementById('alert').setAttribute("role", "alert");

Utiliser innerHTML #

Créer une alerte via la propriété innerHTML.


element.innerHTML = '<div role="alert">Ceci est une alerte</div>';

L'attribut aria-live #

Positionné sur un élément HTML, l'attribut aria-live permet d'indiquer au lecteur d'écran que toute modification apportée à son contenu entraînera une vocalisation par le lecteur d'écran.

Trois valeurs sont possibles :

  • Off : aucune vocalisation
  • Polite : la vocalisation aura lieu lorsque le lecteur d'écran aura fini la tâche en cours
  • Assertive : le lecteur d'écran interrompt la tâche en cours pour informer l'utilisateur

Il est fortement recommandé que l'attribut aria-live soit positionné sur l'élément dès le chargement de la page pour maximiser la compatibilité avec les différents couples navigateurs et lecteurs d'écran.


<span aria-live="polite">5 éléments sélectionnés</span>

Des attributs supplémentaires permettent de modifier finement le comportement par défaut d'aria-live :

  • aria-atomic : true ou false (défaut), permet d'indiquer si la totalité de la zone live doit être lue (true) ou seulement la partie modifiée (false).
  • aria-relevant : indique quel type de changement déclenche une vocalisation, valeurs possibles : additions (défaut), removals, all.

Enfin pour être complet, sachez que le langage ARIA prévoit également quelques roles spécifiques, status et log notamment qui peuvent s'avérer utiles dans certains cas (barre d'état, journalisation, chat…) et qui pour le moment doivent être utilisés en complément de l'attribut aria-live pour maximiser la prise en charge par les outils d'assistance. Vous trouverez plus d'infos sur ces roles dans les liens ci-dessous.

Références #