WCAG 4.1.3 Messages d'état

Le critère de succès 4.1.3 exige que les messages d'état puissent être déterminés par programme, par leur rôle ou par leurs propriétés, de façon à être présentés par les technologies d'assistance sans recevoir le focus. C'est un critère de niveau AA sous la règle 4.1 (Compatible), ajouté dans les WCAG 2.1.

Le problème que ce critère résout

Beaucoup d'interactions web modernes mettent la page à jour sans rechargement complet : « Article ajouté au panier », « 3 nouvelles notifications », « Vos modifications ont été enregistrées », un nombre de résultats de recherche qui se met à jour au fil de la frappe. Une personne voyante les voit apparaître. Une personne utilisant un lecteur d'écran, dont le focus n'a pas bougé, n'a aucun moyen de savoir que la mise à jour a eu lieu, à moins que la page ne l'annonce explicitement : la mise à jour peut apparaître et disparaître entièrement en dehors de sa perception.

Pourquoi « sans recevoir le focus » est important

Le critère exige précisément que cela se fasse SANS déplacer le focus clavier, car déplacer de force le focus à chaque mise à jour d'état constituerait une perturbation en soi - interrompant ce que la personne était en train de faire, dans le même esprit que ce contre quoi les critères 3.2.1 Au focus et 3.2.2 À la saisie protègent. Le mécanisme approprié annonce le message en parallèle de ce que la personne fait, sans détourner son attention.

La correction : les régions live ARIA

<div role="status" aria-live="polite">
  Article ajouté au panier
</div>

aria-live="polite" indique aux technologies d'assistance d'annoncer le contenu de cette région lorsqu'il change, sans interrompre ce que la personne est en train de faire : l'annonce se met poliment en file d'attente au lieu de couper une synthèse vocale en cours. role="status" - ou role="alert" pour les messages plus urgents, qui implique aria-live="assertive" et interrompt immédiatement - sont des rôles raccourcis qui impliquent automatiquement le comportement de région live approprié.

Où cela manque couramment

• Les notifications éphémères (« Enregistré ») qui apparaissent et disparaissent visuellement sans aucune annonce par une région live.
• Les résultats de recherche en direct qui actualisent un nombre de résultats au fil de la frappe, sans annonce du nouveau décompte.
• Les récapitulatifs de validation de formulaire qui apparaissent après l'envoi sans être reliés à une région live, en comptant uniquement sur leur emplacement visuel en haut du formulaire.

Une mise en garde contre l'excès

Les régions live sont faciles à surutiliser : relier trop de mises à jour mineures à aria-live="assertive" en particulier peut produire un déluge d'interruptions pire que l'absence d'annonce. Réservez les régions live aux changements d'état réellement significatifs, et utilisez polite par défaut plutôt qu'assertive, sauf lorsque le message est véritablement urgent.