Fahrner Image Replacement

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

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.

War dies nützlich oder interessant? Teile diesen Beitrag, werde Nanosponsor oder unterstütze meine Arbeit, indem du mit meinen E-Books lernst.

Ăśber mich

Jens Oliver Meiert, am 9. November 2024.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)