status

Quand l’utiliser

Pour les messages consultatifs non urgents : « Enregistré », « 12 résultats », « Article ajouté au panier », « Connexion en cours… ». role="status" est équivalent à aria-live="polite" avec un aria-atomic="true" implicite — le lecteur d’écran attend la fin de l’énoncé en cours, puis lit la modification.

La plupart des confirmations de soumission de formulaire, des compteurs de résultats de recherche, des complétions de chargement et des notifications toast relèvent de ce rôle. Réservez role="alert" aux interruptions véritablement urgentes.

L’élément natif <output> porte automatiquement role="status" — utile pour les résultats de type calculatrice associés à des entrées <form>. Pour les notifications toast et les messages de statut hors contexte de formulaire, <div role="status"> est le modèle standard.

Comme toute région active, l’élément status DOIT être présent dans le DOM avant que le message y soit inséré. Rendez <div role="status"></div> vide, puis mettez à jour son contenu textuel. Ajouter l’élément depuis zéro avec du contenu déjà inclus n’est pas fiable.

Compromis des régions actives

• aria-live="off" — aucune annonce. Comportement par défaut pour le contenu ordinaire.
• aria-live="polite" (≡ role="status") — annoncé à la prochaine pause. Par défaut pour les messages de statut.
• aria-live="assertive" (≡ role="alert") — interrompt la parole en cours. À utiliser uniquement pour les messages urgents.

WCAG 4.1.3 (Messages de statut, AA) exige que les messages de statut soient exposés via une région active afin que les technologies d’assistance puissent les annoncer sans forcer un changement de focus.

Erreurs courantes

• Élément status créé à la volée avec du texte déjà inclus. De nombreux lecteurs d’écran ratent l’annonce.
• Mise à jour du statut avec du contenu balisé (<span> et <strong>). Certains lecteurs d’écran lisent le balisage verbatim ; conservez le contenu du statut en texte brut.
• Plusieurs mises à jour déclenchées rapidement — les messages ultérieurs écrasent les précédents sans annonce.
• Utilisation de role="status" pour des erreurs véritablement urgentes (utilisez role="alert").
• Statut masqué visuellement sans considérer aria-atomic lorsque son texte contient des parties stables et des parties changeantes. Le aria-atomic="true" par défaut sur status lit toute la région à chaque fois, ce qui peut être bruyant.

Exemple

<!-- Rendu vide au chargement de la page -->
<div role="status" id="cartStatus"></div>

<script>
  // Lors de la mise à jour du panier :
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Équivalent natif -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>