Le critère WCAG 4.1.3 précise que « le statut des messages peut être déterminé par la technologie d’assistance sans recevoir le focus ». Cette exigence, souvent citée en théorie, a pris tout son sens concret sur le site d’une coopérative de vente directe qui livre des paniers hebdomadaires de fruits et légumes à ses adhérents, avec un statut de commande qui évolue plusieurs fois par semaine sans qu’aucune page ne soit rechargée.
Le tunnel fonctionne ainsi : chaque adhérent commande son panier le lundi, la coopérative confirme la composition le mercredi selon la récolte disponible, puis annonce le créneau de retrait le jeudi. Ces trois changements de statut apparaissent sur une page personnelle de suivi, mise à jour par une requête périodique en arrière-plan plutôt que par un rafraîchissement manuel de la page.
Le problème initial : un statut qui change sans prévenir
Avant la correction, le statut de commande était simplement remplacé dans le DOM par le script de synchronisation périodique, sans aucune annonce pour les technologies d’assistance. Un adhérent utilisant un lecteur d’écran, revenant sur la page après plusieurs minutes, ne pouvait savoir si le statut affiché datait de son dernier passage ou venait d’être mis à jour, sauf à relire l’intégralité de la page à chaque visite.
La solution : une région live dédiée au statut
Le correctif isole le statut de commande dans une région aria-live="polite" distincte du reste de la page, mise à jour uniquement lorsque le statut change réellement, pas à chaque cycle de synchronisation même sans changement.
<div id="statut-panier" aria-live="polite" aria-atomic="true">
Statut : commande enregistrée, en attente de confirmation.
</div>
function mettreAJourStatut(nouveauStatut, ancienStatut) {
if (nouveauStatut === ancienStatut) return;
document.getElementById('statut-panier').textContent =
`Statut : ${nouveauStatut}.`;
}
La condition qui compare l’ancien et le nouveau statut avant toute mise à jour du texte est essentielle : sans elle, le script de synchronisation, exécuté toutes les trente secondes, aurait redéclenché une annonce vocale identique en boucle, rendant la page inutilisable avec un lecteur d’écran.
Le choix du ton : factuel plutôt que décoratif
Les premières versions du message de statut utilisaient une formulation plus chaleureuse, dans l’esprit de la coopérative : « Bonne nouvelle, votre panier est confirmé ! ». Ce ton, adapté à l’affichage visuel avec une icône de validation, devenait redondant et fatigant une fois lu à voix haute plusieurs fois par semaine par un lecteur d’écran.
Le message a été reformulé de façon strictement factuelle, sans exclamation ni adjectif superflu, ce qui a réduit sa longueur et l’a rendu plus rapide à comprendre pour un utilisateur qui l’entend régulièrement, sans pour autant appauvrir l’expérience des autres visiteurs, l’affichage visuel conservant par ailleurs son icône et sa mise en forme.
Les trois statuts et leur formulation retenue
- Commande enregistrée : « Statut : commande enregistrée, en attente de confirmation. »
- Panier confirmé : « Statut : panier confirmé, composition disponible ci-dessous. »
- Créneau de retrait connu : « Statut : retrait prévu jeudi entre 16 h et 19 h au point de dépôt habituel. »
Chaque formulation inclut l’information utile directement dans le message, plutôt que de renvoyer l’utilisateur vers une section plus bas dans la page qu’il faudrait chercher après l’annonce.
Un détail technique : aria-atomic
L’attribut aria-atomic="true" garantit que l’intégralité du contenu de la région est relue à chaque changement, pas seulement la portion de texte modifiée. Sans cet attribut, certains lecteurs d’écran n’annoncent que le fragment de texte techniquement modifié dans le DOM, ce qui peut couper une phrase de façon incompréhensible selon la façon dont le script remplace le contenu.
Un message de statut lu une fois par semaine mérite un ton chaleureux ; un message lu plusieurs fois par jour mérite d’aller droit au but.
Notre verdict
Trois statuts, une seule région live correctement configurée avec aria-atomic, et une comparaison systématique entre ancien et nouveau statut avant toute annonce : ces trois décisions ont transformé un suivi de commande source de confusion en un repère fiable pour les adhérents utilisant un lecteur d’écran, sans jamais toucher à la logistique de livraison elle-même, restée hors du périmètre de ce chantier.
