1178 sujets

Accessibilité du Web

Textes alternatifs aux images

Bonsoir,

Bon encore une question (je n'arrete pas en ce moment) à propos de l'accessibilité pour les personnes utilisant des navigateurs textes...

Dans le cas de mon site, je fais appel à des liens affichés sous forme de blocs ayant une image pour arrière plan(rollover au passage de la souris en css) et ne comportant donc qu'un espace vide pour tout texte. Ce qui, affiché sans image, ne doit pas franchement faciliter la navigation... La solution que je pense avoir trouvé est de mettre une balise span, dotée d'un display:none; et qui comporte un texte alternatif.

La supposition que j'ai faite est qu'un navigateur texte ne tient pas compte du css...
Cette solution fonctionnerait-elle ? Y en a t'il une plus adaptée ?
Modifié par Freedom_09 (27 Mar 2006 - 22:34)
Bonsoir,

Je faisais en gros la même chose jusqu'à ce que la semaine dernière Laurent Denis me rappelle à l'ordre... Smiley cligne

Pour résumé, il ne faut pas utiliser "display: none"...

Tu trouveras toutes les infos sur cette discussion (je te conseille d'aller lire toutes les références, c'est assez instructif)
Mais ce n'est pas toujours possible Smiley cligne

La méthode donnée en fin de sujet dans le lien que Mpok a donné me semble très bien, merci beaucoup.
Modifié par Freedom_09 (28 Mar 2006 - 07:44)
Désolé pour le double post, mais IE a encore frappé Smiley bawling

Don j'ai utilisé le code de Mpok (légérement modifié mais rien de violent) pour mon menu, et là c'est la cata : sur Firefox c'est parfait (si seulement... il n'y avait que lui) mais sur IE le rollover pose un problème :

le background remonte de Xpx au pasage de la souris et... ne redescend pas avant que je passe sur un lien de la page qui comporte un commentaire au survol !

Voilà le code css :
a.menu_1,span.menu_1,a.menu_2,span.menu_2,a.menu_3,span.menu_3,
a.menu_4,span.menu_4,a.menu_5,span.menu_5,a.menu_6,span.menu_6{
	position:relative;
	display: block ;
	width: 200px ;
	height:41px;
	text-decoration: none ;
	text-align:center;
	border: 0;
	}
	
a.menu_1 span,span.menu_1 span,a.menu_2 span,span.menu_2 span,a.menu_3 span,span.menu_3 span,
a.menu_4 span,span.menu_4 span,a.menu_5 span,span.menu_5 span,a.menu_6 span,span.menu_6 span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
a.menu_1 span{
	background: url(../images/menu1.jpg) no-repeat 0 0 ;
	}
a.menu_1:hover span{
	background: url(../images/menu1.jpg) no-repeat 0 -41px ;
	}
span.menu_1 span{
	background: url(../images/menu1.jpg) no-repeat 0 -41px;
	}
	
a.menu_2 span{
	background: url(../images/menu2.jpg) no-repeat 0 0 ;
	}
a.menu_2:hover span,a.menu_2:focus span{
	background: url(../images/menu2.jpg) no-repeat 0 -41px ;
	}
span.menu_2 span{
	background: url(../images/menu2.jpg) no-repeat 0 -41px;
	}

ça se répète ainsi jusqu'a menu_6, inutile de vous donner le détail ^^

et voilà le menu dans la page :
if ($inc != 'moulin')
    echo " <a href=\"index.php?page=moulin\" title=\"Moulin\" class=\"menu_1\"><span></span>notre Moulin</a>\n";
	else echo " <span class=\"menu_1\"><span></span>Notre Moulin</span>\n";

Même chose pour les six menus suivants...

Si quelqu'un comprend quelle mouche a encore piqué explorer, je l'en remercie d'avance Smiley decu
Hmmm....

J'ai pas testé moi-même, mais effectivement ton pbm ne m'étonne pas vraiment...
Tu emploies la technique (ou une variante) des "portes coulissantes" (en décalant ton image au rollover par des "-41px") si j'ai bien compris.
Or, si tu utilises la méthode du "Filter:Alpha..." pour afficher des png transparents sous IE (avec un fichier css à part pour IE), il n'y a pas dans ce cas de possibilité de positionner le background (par le fameux "-41px").

Bon, tout n'est peut-être pas perdu...
Mais comme tu n'as pas fourni d'url, je ne peux pas faire les tests à ta place.
Ce que je te suggère d'essayer, c'est de "couper" ta ligne background dans le fichier css principal en séparant la source de l'image et sa position, c'est à dire en rajoutant une ligne spécifique qui s'occupe du décalage (par un "background-position").
Ensuite on verra (tu verras...) si IE comprend correctement cette ligne AVEC sa ligne "Filter"...
Mais je ne suis vraiment pas sûr que ça marche... Smiley cligne
Je ne suis pas sur de bien te suivre sur un point : je n'utilise pas de filter:alpha, seulement la technique des portes coulissantes (qui donc ne coulissent que dans un sens... Smiley ohwell )

Ceci étant dit, j'ai finalement contourné le problème en tirant un trait sur le texte contenu dans l'image (et sa typo spécifique) pour quelque chose de plus clair et de plus facile à adapter pour tous. Merci toutrefois pour ton aide, je vais voir si je peux refaire des tests de cete méthode, car elle amrchait vraiment pas mal sur FF...
Sujet clos
Aller à