1183 sujets

Accessibilité du Web

[Résolu] Forcer les lecteurs d'écran à répéter le contenu d'un région

Modérateur
Bonjour,

Je cherche à forcer les lecteurs d'écran à répéter le contenu d'une région aria-live.

Je donne un exemple :

L'utilisateur clique sur un bouton qui lance une pièce. Elle retombe sur "face", on annonce "face" dans la région aria-live. L'utilisateur re-clique sur le bouton. Si la pièce retombe à nouveau sur "face", on aimerait que l'annonce "face" soit répétée.

Dans cet exemple, on pourrait s'en sortir en préfixant le résultat par "lancer 1", "lancer 2", etc. Ainsi, comme le contenu changerait à chaque lancer, les lecteurs d'écran l'annonceraient.

Ici c'est simple, mais trouver une combine pour chaque cas, ça finit par être un peu lourd. N'y-aurait-t-il pas une manière de forcer l'annonce même si le contenu n'a pas changé ?

Amicalement,
Administrateur
Bonjour,

Si tu alternes pile et face, ça fonctionne. OK, plus sérieusement...

En ayant bien aria-atomic="true" et sans toucher à aria-relevant (donc en ayant la valeur par défaut aria-relevant="additions text").
Tente d'ajouter un paragraphe et de retirer ensuite l'ancien avec ces 3 phases successives :


<div id="la-zone" aria-live="polite" aria-atomic="true">
  <p id="lancer-5">Face</p><!-- a/ déjà présent c/ retiré -->
  <p id="lancer-6">Face</p><!-- b/ ajouté -->
</div>

Laisse éventuellement un temps de pause entre les étapes b et c. 20ms > 1s/60 ou un tick.

L'id c'est vraiment au cas où. C'est plus dans le cas où tu utilises Vue.js ou autre framework réactif (mais c'est une key enfin 2 ou N keys dont il y a besoin pour être bien certain qu'il optimise pas le code en recyclant le 1er paragraphe pour y injecter le contenu... identique donc il ne fait rien et le navigateur ne voit rien de nouveau et ça fonctionne au final... un peu trop bien)
Bref si tu utilises une techno "réactive" il y a des subtilités.

Teste bien avec Firefox, il a pas le même comportement (timing ?) que Chrome.
Modifié par Felipe (03 Apr 2025 - 09:53)
Modérateur
Bonjour,

Merci Felipe. Ça fonctionne super bien (testé sur Chrome, Firefox et Safari sur Mac OS et Voice Over).

1) Ajouter un nouvel élément pour y afficher le résultat et supprimer l'ancien ensuite a été décisif.

2) Je me suis passé de aria-atomic="true". Ça a l'air de fonctionner quand même, mais j'ai mis le aria-live sur les éléments qui affichent le résultat et non pas sur leur parent. Ça a peut-être son importance ? (je suis vraiment une bille en aria, car je ne sais appliquer que son premier principe qui est de l'utiliser le moins possible).

3) Ça a l'air de fonctionner aussi même si on supprime l'ancien élément immédiatement. Mais au cas où, en effet, on pourrait facilement différer la suppression de l'ancien élément via un setTimeout().

Felipe a écrit :
L'id c'est vraiment au cas où. C'est plus dans le cas où tu utilises Vue.js ou autre framework réactif.
Il faut vraiment me payer cher pour que je mette des "id" dans mes codes. Et encore plus cher pour me faire utiliser des frameworks. Smiley lol Smiley lol Smiley lol
Felipe a écrit :
Bref si tu utilises une techno "réactive" il y a des subtilités.
Ça ... Smiley cligne

Mon code de test :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test aria-live sur un jeu de pile ou face">
<title>Pile ou face</title>
<script>
function run()
{
	let n=Math.random();
	let e1=document.querySelector('output');
	let e2=document.createElement('output');
	e2.setAttribute("aria-live","polite");
	e1.before(e2);
	e2.innerHTML=(n<0.5)?"Face":"Pile";
	e1.remove();
}
window.addEventListener("load",function()
{
	document.querySelector('button').addEventListener('click',run);
});
</script>
</head>
<body>
<h1>Pile ou face</h1>
<button>Lancer la pièce</button>
<output aria-live="polite"></output>
</body>
</html>

Et un jsfiddle https://jsfiddle.net/parsimonhi/fmd1ovxk/

Amicalement,
Modifié par parsimonhi (03 Apr 2025 - 13:17)
Bonjour,

Je viens poser ça là. Microsoft propose une solution permettant de faire lire du contenu aux lecteurs d'écran, de manière plus fiable et plus directe que les régions ARIA live.

Ils proposent une nouvelle API, ARIA notify. Alors pour l'instant c'est uniquement avec Edge Canary, mais ça serait sans doute intéressant que ce soit implémenté dans tous les navigateurs. Ca sera peut-être le cas, si leurs tests sont concluants. Je vous invite à essayer vous-mêmes.
https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/

Alors pour l'instant les effets ne sont pas transcendants globalement, je pense que ça va encore venir, on est au tout début de la fonctionnalité. par contre je confirme que ça résout bien la problématique de ce topic qui est de possiblement répéter plusieurs fois la même information. Test et approuvé avec Jaws et NVDA. Aucune idée si c'est réservé à Windows, ou si ça peut fonctionner aussi avec les versions de Edge sur d'autres plate-formes (ça serait très utile sur Mac et sur iOS, ça aiderait à faire évoluer un VoiceOver un peu défaillant en matière de priorisation et lecture de nombreux messages)
Modifié par QuentinC (25 Jul 2025 - 21:33)
Meilleure solution
Modérateur
Bonjour,

Finalement, les macs devenant de plus en plus intelligents, ils semblent ne plus se laisser avoir par la combine consistant à ajouter un nouvel élément pour y afficher le résultat qu'on souhaite répéter et supprimer l'ancien ensuite. En tout cas, je n'arrive plus à faire marcher mon exemple.

Chrome, Firefox et Safari ne répètent pas (ou plus) avec Voice Over activé sur MacOS. Le pompon est pour Safari qui non seulement ne répète pas, mais en plus semble annoncer le contenu d'une balise <output> deux fois la première fois qu'il le lit (Safari est de toute façon un champion quand il s'agit de lire deux fois un contenu quand on ne le souhaite pas, et de ne pas le lire du tout quand on le souhaite). Misère, misère !

Des fois, je me demande si ces gens testent vraiment leurs produits ou pas.

Bon, par contre, la très bonne nouvelle est que la proposition de Quentin consistant à utiliser la nouvelle api document.ariaNotify() fonctionne à merveille avec Chrome + VoiceOver sur MacOS. Le code tient en une ligne. Si le message est contenu dans une variable "s", il suffit d'écrire :
document.ariaNotify(s);
Ça lit le message, et ça le répète autant de fois qu'on veut si on le souhaite, et sans même attendre éventuellement que le précédent soit totalement lu (il y a des options pour les experts au cas où).

Espérons que "les autres" finissent par supporter cette API eux-aussi.

Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à