Jens Meiert

Fahrner Image Replacement

Ein einfacher CSS-Trick erlaubt es, Text durch Bilder zu ersetzen und dennoch semantischen und zugänglichen Code zu schreiben: das sogenannte Fahrner Image Replacement. Dieser Artikel zeigt in kurzer Form, wie es funktioniert und was zu beachten ist.

Barrierefrei(er) durch CSS

Viele Webangebote benutzen Bilder – img-Elemente –, um Überschriften, Navigationselemente oder auch ganze Absätze zu präsentieren. Dieses Vorgehen ist jedoch nicht unproblematisch, denn die so dargestellten Inhalte leiden semantisch und sind weniger oder gar nicht zugänglich für Textbrowser, unterstützende Software wie Screenreader oder auch Geräte mit kleinen Bildschirmen.

Geht man von dieser Problematik aus und will man dennoch Bilder in Bereichen verwenden, für die HTML eigene Elemente bereitstellt, bedarf es Methoden, die diesen durchaus branchenüblichen Erfordernissen Tribut zollen. Eine davon ist das Fahrner Image Replacement (FIR), erschaffen von Todd Fahrner, Mitwirkender in sowohl CSS-Arbeitsgruppe des W3C als auch Webstandards-Projekt.

Das dahinterliegende Konzept ist einfach zu veranschaulichen, indem man ein simples HTML-Snippet kreiert, das lediglich aus einer Überschrift besteht:

<h1><span>Muster</span></h1>

Dabei dient das »bedeutungsfreie« span-Element als prinzipiell legitimes – aber nicht unumstrittenes – Hilfsmittel, um den umschlossenen Text via CSS auszublenden, während statt dessen ein Bild angezeigt wird:

h1 {
  background: url(example.gif);
  font-size: 1em;
  height: 25px;
  width: 250px;
}

h1 span {
  visibility: hidden;
}

Betrachtet man das Resultat, funktioniert FIR unter Internet Explorer 5+, Opera 5+, Netscape 6+, allen weiteren Gecko-Abkömmlingen sowie Safari. Und stellt tatsächlich sauberen und semantischen Code dar, ohne auf graphischen Zierrat zu verzichten. Testet man das entsprechende Dokument mit den populärsten Screenreadern, stellt man des weiteren fest, dass die Wiedergabe unserer Überschrift zwar zumindest im IBM Home Page Reader und unter Window-Eyes (bislang) nicht möglich ist, aber der verbreitete JAWS sie problemlos lesen kann. Das bestätigt uns auch Joe Clark in seinem Artikel für A List Apart.

Auch wenn man durchaus mehr zu dieser Methode schreiben kann: Das Fahrner Image Replacement stellt kein Allheilmittel dar, vor allem nicht, da weit elegantere und bessere Lösungen greifbar sind. Schlussendlich ist es aber immerhin als »semantischere« und zugänglichere Alternative zu bekannten img-Praktiken anzusehen.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

• Übersicht: Image-Replacement-Techniken
• CSS kompakt: Von Selektoren über Kaskade zur Praxis
• Accesskeys: Fakten und Standards

Schwerpunkt: Webentwicklung.