Composant accessible · outil gratuit
Message de statut accessible (role status, alert, log) : code vérifié
Un message de statut (« Article ajouté au panier », « 3 résultats », « Enregistrement impossible ») apparaît sans que le focus bouge. Pour qu'un lecteur d'écran l'annonce, il s'écrit dans une zone qui existe dès le chargement de la page et porte role="status" (résultat, information), role="alert" (erreur) ou role="log" (historique).
Critères RGAA 4.1.2 : 7.5 · WCAG 2.2 : 4.1.3 · mis à jour le .
Générer et vérifier le composant
Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.
Réglages
Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).
<button type="button" id="action">Ajouter au panier</button>
<!-- Zone présente dès le chargement, vide : seul son contenu change. -->
<div id="message" class="message message-status" role="status"></div>Aperçu réel (utilisable à la souris et au clavier)
Vérification en direct
Qui est gêné quand le composant est mal fait
- Personnes aveugles : un message sans zone annoncée s'affiche à l'écran sans être lu : elles ne savent pas si l'action a réussi, et la refont.
- Personnes malvoyantes qui utilisent une loupe : le message apparaît hors de la zone agrandie ; l'annonce vocale de leur logiciel le leur signale.
- Personnes qui naviguent au clavier : si le message prend le focus, elles perdent leur place dans la page.
Le comportement attendu
Au clavier
| Touche ou moment | Ce qui doit se passer |
|---|---|
| Entrée ou Espace sur l'action | Déclenche le message ; le focus reste sur l'action, la personne poursuit où elle était. |
Avec un lecteur d'écran
- role="status" : le message est lu dès que le lecteur d'écran a fini ce qu'il disait (poli).
- role="alert" : le message interrompt la lecture en cours (assertif) ; à réserver aux erreurs et aux avertissements.
- role="log" : chaque nouvelle ligne ajoutée est lue, sans relire les précédentes.
Les erreurs les plus fréquentes
- Une zone créée avec son message. Insérer d'un coup la zone et son texte : de nombreux lecteurs d'écran ne voient pas le changement.
- Un message dans un simple <div>. Visible, jamais annoncé.
- role="alert" pour tout. Chaque confirmation interrompt la lecture : réservez alert aux erreurs.
- Le focus déplacé sur le message. La personne perd sa place ; ce n'est plus un message de statut.
- Un message identique non ré-annoncé. Réécrire le même texte ne change rien : vider la zone puis la remplir.
Tester soi-même
- Avec un lecteur d'écran (NVDA, VoiceOver), déclenchez l'action : le message doit être lu sans que vous bougiez.
- Vérifiez que le focus reste sur l'action après le message.
- Déclenchez deux fois de suite la même action : le message doit être annoncé deux fois.
- Vérifiez que le rôle correspond au message : une confirmation n'est pas une alerte (jugement humain).
Ce qu'Accessia détecte dans un audit
Un message de statut n'existe qu'après une action : dans un audit, ce critère (7.5) se vérifie à la main. Le générateur ci-dessus le teste en déclenchant l'action dans l'aperçu.
Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.
Critères RGAA concernés
Questions fréquentes
aria-live="polite" ou role="status" ?
role="status" équivaut à aria-live="polite" et donne en plus un sens à la zone ; c'est ce que demande le test du critère 7.5.
Faut-il aria-atomic ?
role="status" et role="alert" lisent déjà la zone en entier. aria-atomic="true" sert quand une zone aria-live ne change qu'en partie et que tout doit être relu.
Et les erreurs d'un formulaire ?
Après un envoi refusé, déplacer le focus sur la première erreur (ou un récapitulatif) est souvent plus utile qu'une alerte : ce sont alors les critères 11.10 et 11.11.
Ce code rend-il mon site conforme ?
Il rend ce message conforme aux contrôles affichés. Le choix du rôle et la clarté du texte restent à juger.