1174 sujets

Accessibilité du Web

[Résolu] Cacher les puces des listes aux lecteurs d'écran

Modérateur
Bonjour,

Lorsqu'un lecteur d'écran rencontre une puce devant un <li>, il annonce "puce", "white bucket", ...

Parfois, ça n'a pas beaucoup d'intérêt de faire cette annonce. Et ça fait même un peu désordre quand c'est tantôt en français, tantôt en anglais.

Je recherche donc une solution pour que ces puces ne soient pas annoncées par les lecteurs d'écran tout en restant visibles à l'écran.

On suppose dans un premier temps qu'il s'agit des puces affichées par défaut par les navigateurs (s'il s'agit de puces faites maison, les solutions éventuelles dépendent trop de la manière choisie pour afficher ces puces).

Eventuellement, la réponse peut être : on ne fait rien et on laisse l'utilisateur paramétrer son lecteur l'écran s'il le juge nécessaire et si c'est possible de le faire (mais je n'ai pas trop trouvé comment faire ce paramétrage justement) ! Smiley cligne

Amicalement,
Modifié par parsimonhi (10 Feb 2024 - 05:34)
Hello,

A moins que tu n'utilises des puces très spéciales, les noms sont normalement correctement traduits (p.ex. disque noir, puce blanche, puce coche, etc.). Donc normalement ce n'est pas censé être un problème. Ca peut même être important de pouvoir les différencier, si les listes sont sur plusieurs niveaux.

Quel lecteur d'écran as-tu testé et as-tu une page d'exemple ?

Ce qui est sûr, c'est que tu ne peux pas masquer les puces pour le lecteur d'écran tout en les laissant affichées à l'écran, du moins pas de manière fiable, sauf à utiliser des magouilles CSS. En tout cas, Jaws comme NVDA réagissent à la propriété CSS liststyle-type, et c'est important qu'ils le fassent, notamment pour les listes ordonnées. Pour les listes non ordonnées, effectivement, on s'en fiche généralement de la forme de la puce, tant que cette forme ne véhicule pas d'information (c'est possible que ce soit le cas, je pense à des todo lists qui afficheraient une puce différente selon l'état d'une tâche par exemple).
Modérateur
Bonjour,

Je teste avec voiceOver sur macOS et avec les navigateurs Chrome, Firefox et Safari.

Pour les éléments de niveau 1, le lecteur dit "Puce" et pour les éléments de niveau 2, le lecteur dit "White bullet". C'est pareil pour les trois navigateurs.

Ci-dessous le code de test d'une page simple (absolument rien de spécial et aucun css). La page contient une balise <ul> qui contient deux balises <li>, chaque balise <li> contenant une balise <ul>.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<h1>Exemple de listes</h1>
<ul>
	<li>Légumes
		<ul>
			<li>Choux</li>
			<li>Carotte</li>
			<li>Salade</li>
		</ul>
	</li>
	<li>Fruits
		<ul>
			<li>Pomme</li>
			<li>Cerise</li>
		</ul>
	</li>
</ul>
</body>
</html>
Amicalement,
Modérateur
Bonjour,

Merci à QuentinC pour ses remarques. Je vais sans doute ne rien faire de spécial dans la plupart des cas (ce que je fais déjà).

Peut-être que dans certains cas, je mettrais des puces faites maison en utilisant des caractères comme par exemple "black circle" (unicode U+25CF), "white circle" (unicode U+25CB), "black square" (unicode U+25A0) et "white square" (unicode U+25A1) (auquel cas j'aurai l'assurance que les traductions seront toutes dans la même langue, mais pas l'assurance qu'elles seront en français).

Exemple de code :
ul {list-style-type:'\25CF';}
li>ul {list-style-type:'\25CB';}
li>ul>li>ul {list-style-type:'\25A0';}
li>ul>li>ul>li>ul {list-style-type:'\25A1';}

Ou peut-être que dans certains cas, je mettrais des puces en svg (auquel cas les lecteurs d'écran ne diront rien me semble-t-il, ce que je voulais initialement), mais ça coûte pas mal en taille de code à rajouter pour un intérêt qui est finalement discutable.

Exemple de code :
ul,li
{
	margin:0 0 0 0.25em;
	padding:0 0 0 0.25em;
}
ul {list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 6 7"><circle r="2"/></svg>');}
li>ul {list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 6 7" stroke="black" fill="none"><circle r="2"/></svg>');}
li>ul>li>ul {list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 6 7"><rect width="4" height="4"/></svg>');}
li>ul>li>ul>li>ul {list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 6 7" stroke="black" fill="none"><rect width="4" height="4"/></svg>');}

Je clos le sujet.

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