Messages d’état

Silktide vous invite à vérifier que les messages d’état — toasts, snackbars, bannières de notification, retours de réussite et d’erreur — sont configurés pour que les les annoncent lorsqu’ils apparaissent.

Il s’agit d’une : l’automatisation ne peut pas déterminer de manière fiable quels éléments sont des surfaces d’état (les noms de classe, les langues et le balisage minifié varient à l’infini), donc Silktide affiche l’invite sur chaque page et une personne la confirme.

<!-- Silencieux : les lecteurs d’écran ne l’annonceront pas lorsqu’il apparaît -->
<div class="toast">Article ajouté au panier</div>

<!-- Annoncé : role="status" en fait une région dynamique -->
<div class="toast" role="status">Article ajouté au panier</div>

Pourquoi c’est important

Les messages d’état indiquent le résultat de ce que l’utilisateur vient de faire : « Formulaire enregistré », « Article ajouté au panier », « 3 résultats trouvés », « Une erreur s’est produite ». Les utilisateurs voyants les voient apparaître ; un lecteur d’écran lit uniquement ce qui a le focus, et un message apparaissant ailleurs sur la page n’est pas annoncé. L’utilisateur envoie un formulaire et n’entend rien : il ne peut pas savoir si l’action a réussi, a échoué ou est encore en cours de chargement.

Marquer le message comme une indique aux de l’annoncer dès son apparition, sans déplacer le focus de l’utilisateur.

Ce qu’il faut vérifier

Repérez chaque surface d’état sur la page (toasts, snackbars, messages flash, bannières de réussite/erreur en ligne, mises à jour du nombre de résultats).
Confirmez que chacune — ou le conteneur permanent dans lequel elle écrit — porte role="status", role="alert", role="log", ou aria-live="polite" / aria-live="assertive".
Préférez un conteneur de région dynamique qui existe au chargement de la page ; n’injectez que le texte du message à l’exécution. Les régions dynamiques créées au même moment que leur message ne sont souvent pas annoncées.

Si la page n’a pas de messages d’état, ou si chacun est correctement annoncé, le constat.

Comment le corriger

Ajoutez un rôle de région dynamique au conteneur du message :
- role="status" pour les mises à jour courantes comme les confirmations et les décomptes de résultats.
- role="alert" pour les messages importants et sensibles au temps, comme les erreurs.
Ou utilisez directement l’attribut : aria-live="polite" (attend une pause dans la lecture) ou aria-live="assertive" (interrompt immédiatement).

Comment Silktide teste ceci

Silktide ne peut pas détecter de manière fiable les surfaces d’état automatiquement — deviner à partir des noms de classes crée une fausse confiance et passe à côté du balisage généré ou non anglophone — ce contrôle affiche donc une invite d’examen par page décrivant ce qu’il faut vérifier.