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.
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 :
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).
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
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
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).
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)
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
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
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"> </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)
