Logo

Comment utiliser aria-live pour gérer les notifications dynamiques dans les applications web

Introduction

Les applications web modernes mettent à jour du contenu sans recharger la page. Pour les utilisateurs de lecteurs d'écran, ces changements peuvent passer totalement inaperçus. L'attribut aria-live permet de rendre ces notifications accessibles.

Cet article explique comment utiliser aria-live pour gérer des notifications dynamiques.

1. Comprendre aria-live : Les bases

L'attribut aria-live indique aux technologies d'assistance comment annoncer les changements de contenu.

Trois modes existent : 'off' (aucune notification), 'polite' (notification discrète) et 'assertive' (interruption immédiate).

Le choix du mode dépend de l'urgence de la notification.

Exemple de code : Notification dynamique accessible

<div aria-live="polite" id="notification"></div>

<script>
  function showNotification(message, type = 'info') {
    const notification = document.getElementById('notification');
    notification.textContent = message;
  }

  // Exemple d'utilisation
  showNotification('Message envoyé');
</script>

Ici, aria-live="polite" notifie l'utilisateur sans interrompre son action en cours.

2. Les différents modes d'aria-live

Détail des modes :

  • Mode 'off' : Aucune notification. Mode par défaut.
  • Mode 'polite' : Le lecteur d'écran attend un moment calme.
  • Mode 'assertive' : Interruption immédiate, pour alertes urgentes.

3. Bonnes pratiques

Règles à suivre :

  • Utiliser aria-atomic="true" pour annoncer tout le contenu
  • Choisir le mode adapté à la situation
  • Limiter la fréquence des notifications

Exemple avancé : Validation de formulaire

<form id="contact-form">
  <div aria-live="polite" id="form-status"></div>
  <input type="email" id="email" required>
  <button type="submit">Envoyer</button>

  <script>
    const form = document.getElementById('contact-form');
    const emailInput = document.getElementById('email');
    const status = document.getElementById('form-status');

    emailInput.addEventListener('input', () => {
      status.textContent = emailInput.validity.valid
        ? 'Email valide'
        : 'Email invalide';
    });
  </script>

Conclusion

Aria-live permet de rendre les applications web plus accessibles. En comprenant ses modes, les développeurs peuvent améliorer l'expérience des utilisateurs de technologies d'assistance.

Logo