Fahrner Image Replacement

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

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.

HierĂĽber tooten?

Ăśber mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Bücher für O’Reilly und Frontend Dogma. Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du eine Frage oder Anregung zu dem hast, was ich schreibe, sende bitte jederzeit eine Nachricht. Danke!