1178 sujets

Accessibilité du Web

Utilisation de display:none et de javascript ?

Bonjour,

Occupé à refaire mon site, je cherchais à ajouter quelques lignes de javascript pour que mes articles se "déroulent" en cliquant sur leur titre. Je suis arrivé à quelque chose d'assez séduisant avec ceci:


<script type="text/javascript">
	<!--

		function AfficherCacher(texte) 
		{
			var test = document.getElementById(texte).style.display;
			if (test == "block") 
			{
				document.getElementById(texte).style.display = "none";
			}
			else 
			{
				document.getElementById(texte).style.display = "block";
			}
		}
		
	//-->
</script>

<a href="#" onclick='AfficherCacher("MonTexte1"); return false'>Texte 1</a><br />

<div id="MonTexte1" style="display:none">
Contenu Caché de Texte 1
</div>


Cependant, je me pose la question de l'accessibilité.
Deux cas: le visiteur n'a pas activé javascript, et se retrouve avec les articles masqués sans possibilité de les consulter, ou le visiteur est handicapé et utilise un lecteur d'écran qui ne pourra pas afficher l'article.

Dans les deux cas, la faute revient à display:none.

Pensez-vous que la solution pourrait être de proposer une version alternative du style sans le display:none, de détecter l'activation de javascript pour supprimer automatiquement le display:none, ou autre chose ?

Merci d'avance Smiley smile
Modifié par BtK (07 Sep 2010 - 15:47)
Personellement, je mettrais ceci dans le <head> :

  <script type="text/javascript">
	document.documentElement.className ="hasJS " + document.documentElement.className;
</script>




Et dans la css un truc du genre :

.hasJS div.hide {position: absolute; left:-5000px; top:-5000px;}


Dans un autre script, juste avant </body>, tu enlève ou ajoute la class "hide" sur le div.
Bonjour,

La propriété CSS display valorisée à "none" n'est pas spécialement problématique dans ce contexte avec JavaScript activé.

Il faut que sans JavaScript, le contenu devant être masqué soit affiché. Puis avec JavaScript, le masquer (voir l'exemple de Patidou ; pas besoin de déporter hors du Viewport).

Enfin, il faut que le lien permettant d'afficher et de masquer ce contenu stipule cet état d'affichage ou de non affichage (il faut bien sûr que le contenu se trouve directement après le dit lien).

Bonne continuation.
Romain

<edit>Le lien peut être généré depuis JavaScript ; sa fonction en étant dépendant.</edit>
Modifié par yodaswii (07 Sep 2010 - 16:44)
Désolé, je débute avec le javascript, mais les deux en un, ça à l'air pas mal.

Donc, j'ai créé la class .hide dans le CSS:

.hasJS div.hide {
	display:none;
}


Si j'ai bien compris, avec la ligne de script dans le <head>, la classe ne s'appliquera qu'aux <div class="hide"> et si le JS est activé, c'est ça ?

Mais dans la fonction, comment dois-je faire pour ajouter/supprimer la classe .hide ?
En fait, pas besoin de modifier la fonction, puisque la valeur de display y est modifiée et c'est le but de la suppression de la classe .hide.

Ça marche nickel, plus de problème si JS est désactivé, mais qu'en est-il des lecteurs d'écran où JS est activé (mmh, ma question est peut-être carrément à côté de la plaque, je me doute que ça ne doit pas être possible, mais je ne m'y connais pas, sait-on jamais) ?
BtK a écrit :
Ça marche nickel, plus de problème si JS est désactivé, mais qu'en est-il des lecteurs d'écran où JS est activé (mmh, ma question est peut-être carrément à côté de la plaque, je me doute que ça ne doit pas être possible, mais je ne m'y connais pas, sait-on jamais) ?


La question est complètement dans le sujet Smiley cligne .

Je te renvoie à ma remarque :
yodaswii a écrit :
Enfin, il faut que le lien permettant d'afficher et de masquer ce contenu stipule cet état d'affichage ou de non affichage (il faut bien sûr que le contenu se trouve directement après le dit lien).


L'utilisateur d'une synthèse vocale doit connaître la fonction du lien :
- contenu masqué : le lien doit avoir un intitulé "Afficher MonTexte1" ;
- contenu affiché : le lien doit avoir un intitulé "Masquer MonTexte1".

Romain
OK, merci Smiley smile

J'ai donc fait ça, mais juste avec une image. Évidemment, j'ai mis un texte alternatif, mais il me semble que celui-ci ne s'affiche pas en infobulle, du fait que le lien est généré par JS peut-être.

Est-ce gênant ?

De plus, l'image est positionnée relativement 8px plus bas que la position de base, ce qui fait que lorsque l'on désactive les images, le trait de soulignement du lien "Afficher" vient barrer ce mot.

Ça, c'est gênant, et je ne sais pas comment y remédier en CSS ...
Modérateur
BtK a écrit :
Évidemment, j'ai mis un texte alternatif, mais il me semble que celui-ci ne s'affiche pas en infobulle


Il faut plutôt utiliser l'attribut title pour générer une info-bulle.
Modifié par Tony Monast (08 Sep 2010 - 17:15)
BtK a écrit :
Évidemment, j'ai mis un texte alternatif, mais il me semble que celui-ci ne s'affiche pas en infobulle, du fait que le lien est généré par JS peut-être.

Le comportement normal des navigateurs graphiques requiert que le contenu de l'attribut alt n'est affiché que si l'image n'est pas chargée. Autrement dit, quand les versions d'IE antérieures à la 8 (ainsi qu'IE 8 en mode de compatibilité IE 7) affichent ledit contenu dans une infobulle, elles n'ont pas le comportement attendu, l'affichage d'une infobulle étant du ressort de l'attribut title, comme l'a dit Tony.
Donc c'est normal. Tant mieux, merci Smiley smile .

Et concernant le décalage du texte (qui correspond au décalage de l'image) si les images ne sont pas activées ?
BtK a écrit :
Et concernant le décalage du texte (qui correspond au décalage de l'image) si les images ne sont pas activées ?

Pour éviter ce genre de décalage, le mieux est de renseigner les attributs width et height aux dimensions de l'image, l'inconvénient étant que l'alternative textuelle risque d'être tronquée si l'image non chargée est très petite ou l'alternative très longue.
Mmh, non, l'image est positionnée avec position: relative; et top: 8px;, donc préciser les dimensions de l'image ne change rien. Par ailleurs, petit test vite fait sous FF, même en précisant la largeur (de 24px), le texte alternatif n'est pas tronqué (mais est bien décalé vers le bas et, puisqu'il s'agit d'un lien, barré par son trait de soulignement). Smiley ohwell
Si le texte à afficher/masquer suit immédiatement le lien, ça ne pose aucun problème aux lecteurs d'écran. Pratiquement tous les lecteurs d'écran savent plus ou moins correctement gérer display:block/none. Jaws depuis la version 6 ou 7 en tout cas, on est à la 11 maintenant (bientôt 12).

Par contre, ce qu'il ne faut pas faire, c'est un lien d'affichage/masquage qui agit sur du texte situé assez loin. Parce que là, il est difficile de savoir ce qui a changé.
Oui pas de problème à ce niveau, le bloc masqué est immédiatement après le lien, le problème est que comme l'image est décalée vers le bas avec CSS, quand on désactive l'affichage des images, le texte de remplacement est également déplacé vers le bas. Ça ne devrait pas poser de problème aux lecteurs d'écrans, mais c'est difficile à lire pour quelqu'un qui lit normalement mais sans les images.
Sujet clos
Aller à