Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Image-ReplacementTechniken nicht zugänglich für Sehbehinderte geschrieben von Tomas Caspers und Jan Hellbusch (2004)

Die Inhalte dieser Seite sind ursprünglich von der Extern: Aktion Mensch veröffentlicht worden. Der Artikel basiert auf einem Leserbrief von Jan Eric Hellbusch zu einem Artikel von Paul Bohman bei WebAIM Extern, englischsprachig: An Accessible Method of Hiding HTML Content.

Populär wurde diese Technik unter dem Namen "Fahrner Image Replacement" (FIR), benannt nach Extern, englischsprachig: Todd Fahrner, einem der profiliertesten Denker des frühen Webs der 1990er Jahre. Als diese Technik Extern, englischsprachig: zuerst dokumentiert wurde, war ein deutliches Aufatmen in der Webentwickler-Szene zu hören. Hatte man doch vermeintlich eine Technik gefunden, mit der zum einen den gestalterischen Ansprüchen der Anbieter Genüge getan war und zudem auch noch nicht-visuelle Zugangsarten (Screenreader, Suchmaschinen-Robots) mit verwertbarem und strukturiertem Text versorgt wurden.

Schnell stellte sich aber heraus, das viele Screenreader die CSS-Anweisung display:none allzu wörtlich nahmen und genau das taten – sie blieben stumm. Der Kanadier Joe Clark dokumentierte diese Probleme in seinem Artikel Extern, englischsprachig: Facts and Opinion About Fahrner Image Replacement in Ausgabe 160 von A List Apart und kam zu dem Schluss, das die meisten Screenreader an dieser Konstruktion scheitern.

Findige Webdesigner ersannen nun einen Workaround, um weiterhin strukturierten Text durch grafische Elemente zu ersetzen. Hierbei wird das Element, das den zu versteckenden Text enthält, nicht via display:none oder visibility:hidden ausgeblendet, sondern kurzerhand um mehrere tausend Pixel aus dem sichtbaren Bereich heraus geschoben. An dessen Stelle tritt nun zum Beispiel eine grafische Headline.

Auch andere FIR-Varianten machen Probleme

Diese Methode lässt aber vollkommen außer Acht, dass auch sehbehinderte Menschen Probleme mit grafisch gestaltetem Text haben können, wenn dieser sich nicht an die speziellen Bedürfnisse unterschiedlichster Formen der Sehbehinderung anpassen lässt. Jan Eric Hellbusch, Autor des Standardwerkes Barrierefreies Webdesign meint:

Die Methode ist natürlich sehr hilfreich, um die Gebrauchstauglichkeit in Screenreadern und anderen auditiven Ausgabegeräten zu erhöhen. Nichts desto trotz ist sie nicht besonders barrierefrei für sehende Nutzer, wenn sie sehbehindert sind (und mit Windows arbeiten).

Erklärung: Viele Menschen mit einer Sehbehinderung leiden unter Blendempfindlichkeit und ändern deshalb das Farbschema auf ihrem (Windows-) System. Wenn sie das Internet verwenden, werden sie vermutlich dasselbe Farbschema verwenden.

Soweit so gut. Wenn wir über die Bereitstellung von zusätzlichem Text sprechen, der gezielt für blinde Nutzer angeboten wird und versteckt werden soll, dann ist die Methode völlig in Ordnung.

Probleme mit solchen Methoden tauchen jedoch dann auf Websites auf, wenn der versteckte Text dazu verwendet wird, Grafiken zu ersetzen, d.h. eine Navigationsleiste, die mit Hintergrundgrafiken gestaltet wurde, erhält ein wenig versteckten Text, damit Screenreader auch was vorzulesen bekommen.

Menschen, die eigene Farbschemata verwenden müssen, sind die Verlierer bei dieser Methode:

Ich gebe Internetkurse für Sehbehinderte. In den Kursen sind, abhängig von den Teilnehmern, mindestens zwei von zehn dabei, die solche Einstellungen benötigen. Manchmal sind es sogar sieben von zehn.

Deshalb ist diese Technik des Versteckens von Text ein Problem für viele Menschen und kann für diese einzelne Nutzergruppe nicht als barrierefrei erachtet werden.

Diskussion

Aus der "Barrierefreie Informationstechnik-Verordnung (BITV)" ergibt sich selbstverständlich, dass auch diese Nutzergruppen zu berücksichtigen sind:

BITV Anforderung 2

Texte und Graphiken müssen auch dann verständlich sein, wenn sie ohne Farbe betrachtet werden.

Die BITV ist hier zu unpräzise, denn aus der Formulierung wird nicht deutlich, welche Problematik mit dieser Vorgabe berücksichtigt werden soll. Anders als die WCAG verfügt die BITV nicht über die dazugehörigen Dokumente mit den HTML- und CSS-Techniken, in denen das W3C detaillierter auf die jeweiligen Hintergründe für die Richtlinien eingeht und auch gleich noch Hilfestellungen und Umsetzungsbeispiele gibt.

Leider ist die Problematik sehbehinderter Nutzer nicht ganz so einfach zu vermitteln wie die blinder Internetsurfer. Bei einem blinden Menschen können Sie davon ausgehen, dass dieser die Inhalte von einem der zwei bis drei in Deutschland wirklich verbreiteten Screenreader vorgelesen bekommt. Unter Umständen hängt eine Braillezeile als Ausgabegerät am Rechner, aber der Inhalt wird grundsätzlich in linearisierter Form wahrgenommen.

In der Gruppe der sehbehinderten Menschen ist diese Vorhersage nicht so einfach zu treffen. Der gemeinsame Nenner ist, dass der Benutzer noch über eine gewisse Restsehschärfe verfügt, aber da hören die Gemeinsamkeiten auch schon auf. Manche sehbehinderten Nutzer bevorzugen ein invertiertes Monitorbild, z.B. gelbe Schrift auf schwarzem Grund, je nach Symptom wird auch der gesamte Bildschirminhalt mit den Bordmitteln des jeweiligen Betriebssystems stark vergrößert, oder es wird eine Lupensoftware eingesetzt, die Bruchteile des Bildschirms teilweise extrem vergrößert.

Sehr oft werden aber, wie Hellbusch aus eigener Erfahrung beschreibt, persönliche Einstellungen der Vorder- und Hintergrundfarben vorgenommen, und hierbei treten oft Mängel in Hilfsmitteln und Betriebssystemen zu Tage, die unter Umständen nur durch Änderungen in der Gestaltung abzufangen sind.

Was geht denn schief?

Mit dem Wissen um die von Hellbusch beschriebene Problematik liest sich die Bedingung 2.2 der BITV auch schon ganz anders:

BITV Bedingung 2.2

Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund– und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

  1. Eine Reihe von Screenshots soll die Problematik verdeutlichen: Der erste Screenshot zeigt die herkömmliche Darstellung einer teilweise mit einer Grafik erstellten Headline, hier im Browser Safari unter MacOS X:

    Ausschnitt einer Website mit dem BIENE-Logo

  2. Der zweite Screenshot zeigt die invertierte Darstellung desselben Ausschnitts, ebenfalls unter Safari. Da hier das Betriebssystem eine echte Invertierung leistet, wird die vorher schwarz auf weiß dargestellte Grafik nun weiß auf schwarz, also negativ, dargestellt und ist immer noch lesbar:

    Das gleiche Bild (vorher schwarz auf weiß) wird jetzt weiß auf schwarz dargestellt

  3. Unter Windows 2000 sieht das im Internet Explorer 6 schon ganz anders aus. Da hier das Betriebssystem nicht den kompletten Bildschirminhalt umkehrt, sondern nur die Vorder- und Hintergrundfarben ändert, erscheint die freigestellte Grafik nun schwarz auf schwarz und ist nicht mehr lesbar:

    Anstelle des Logos sind einzelne Pixel erkennbar

  4. Wenn das Logo nun mit den genannten Image-Replacement-Techniken statt über das herkömmliche <IMG>-Tag eingebunden wird, verschwindet es im IE mit angepassten Farbeinstellungen vollständig. Hier gehen also wesentliche Informationen verloren, die unter Umständen essentiell für das Verständnis der Seite sind:

    Anstelle des Logos ist eine komplett schwarze Fläche zu sehen

Konsequenzen