Wie von Benny in den Kommentaren zu CSS-Navigation ohne Javascript: Reloaded ganz richtig angemerkt, wird im etwas älteren Artikel Die praktische Ein-Bild-Navigation für eine andere Image Replacement-Technik plädiert als bei CSS-Navigation Reloaded. Welche ist nun die richtige oder bessere?
Fahrner Image Replacement
Möglichkeiten, Text durch Bilder zu ersetzen, gibt es reichlich. Die im Artikel zur Ein-Bild-Navigation verwendete Methode nennt sich Fahrner Image Replacement und ist die Naheliegendste: In dem zu ersetzenden Element befindet sich ein span o.Ä., worin sich auch der Text befindet. Dieser span wird mittels display:none; unsichtbar gemacht und das zu ersetzende Element bekommt die ersetzende Grafik als Hintergrundbild zugewiesen.
Beispiel-HTML:
<h1><span>Der Text</span></h1>
Beispiel-CSS:
h1 { height:32px; width:256px; background:url('das_bild.png'); }
h1 span { display:none; }
Fahrner Image Replacement hat einen gewichtigen Nachteil, denn was CSS per display:none; unsichtbar macht, wird auch von den meisten Screenreadern nicht erfasst. Das ist auch recht logisch, denn eigentlich gibt es keinen Grund etwas vorzulesen, das Otto Normalsurfer auch nicht erkennen kann. Legt man Wert darauf, dass man Screenreader-freundlich Text ersetzt (und das sollte man), fährt man mit mit einer anderen Methode besser.
Dwyer Image Replacement
Dieses Verfahren versteckt den Text mit einem Trick: Das span-Element wird auf 0×0 Pixel Größe reduziert und der Text, der normalerweise über die Ränder des Elements hinausfließen würde, wird mittels overflow:hidden; abgeschnitten. Ansonsten bleibt alles wie beim Fahrner Image Replacement.
Beispiel-HTML:
<h1><span>Der Text</span></h1>
Beispiel-CSS:
h1 { height:32px; width:256px; background:url('das_bild.png'); }
h1 span { display:block; height:0; width:0; overflow:hidden; }
Fast alle Screenreader geben auf diese Weise versteckten Text wieder, weil dieser sowohl HTML- als auch CSS-Seitig durchaus vorhanden und sichtbar ist. Allein die Kombination aus Höhe, Breite und overflow:hidden; macht den Text unsichtbar und das ist für die meisten Vorlese-Programme zu hoch.
Schlussbetrachtungen
Die Dwyer-Methode ist im Moment mein Favorit für Image Replacement, jedenfalls in den meisten Fällen. Sie ist nicht komplizierter als Fahrner Image Replacement und verzichtet wie diese auf PHP, Javascript und sonstiges Gescripte, hat aber den Bonus der Screenreader-Tauglichkeit. Einziger Nachteil ist das zusätzliche span-Element.
Für welche Technik man sich am Ende auch immer entscheidet: Die praktische Ein-Bild-Navigation sollte man definitiv nicht mit der Fahrner-Methode umsetzen, denn Screenreader aus der Navigation auszusperren, ist das letzte was man tun sollte. Am Ende sollte man seine Methode von Fall zu Fall auswählen. Eine lange Liste mit weiteren Techniken für Image Replacement hält dieser Artikel von Jens Meiert bereit.