86
Maîtrise des CSS
normalement,.puis.à.utiliser.des.CSS.pour.le.masquer.et.afficher.une.image.d’arrière-plan.à.
la.place..Les.moteurs.de.recherche.peuvent.ainsi.trouver.le.texte.HTML,.qui.reste.disponible.
quand.vous.désactivez.les.CSS.
L’idée.a.semblé.géniale.pendant.un.temps,.jusqu’à.ce.que.des.failles.apparaissent..Certaines.
des. méthodes. les. plus. populaires. sont. inaccessibles. aux. lecteurs. d’écran. et. la. plupart. ne.
fonctionnent.pas.lorsque.les.images.sont.désactivées.et.les.CSS.activées..Du.coup,.un.grand.
nombre. d’auteurs. ont. cessé. d’utiliser. les. méthodes. de. remplacement. des. images. et. sont.
repassés.au.texte.pur..Si.j’invite.à.éviter.le.remplacement.des.images.quand.c’est.possible,.
je. continue. de. croire. qu’il. existe. des. cas. où. il. est. judicieux,. comme. lorsque. vous. devez.
utiliser. une. police. particulière. pour. respecter. des. directives. graphiques. liées. à. la. charte.
d’une.entreprise.ou.d’une.marque..Pour.cela,.vous.devez.connaître.les.différentes.techniques.
. disponibles.et.comprendre.leurs.limites.respectives.
Remplacement des images de Fahrner
Créé.par.Todd.Fahrner,.le.FIR.(Fahrner Image Replacement.ou.remplacement.des.images.de.
Fahrner).est.une.technique.originale.de.remplacement.des.images.qui.est,.sans.doute.aussi,.
la.plus.populaire..Je.la.présente.ici.pour.des.raisons.historiques.et.parce.qu’il.s’agit.d’une.des.
méthodes.les.plus.faciles.à.comprendre..Elle.possède.cependant.de.sérieux.inconvénients.
en.matière.d’accessibilité,.comme.nous.le.verrons.dans.un.instant,.et.doit.donc.être.évitée..
Le.principe.de.base.est.très.simple..Vous.enveloppez.le.texte.à.remplacer.dans.une.balise.
span :
Ensuite,.vous.appliquez.l’image.de.remplacement.comme.image.d’arrière-plan.à.l’élément.
de.titre :
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
Vous.masquez.enfin.le.contenu.de.l’élément.span.en.attribuant.la.valeur.none.à.sa.propriété.
display :
span {
display: none;
}
Cette.méthode.fonctionne.comme.un.charme,.mais.c’est.cette.dernière.règle.qui.pose.problème..La.plupart.des.lecteurs.d’écran.populaires.ignorent.les.éléments.dont.la.propriété.
display.vaut.none.ou.la.propriété.visibility.vaut.hidden..Ils.ignorent.du.coup.complètement.le.texte,.ce.qui.pose.un.considérable.problème.d’accessibilité..Cette.technique.
destinée.à.améliorer.l’accessibilité.du.site.a.donc.un.effet.exactement.inverse..Il.vaut.mieux.
dès.lors.l’éviter..
Maîtrise des CSS
normalement,.puis.à.utiliser.des.CSS.pour.le.masquer.et.afficher.une.image.d’arrière-plan.à.
la.place..Les.moteurs.de.recherche.peuvent.ainsi.trouver.le.texte.HTML,.qui.reste.disponible.
quand.vous.désactivez.les.CSS.
L’idée.a.semblé.géniale.pendant.un.temps,.jusqu’à.ce.que.des.failles.apparaissent..Certaines.
des. méthodes. les. plus. populaires. sont. inaccessibles. aux. lecteurs. d’écran. et. la. plupart. ne.
fonctionnent.pas.lorsque.les.images.sont.désactivées.et.les.CSS.activées..Du.coup,.un.grand.
nombre. d’auteurs. ont. cessé. d’utiliser. les. méthodes. de. remplacement. des. images. et. sont.
repassés.au.texte.pur..Si.j’invite.à.éviter.le.remplacement.des.images.quand.c’est.possible,.
je. continue. de. croire. qu’il. existe. des. cas. où. il. est. judicieux,. comme. lorsque. vous. devez.
utiliser. une. police. particulière. pour. respecter. des. directives. graphiques. liées. à. la. charte.
d’une.entreprise.ou.d’une.marque..Pour.cela,.vous.devez.connaître.les.différentes.techniques.
. disponibles.et.comprendre.leurs.limites.respectives.
Remplacement des images de Fahrner
Créé.par.Todd.Fahrner,.le.FIR.(Fahrner Image Replacement.ou.remplacement.des.images.de.
Fahrner).est.une.technique.originale.de.remplacement.des.images.qui.est,.sans.doute.aussi,.
la.plus.populaire..Je.la.présente.ici.pour.des.raisons.historiques.et.parce.qu’il.s’agit.d’une.des.
méthodes.les.plus.faciles.à.comprendre..Elle.possède.cependant.de.sérieux.inconvénients.
en.matière.d’accessibilité,.comme.nous.le.verrons.dans.un.instant,.et.doit.donc.être.évitée..
Le.principe.de.base.est.très.simple..Vous.enveloppez.le.texte.à.remplacer.dans.une.balise.
span :
Hello World
Ensuite,.vous.appliquez.l’image.de.remplacement.comme.image.d’arrière-plan.à.l’élément.
de.titre :
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
Vous.masquez.enfin.le.contenu.de.l’élément.span.en.attribuant.la.valeur.none.à.sa.propriété.
display :
span {
display: none;
}
Cette.méthode.fonctionne.comme.un.charme,.mais.c’est.cette.dernière.règle.qui.pose.problème..La.plupart.des.lecteurs.d’écran.populaires.ignorent.les.éléments.dont.la.propriété.
display.vaut.none.ou.la.propriété.visibility.vaut.hidden..Ils.ignorent.du.coup.complètement.le.texte,.ce.qui.pose.un.considérable.problème.d’accessibilité..Cette.technique.
destinée.à.améliorer.l’accessibilité.du.site.a.donc.un.effet.exactement.inverse..Il.vaut.mieux.
dès.lors.l’éviter..