Live regions :
Insertion dynamique de contenu avec CSS

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.

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.

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

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

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

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

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.

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

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

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

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