Voir l'article associé

Description des tests

Dans cette page, nous testons la restitution d'un message affiché avec la propriété CSS display lorsqu'on actionne un bouton.

Nous testons deux exemples :

  1. Affichage du contenu dans une live region déjà visible (mais vide)
  2. Affichage 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. La propriété CSS display:none est définie sur son contenu, et passe à true afin de déclencher l'apparition du message de statut.

Remarque :
Dans les exemples ci-dessous, la propriété display est définie au moyen d'un style en ligne directement dans la balise <p> mais le résultat est identique si on la définit dans une feuille de style interne ou externe.

Code

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

<!-- Live regions -->
<div role="alert">
  <p style="display:none;">Message de test</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 style="display:none;">Message de test</p>
</div>

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

<!-- Live regions -->
<div role="alert">
  <p style="display:block;">Message de test</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 style="display:block;">Message de test</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 affiché avec CSS avec la propriété display définie sur le contenu.
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 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 propriété CSS display:none est définie sur la live region elle-même, ce qui l'exclut du DOM. Elle n'y est insérée qu'au moment ou la valeur de display passe à true afin de déclencher l'apparition du message de statut.

Remarque :
Dans les exemples ci-dessous, la propriété display est définie au moyen d'un style en ligne directement dans la balise <div> mais le résultat est identique si on la définit dans une feuille de style interne ou externe.

Code

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

<!-- Live regions -->
<div role="alert" style="display:none;">
  <p>Message de test</p>
</div>

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

<!-- Live regions -->
<div aria-live="assertive" aria-atomic="true" style="display:none;">
  <p>Message de test</p>
</div>

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

<!-- Live regions -->
<div role="alert" style="display:block;">
  <p>Message de test</p>
</div>

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

<!-- Live regions -->
<div aria-live="assertive" aria-atomic="true" style="display:block;">
  <p>Message de test</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 affiché avec CSS avec la propriété display définie sur le conteneur.
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.
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