Message de statut
Un message de statut est une information qui apparaît sur la page sans déplacer le focus de l'utilisateur : confirmation d'envoi, erreur de formulaire, mise à jour d'un panier. Les utilisateurs voyants le repèrent visuellement, mais les lecteurs d'écran ne le détectent que si le message est balisé avec role="status" ou une région ARIA live. Le critère WCAG 4.1.3 (niveau AA) rend cette signalisation obligatoire.
Vous ajoutez un article au panier. Un bandeau s'affiche : « Article ajouté (3 articles) ». Vous l'avez vu. Un utilisateur de lecteur d'écran, lui, n'a rien entendu. Le bandeau est apparu dans le DOM, mais aucun mécanisme ne l'a signalé aux technologies d'assistance. Pour le lecteur d'écran, il ne s'est rien passé.
#Ce que les WCAG exigent
Le critère 4.1.3 des WCAG (niveau AA) pose une règle simple : tout message de statut doit être transmis aux technologies d'assistance sans recevoir le focus. La définition couvre quatre cas : le résultat d'une action (« Message envoyé »), un état d'attente (« Chargement en cours… »), la progression d'un processus (barre de progression), et l'existence d'erreurs (« 2 champs invalides »).
La solution technique : les régions ARIA live. Un conteneur marqué role="status" possède implicitement aria-live="polite" et aria-atomic="true". Le lecteur d'écran attend la fin de sa phrase en cours, puis annonce le contenu entier du conteneur.
<!-- Le conteneur doit exister dans le DOM AVANT l'injection du message -->
<div role="status"></div>
<!-- Quand l'action se produit, JavaScript injecte le texte -->
<div role="status">Article ajouté au panier (3 articles)</div>#Les trois erreurs que tout le monde fait
Créer le conteneur et le message en même temps. Si vous injectez un <div role="status">Envoyé</div> dans le DOM d'un seul coup, certains lecteurs d'écran ne détectent pas la région live. Le conteneur vide doit être présent au chargement de la page. Seul le texte change ensuite.
Utiliser aria-live="assertive" pour tout. Le mode assertive interrompt immédiatement ce que le lecteur d'écran est en train de dire. Réservez-le aux alertes critiques (erreurs système, pertes de données). Pour une confirmation de panier ou un succès de formulaire, polite suffit. La technique ARIA22 du W3C recommande role="status" (donc polite) pour les messages informatifs.
Confondre role="alert" et role="status". Un alert implique aria-live="assertive" : le lecteur d'écran coupe tout pour annoncer le message. Un status implique aria-live="polite" : il attend son tour. Utilisez alert pour les erreurs bloquantes, status pour les confirmations et les mises à jour secondaires.
#En résumé
Placez un <div role="status"> vide dans votre HTML dès le chargement. Injectez-y le texte quand l'événement se produit. Gardez role="alert" pour les urgences, role="status" pour le reste. Le RGAA reprend cette exigence dans ses critères liés à la thématique scripts et consultation.