Région live

Une région live est une partie du DOM qui, lorsque son contenu change, est annoncée automatiquement aux utilisateurs de lecteurs d’écran — sans déplacer le focus, sans que l’utilisateur ait à naviguer jusqu’à elle, et sans l’obliger à actualiser la page.

Les régions live sont le mécanisme derrière chaque notification « Toast : Article ajouté au panier », chaque message de validation de formulaire « Erreur : l’adresse e-mail est requise », chaque mise à jour du nombre de résultats de recherche qu’un utilisateur de lecteur d’écran entend réellement.

L’attribut de base

La région live la plus simple est un div avec aria-live="polite" :

<div aria-live="polite" id="status">
  <!-- le contenu ici sera annoncé lors des changements -->
</div>

Lorsque JavaScript insère du texte dans #status, le lecteur d’écran annonce le nouveau texte à la prochaine pause naturelle — sans interrompre ce que l’utilisateur est en train de lire.

Polite vs assertive

aria-live a deux valeurs opérationnelles :

• polite — attendre que l’utilisateur soit inactif, puis annoncer. À utiliser pour la plupart des notifications : confirmations, comptages de résultats de recherche, messages de statut.
• assertive — interrompre la lecture en cours de l’utilisateur et annoncer immédiatement. À utiliser uniquement pour les messages véritablement urgents : erreurs critiques, avertissements d’expiration de session, alertes limitées dans le temps.

L’utilisation excessive d’assertive est la défaillance la plus courante des régions live. Chaque toast mineur déclenchant assertive transforme le lecteur d’écran en interrupteur permanent, incitant l’utilisateur à désactiver entièrement la région live.

Alternatives basées sur les rôles ARIA

Plusieurs rôles ARIA impliquent aria-live automatiquement :

• role="alert" → se comporte comme aria-live="assertive".
• role="status" → se comporte comme aria-live="polite".
• role="log" → polite, avec l’indication conceptuelle d’un journal en ajout seul (historique de discussion, sortie console).
• role="timer" → polite, pour les minuteries à rebours.

Choisir un rôle est souvent plus clair que choisir directement une valeur aria-live — cela documente la fonction de la région.

Ce qui se passe mal en pratique

• Région live ajoutée en même temps que le contenu. ARIA n’annonce que les changements des régions live qui existaient déjà dans le DOM. Insérer <div aria-live="polite">Chargé</div> en un seul bloc ne déclenche pas d’annonce — la région et le contenu sont arrivés ensemble. Correction : conserver la région live vide dans le DOM dès le chargement de la page, et la remplir ensuite.
• Mises à jour trop rapides. Insérer du texte dans une région live plusieurs fois par seconde interrompt l’annonce précédente avant qu’elle ne se termine. L’utilisateur n’entend que des fragments. Il faut limiter ou décaler les mises à jour (throttle ou debounce).
• Annonces gérées par une modale qui devraient utiliser le focus à la place. Si l’action intentionnelle de l’utilisateur a déclenché le message, déplacer le focus vers le message (ou un contrôle associé) est souvent préférable à une annonce via une région live. Les régions live sont destinées aux notifications passives.
• Bruit décoratif dans la région live. Une région live contenant des icônes de chargement, des icônes et des horodatages en plus du message amène le lecteur d’écran à tout lire à chaque mise à jour. Il convient de limiter le contenu de la région au message seul.