Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Comment les visiteurs aveugles apprennent-ils les messages d'état d'un site web ?
Les visiteurs aveugles ne connaissent les messages d'état que si le site les marque techniquement comme des messages — alors le lecteur d'écran les annonce automatiquement, sans que le visiteur quitte sa position actuelle. Si le message « Produit ajouté au panier » n'apparaît que visuellement en bordure de l'écran, il reste silencieux pour les lecteurs d'écran. Le critère WCAG 4.1.3 exige que les messages d'état soient identifiables au niveau du programme comme tels.
Un message silencieux est comme un hochement de tête au téléphone
Les messages d'état accompagnent presque chaque action sur le Web : « Produit ajouté au panier », « 3 résultats trouvés », « Votre message a été envoyé », « Formulaire en cours de chargement ». Les visiteurs voyants le perçoivent en arrière-plan. Mais un visiteur aveugle a son focus ailleurs — par exemple toujours sur le bouton qu'il vient de presser. Si la confirmation n'apparaît que visuellement, il ne sait jamais si son action a eu un effet. Il appuie à nouveau, ajoute l'article au panier deux fois ou abandonne, découragé. La solution : la zone de message est marquée dans le code source comme zone d'état. Les lecteurs d'écran surveillent ces zones et annoncent automatiquement les nouveaux contenus — le visiteur reste à sa position et entend quand même la confirmation.
Comment le service de contrôle teste les messages d'état
La mesure automatique avec axe-core teste l'aspect technique des régions d'état existantes : les marquages sont-ils valides et utilisés conformément à la spécification, de sorte que les logiciels d'assistance peuvent les interpréter. La question décisive va au-delà : chaque message qui apparaît pendant l'utilisation réelle est-il vraiment annoncé ? Cela ne peut être jugé que par quelqu'un qui utilise le site et l'écoute. Notre rapport désigne donc cette partie comme un point de contrôle manuel. Au standard Gold, une personne déclenche des actions typiques — ajouter quelque chose au panier, soumettre un formulaire, lancer une recherche — et teste avec le lecteur d'écran si la confirmation s'entend. Chez nous, un contrôle vide est une erreur, jamais un blanc-seing.
Beispiele
Warenkorb-Meldung nur sichtbar
<div class="toast">Artikel im Warenkorb</div><div role="status" aria-live="polite">Artikel im Warenkorb, jetzt 3 Artikel</div>Mit role="status" wird die Meldung angesagt, ohne den Fokus zu verschieben. Für Fehler mit Handlungsbedarf: role="alert".
- Collectez tous les messages d'état de votre site : confirmations du panier, compteur de résultats, confirmations d'envoi, avis de chargement.
- Demandez à votre agence de marquer les zones de message dans le code source comme zones d'état, de sorte que les lecteurs d'écran les annoncent.
- Testez avec le lecteur d'écran intégré à votre système d'exploitation si le message est annoncé de manière audible après l'action.
- Gardez les messages d'état courts et clairs — le texte est lu mot à mot, les longs messages fatiguent à l'écoute.