Messages d’état

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

Il s’agit d’un : l’automatisation ne peut pas déterminer de façon fiable quels éléments sont des surfaces d’état (les noms de classes, 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 n’annonceront pas ceci 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 ce qui a actuellement le focus, et un message qui apparaît ailleurs sur la page ne dit rien. L’utilisateur soumet un formulaire et n’entend rien — il ne peut pas savoir si cela a réussi, échoué ou est encore en cours de chargement.

Marquer le message comme indique aux de l’annoncer dès qu’il apparaît, 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 intégrées, mises à jour du nombre de résultats).
Confirmez que chacune — ou un conteneur permanent dans lequel elle écrit — porte role="status", role="alert", role="log", ou aria-live="polite" / aria-live="assertive".
Privilégiez un conteneur de région dynamique qui existe au chargement de la page; n’injectez qu’au moment de l’exécution le texte du message. Les régions dynamiques créées en même temps 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é, la constatation.

Comment 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 urgents, 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 façon fiable les surfaces d’état automatiquement — deviner à partir des noms de classes crée une fausse impression de confiance et manque le balisage généré ou dans d’autres langues —, ainsi cette vérification affiche une invite d’examen par page décrivant quoi vérifier.