Consulter l’article dédié : Live regions ARIA : comment garantir leur restitution par les lecteurs d’écran ?

Description des tests

Dans cette page, nous testons la restitution d'un message inséré lorsqu'on actionne un bouton.

Nous testons deux exemples :

  1. Insertion de contenu dans une live region précédemment définie
  2. Insertion de la live region et de son contenu simultanément

Pour chaque exemple, la restitution est testée pour les rôles alert, status et log ainsi que pour leur équivalent avec les propriétés aria-live et aria-atomic, comme détaillé dans le tableau suivant.

Valeur pour aria-live Valeur pour aria-atomic
role="alert" assertive true
role="status" polite true
role="log" polite false (défaut)

Versions utilisées des lecteurs d'écrans et navigateurs :

Bureau :

  • JAWS 2024 / Firefox 122.0.1
  • JAWS 2024 / Chrome 121
  • JAWS 2024 / Edge 121
  • NVDA 2023.3.3 / Firefox 122.0.1
  • NVDA 2023.3.3 / Chrome 121
  • VoiceOver / Safari / macOS Sonoma 14

Mobile :

  • Safari / VoiceOver / IOS 17.3.1
  • Chrome 121 / Talkback 14.1

Exemple 1 : la live region existe dans le DOM au chargement de la page

Avec cette méthode, la live region existe dans le DOM au chargement de la page. C'est son contenu qui est inséré dynamiquement dans le code HTML afin de déclencher l'apparition du message de statut.

Code

Exemple de code au chargement de la page, avec un rôle alert :

<!-- Live regions -->
<div role="alert"></div>

Et l'équivalent avec les propriétés aria-live et aria-atomic :

<!-- Live regions -->
<div aria-live="assertive" aria-atomic="true"></div>

Le code généré après l'action utilisateur, avec un rôle alert :

<!-- Live regions -->
<div role="alert"><p>Message de test avec role</p></div>

Et l'équivalent avec les propriétés aria-live et aria-atomic :

<!-- Live regions -->
<div aria-live="assertive" aria-atomic="true"><p>Message de test avec aria-live</p></div>
Démo
Tester le message de statut de type :
Résultats des tests de restitution

Les cellules marquées d'un V signifient que le message est bien restitué.

Les cellules marquées d'une croix signifient que le message n'est pas restitué.

Résultats des tests de restitution du message de statut inséré avec Javascript lorsque le conteneur est présent dans le DOM au chargement de la page.
Les types de messages ("Alert", "Status" et "Log") sont présentées sur 3 colonnes. Pour chacun d’eux, on distingue le résultat obtenu avec l'utilisation du role et avec les propriétés aria-live et aria-atomic. Les lignes correspondent aux couples lecteur d'écran/navigateur.
Type "alert" Type "status" Type "log"
avec role avec aria-live avec role aria-live avec role avec aria-live
JAWS/Firefox restitution conforme restitution non conforme restitution conforme restitution non conforme restitution conforme restitution conforme
JAWS/Chrome restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
JAWS/Edge restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
NVDA/Firefox restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
NVDA/Chrome restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
VoiceOver macOS/Safari restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
Talkback/Chrome restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
VoiceOver IOS/Safari restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme

Exemple 2 : la live region n'existe pas dans le DOM au chargement de la page

Avec cette méthode, la live region n'existe pas dans le DOM au chargement de la page. Elle est insérée dynamiquement dans le code HTML avec son contenu afin de déclencher l'apparition du message de statut.

Code

Au chargement de la page, l'élément avec un rôle alert ou l'équivalent avec les propriétés aria-live et aria-atomic n'existe pas dans le code.

<!-- Live regions -->

Le code généré après l'action utilisateur, avec un rôle alert :

<!-- Live regions -->
<div role="alert"><p>Message de test avec role</p></div>

Et l'équivalent avec les propriétés aria-live et aria-atomic :

<!-- Live regions -->
<div aria-live="assertive" aria-atomic="true"><p>Message de test avec aria-live</p></div>
Démo
Tester le message de statut de type :
Résultats des tests de restitution

Les cellules marquées d'un V signifient que le message est bien restitué.

Les cellules marquées d'une croix signifient que le message n'est pas restitué.

Résultats des tests de restitution du message de statut inséré avec Javascript lorsque le conteneur n'est pas présent dans le DOM au chargement de la page.
Les types de messages ("Alert", "Status" et "Log") sont présentées sur 3 colonnes. Pour chacun d’eux, on distingue le résultat obtenu avec l'utilisation du role et avec les propriétés aria-live et aria-atomic. Les lignes correspondent aux couples lecteur d'écran/navigateur.
Type "alert" Type "status" Type "log"
avec role avec aria-live avec role avec aria-live avec role avec aria-live
JAWS/Firefox restitution conforme restitution non conforme restitution conforme restitution non conforme restitution conforme restitution conforme
JAWS/Chrome restitution conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme
JAWS/Edge restitution conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme
NVDA/Firefox restitution conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme
NVDA/Chrome restitution conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme restitution non conforme
VoiceOver macOS/Safari restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
Talkback/Chrome restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme
VoiceOver IOS/Safari restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme restitution conforme

Retour à l’index des tests