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)
Meilleure solution
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)
Prévenir un modérateur
Répondre au sujet
Aller à