Jens Oliver Meiert

Fahrner Image Replacement

Artikel vom 15. April 2004 (↻ 15. März 2008), exklusiv für Dr. Web. ISSN 1614-3124, #5.

Dieser Artikel ist veraltet.

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 Text-Browser, 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 Ergebnis, diagnostiziert man, dass FIR bereits ab Internet Explorer 5, Opera 5, Netscape 6, allen weiteren Gecko-Abkömmlingen sowie Safari funktioniert. Und tatsächlich sauberen und semantischen Code darstellt, ohne graphischen Zierrat zu verbieten. 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 Ersetzungspraktiken anzusehen.

Über den Autor

Jens Oliver Meiert, Foto vom 27. Juli 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Er experimentiert mit Kunst und Abenteuer. Hier auf meiert.com teilt und verallgemeinert und übertreibt er einige seiner Gedanken und Erfahrungen.

Mehr Jens gibt es im Archiv und bei Amazon. Wenn Sie eine Frage oder ein Anliegen (oder eine Empfehlung) zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → Fahrner Image Replacement

Stand: 15. März 2008.

»Sei fair, sei fleißig, sei nüchtern und sei glücklich