Image Replacement-Techniken nicht zugänglich für Sehbehinderte

Die zurzeit häufig benutzte Technik des Ersetzens von HTML-Text durch CSS-Hintergrundbilder soll sowohl nicht-visuelle Zugangsarten wie Screenreader und Suchmaschinen bedienen als auch eine anspruchsvolle grafische Gestaltung ermöglichen. Durch diese Techniken wird eine große Gruppe sehbehinderter Menschen ausgeschlossen, wenn Inhalte sich nicht mehr an individuelle Farbeinstellungen anpassen lassen.

Tags: , , , ,

Stand: 17.05.2004, Autoren: jeh, tc

Populär wurde diese Technik unter dem Namen »Fahrner Image Replacement« (FIR), benannt nach Todd Fahrner, einem der profiliertesten Denker des frühen Webs der 90er Jahre. Als diese Technik 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 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 versteckter Text, damit Screenreader auch was vorzulesen bekommen.

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

  • MSIE/Windows ignoriert alle Hintergrundbilder, wenn personalisierte Farbschemen eingesetzt werden.
  • Der versteckte Text wird nicht angezeigt, weil die Nutzer die sonstigen Einstellungen in einer mehr oder weniger üblichen Weise nutzen.

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 Betriebssystem 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:
  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:
  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:
  4. Wenn das Logo nun mit den genannten Image Replacement-Techniken statt über das herkömlichen 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:

Konsequenzen

  • Wesentliche Inhalte, also zum Beispiel Überschriften und Zwischenüberschriften sollten nicht als Textgrafik erstellt werden. Wenn dies doch notwendig ist, sollten Sie darauf achten, dass diese nicht freigestellt sind, also nicht auf transparentem Hintergrund stehen (.gif, .png), sondern möglichst auf einem monochromen Hintergrund.
  • Wichtige Informationen, die für das Verständnis des Inhalts oder das Bedienen von Funktionen von Bedeutung sind, dürfen nicht als Hintergrundbilder per CSS eingebunden werden, da sie unter Umständen nicht dargestellt werden.

Diskutieren Sie mit!

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.

Dieser Artikel basiert auf einem Leserbrief von Jan Eric Hellbusch zu einem Artikel von Paul Bohman bei WebAIM »An Accessible Method of Hiding HTML Content«.