Es gibt so einige Möglichkeiten, um per CSS Text durch Bilder zu ersetzen. Ich möchte euch hier zwei Varianten vorstellen.
Fahrner Image Replacement
Bei der Fahrner Image Replacement Technik befindet sich in dem zu ersetzenden Element ein
span
o.Ä. html-element, worin sich Text befindet. Dieser
span
wird per
display: none;
unsichtbar gemacht und das Element, welches es zu ersetzen gilt, bekommt das gewünschte Bild als Hintergrund zugewiesen. Hier ein Beispiel:
HTML:
<h1><span>Text hier</span></h1>
CSS:
h1 { height:32px; width:256px; background:url('ein_bild.gif'); }
h1 span { display:none; }
Der entscheidende Nachteil an dieser Methode ist, das
display: none;
. Da es per CSS unsichtbar gemacht wird, kann es von den meisten Screenreadern nicht erfasst werden. Eigentlich ja auch logisch, da es keinen Grund gibt etwas vorzulesen, was der Webseitenbesucher nicht zu Gesicht bekommt. Die Dwyer-Methode geht diesem Problem mit einer rafinierten Art und Weise aus dem Weg.
Dwyer-Methode
Bei dieser Methode wird der Text versteckt, in dem das
span
-Element auf die Grösse von 0×0 Pixel reduziert wird und der Text, welcher sonst über die Ränder des Elementes hiausfliessen würde, mittels
overflow: hidden
abgeschnitten wird.
HTML:
<h1><span>Text hier</span></h1>
CSS:
h1 { height:32px; width:256px; background:url('ein_bild.gif'); }
h1 span { display:block; height:0; width:0; overflow:hidden; }
Die gezielte Verwendung der Höhe und Breite von 0 px und
overflow: hidden
trixt Screenreader aus, weil diese nicht schlau genug sind zu erkennen, dass der Text unsichtbar ist.
Fazit
Mein Favorit ist zur Zeit die Dwyer-Methode, da sie Screenreader-tauglich ist und auf PHP und Javascript verzichtet. Weitere Image-Replacement-Techniken findet ihr auf Jens Meierts Website.