enum Valeurs : assertive,off,polite

aria-live

Indique qu'une région de la page se met à jour dynamiquement et définit l'urgence avec laquelle les technologies d'assistance doivent annoncer ces mises à jour.

Description

aria-live transforme une zone du DOM en région live : les mises à jour de son contenu sont automatiquement annoncées par les lecteurs d’écran, même si l’utilisateur est ailleurs dans la page.

  • off (défaut) — pas d’annonce automatique
  • polite — annonce à la fin de l’interaction en cours (notifications, statuts)
  • assertive — annonce immédiate, interrompt la lecture en cours (erreurs critiques)

Syntaxe

<div aria-live="polite">
  <!-- Le contenu injecté ici sera annoncé -->
</div>

Exemples

Notification de succès après soumission :

<div aria-live="polite" aria-atomic="true" class="sr-only" id="notification">
</div>

<script>
  // Après soumission réussie :
  document.getElementById('notification').textContent =
    'Votre message a été envoyé avec succès.';
</script>

Message d’erreur urgent :

<div aria-live="assertive" role="alert" aria-atomic="true">
  <!-- Erreur de connexion réseau, session expirée... -->
</div>

Compteur de résultats de recherche :

<p aria-live="polite" aria-atomic="true">
  <span id="nb-resultats">12</span> résultats trouvés
</p>

Notes

polite dans 95% des cas : réserver assertive aux seules urgences (erreurs bloquantes, alertes de sécurité) — une utilisation excessive interrompt la lecture et nuit à l’expérience.

Rôles raccourcis : role="alert" équivaut à aria-live="assertive" + aria-atomic="true". role="status" équivaut à aria-live="polite" + aria-atomic="true".

Initialiser vide : la région doit être présente dans le DOM au chargement (vide), puis remplie dynamiquement. Un contenu déjà présent au chargement n’est pas annoncé.

Support navigateurs