Régions dynamiques : `aria-live`, `aria-atomic`, `aria-relevant`

Que sont les régions dynamiques ?

Créer une région dynamique

<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>

<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>

Récapitulatif des valeurs de aria-live

aria-atomic en détail

<div aria-live="polite" aria-atomic="false">  <!-- default -->
  Items in cart: <span id="count">3</span>
</div>
<!-- Only the changed span is announced: '4' -->

<div aria-live="polite" aria-atomic="true">
  Items in cart: <span id="count">3</span>
</div>
<!-- The entire div is announced: 'Items in cart: 4' -->

<!-- aria-atomic="true" gives more context but is more verbose -->

Valeurs de aria-relevant

<!-- Default: additions text -->
<div aria-live="polite" aria-relevant="additions text">

<!-- Announce removals too: -->
<div aria-live="polite" aria-relevant="removals">

<!-- Announce everything: -->
<div aria-live="polite" aria-relevant="all">

<!-- Values: additions, removals, text, all
     'additions' = added nodes announced
     'removals' = removed nodes announced
     'text' = text content changes announced -->

Rôles prédéfinis des régions dynamiques

État de chargement avec une région dynamique

<div role="status" aria-live="polite" aria-atomic="true" id="load-status">
  <!-- empty initially -->
</div>

<script>
async function loadData() {
  document.getElementById('load-status').textContent = 'Loading...';
  const data = await fetchData();
  renderResults(data);
  document.getElementById('load-status').textContent =
    `${data.length} results loaded.`;
}
</script>

Retour après soumission du formulaire

<form id="contact-form" novalidate>
  <input type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

<div role="status" aria-live="polite" id="form-status"></div>

<script>
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const status = document.getElementById('form-status');
  status.textContent = 'Submitting...';
  await submitForm(new FormData(form));
  status.textContent = 'Thank you! You are now subscribed.';
});
</script>

Nombre de résultats de recherche

<label for="search">Search</label>
<input type="search" id="search">

<div role="status" aria-live="polite" aria-atomic="true" id="results-count"></div>
<div id="results"></div>

<script>
let debounceTimer;
search.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const results = filterResults(search.value);
    renderResults(results);
    document.getElementById('results-count').textContent =
      `${results.length} results for "${search.value}"`;
  }, 300);
});
</script>

Pratiques à éviter pour les régions dynamiques

Tester les régions dynamiques

Vérification rapide

Récapitulatif : régions dynamiques