1159 sujets

Accessibilité du Web

Bonjour à tous,

Pour placer des images dans une mise en page, on est souvent tenté de les placer en image de fond. Ce qui donne le gros avantage d'avoir des images modifiables via la feuille de style sans toucher au code, et le petit avantage de faciliter la sélection du texte de la page. Ou encore qui permet de faire un rollover CSS.

----
Edit du 28 novembre 2006 : si l'on n'a pas de besoins particuliers (rollover CSS, design susceptible de changer et code HTML difficilement modifiable par système de templace, etc.), la technique la plus accessible reste l'utilisation d'une image de contenu avec attribut alt reprenant l'information donnée par l'image !
----

S'il s'agit d'images de décoration, tout va bien. Mais s'il s'agit d'images censées donner une information importante, c'est plus compliqué.

Le cas le plus typique est celui des images de fond utilisées pour réaliser un bouton de menu 100% graphique (donc pas un texte sur un fond en image). On se retrouve face à un problème d'accessibilité, car l'information du bouto (un texte graphique, bien souvent) n'est pas lisible autrement que visuellement.

Le "texte alternatif" en display: none
Solution courante : placer un "texte alternatif" que l'on cachera grace à la feuille de style.
[b]HTML[/b]
<li><span>Mon Bouton</span></li>

[b]CSS[/b]
li {height: 30px; background: url(monbouton.png) no-repeat;}
li span {display: none}

Problème : une bonne partie des lecteurs d'écran, qui devraient ignorer totalement les feuilles de style destinées à un rendu visuel, interprètent quand même les display: none (ainsi que visibility: hidden), et ne les rendent pas. Le texte du span est donc caché à tous…

Autres techniques pour cacher le "texte alternatif"
On reprend le même code HTML que précédemment :
<li><span>Mon Bouton</span></li>

Pour cacher le span uniquement aux utilisateurs de navigateurs graphiques, on a recours à différents trucs plus ou moins tarabiscotés.
– Un text-indent à -5000px ;
– Mettre le span en position absolute et le positionner en top: -5000px ;
– Réduire taille du texte et hauteur de ligne à 1px ;
– Une combinaison de plusieurs techniques de ce style…

Note : dans le cas du text-indent, l'ajout du span autour du texte n'est pas nécessaire.

Petite proposition : utiliser l'attribut alt d'une image transparente
Après ce petit passage en revue, voici la technique que j'ai utilisée récemment (ici), pour obtenir un menu avec images de fond (le but était ici de faire des rollover CSS).

[b]HTML[/b]
<li id="book-illus">
	<a href="/?/book/illustration"><img src="/xmedia/theme/book/vide.gif" alt="Book Illustration" /></a>
</li>

[b]CSS[/b]
li#book-illus a {
	display: block;
	width: 180px; height: 150px;
	text-decoration: none;
	background: url(iconeillus.jpg) no-repeat;
}
li#book-illus a:hover, li#book-illus a:focus {
	background: url(iconeillus2.jpg) no-repeat;
}

La partie CSS est assez classique. On s'intéressera donc ici au HTML : on utilise une image (ici un gif transparent de quelques pixels) semblable aux spacers.gif honnis des bon maquettistes XHTML/CSS Smiley lol

Le but ici est d'utiliser l'attribut alt de cette image invisible pour donner l'information correspondant au lien.
Que pensez-vous de la méthode ? Je m'étonne de ne pas l'avoir rencontrée ailleurs. J'ai dû passer à côté. Ou bien l'utilisation du gif transparent rappelle-t-elle à certains de trop mauvais souvenirs pour être envisageable ? Si c'est le cas, j'utiliserai du PNG-8 la prochaine fois Smiley cligne

Proposition de dernière minute : et l'attribut title ?
L'idée me vient à l'instant : et pourquoi ne pas utiliser l'attribut title du lien ? Il me semble avoir lu qu'un lecteur d'écran, face à un lien, lit soit le texte du lien, soit l'attribut title, suivant celui qui est le plus long (et qui donnera donc, théoriquement, la meilleure information).
<li id="book-illus">
	<a href="/?/book/illustration" title="Book Illustration">&nbsp;</a>
</li>

Je ne suis pas sûr de l'utilité de l'espace insécable. Peut-être ne sert-il à rien ici.
Par contre, j'aimerais savoir si cette technique pourrait fonctionner. L'attribut title sera-t-il lu par un lecteur d'écran, et l'absence de texte pour le lien ne sera-t-il pas trop perturbant ?
Quid des navigateurs textes ?
Et quid des clients à écran réduit (appareils portables) ?
Modifié par mpop (28 Nov 2006 - 14:42)
Bonjour mpop,

si on prend une technique comme celle du text-indent négatif, elle est parfaitement efficace en mode non graphique pur (pas d'image, pas de css). Le souci c'est quand il y a combinaison de css active et images non chargée.

Ta solution présente en fait un souci précisemment inverse : css inactive et image chargée.
clb56 a écrit :
Ta solution présente en fait un souci précisemment inverse : css inactive et image chargée.

Oui, effectivement j'y avais pensé. C'est assez gênant dans ce cas.
QuentinC a écrit :
Peut-être utiliser à la fois la technique du text-indent négatif et de l'image transparente ...

Mais du coup l'info sera en double, non ? À la fois pour les navigateurs texte et pour les lecteurs d'écran.
Et oui ^^

Dans le cas de css inactives + images inactives...

C'est sans doute le truc le plus agaçant quand on veut couper les cheveux en quatre... C'est quand les cheveux ne sont pas d'accord !!!

Etant entendu que l'ironie acide de cette remarque ne te vise pas mpop mais plutôt moi même Smiley rolleyes
la meilleur technique est qqchose comme par exemple <h3><img src="transparent.gif" alt="">votre texte</h3>

le h3 est dimentionné avec la taille de l'image souhaité et position relative,
l'image transparente contient en background l'image et est en position absolute avec width et height à 100% et un z-index eventuellement
goetsu a écrit :
la meilleur technique est qqchose comme par exemple <h3><img src="transparent.gif" alt="">votre texte</h3>

le h3 est dimentionné avec la taille de l'image souhaité et position relative,
l'image transparente contient en background l'image et est en position absolute avec width et height à 100% et un z-index eventuellement

Eh eh pas mal !

En fait, ça revient à créer une image de "foreground" pour le h3.
le seul probleme de cette technique est si je grossi la taille du texte il finit par deborder du cadre ou alors il faut mettre un overflow invisible (bof) auto (mieux mais pas top) ou alors utiliser des em pour que l'image grandisse avec le texte
Modérateur
bonjour,

overflow:hidden; Smiley cligne au conteneur .

j'ai aussi opter pour cette technique, et (autre cas classique) le background peut aussi etre une couleur pour mettre plus en evidence le texte alternatif de la balise image, au cas ou l'image est inacessible, on peut la aussi eventuellement dimensionner si on ne veut pas voir la balise image "vide" reduite a l'espace occupe par le texte alternatif "alt" .
.
Salut,

Voilà ce que j'utilise et cela fonctionne parfaitement.
HTML

<div id="menu-actualites">
<a href="xxx" title="xxx" accesskey="1" tabindex="10"><div class="menu-accessible">xxx</div></a>
</div>


CSS

#menu-actualites
{
float: left;
margin: 0px 0px 0px 15px;
background-image: url('./images/actualites3.jpg');
background-repeat: no-repeat
}

.menu-accessible
{
position: relative;
z-index: -10
}


L'image du fond est visible sur les nav graphique, et pas le texte.
Cette image peut être modifier en fonction du théme.

Sur un nav texte, l'image n'apparait pas, mais le lien textuel oui.

Pour les mise en forme <a>

#menu-actualites a:link
{
text-decoration: none
}

Etc... avec les visited, hover et autres...

Voilà, si ça peut vous aider
Modifié par Grantome (20 May 2006 - 14:52)
Modérateur
hello,

attention quand-même Smiley smile !
pas de balise block dans une balise de type inline (<a><div<</div></a> = pas bon , interdit ! )

et IE ne gere pas les z-index negatifs (ou alors peut-etre tres tres mal ).

++
Lut mpop,

en ce qui concerne

<li id="book-illus">
	<a href="/?/book/illustration" title="Book Illustration">&nbsp;</a>
</li>


Jaws5 apperement se comporte de la manière suivante par défaut

http://thesheet.free.fr/jaws_bis/lien.php (dans le 8eme exemple)


Par contre si tu désactive css tu n'as plus rien du tout.

Donc logiquement les navigateurs textuels ne devraient pas voir le lien.
Modifié par knarf (19 Nov 2006 - 05:21)