Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Barrierefreies Design — eine Aufgabe für Web-Architekten veröffentlicht in 2001

Dieser Artikel ist einer meiner ersten Artikel. Er entstand aus einem Manuskript für einen Vortrag, den ich im Jahr 2000 gehalten habe. Wer der Veranstalter war, weiß ich nicht mehr; die Veranstaltung fand aber in Mainz statt. Den Beitrag habe ich zwischendurch leicht angepasst, um z.B. die BITV anzusprechen.

Gestaltung von Webseiten ohne Barrieren

Im Folgenden zeige ich anhand von Beispielen einige Barrieren im Web auf. Wie eingangs bereits erwähnt, enthält die BITV zahlreiche Anforderungen, die sich in zwei Prioritäten einstufen lassen. Die Liste ist lang und akribisch. Wer die Aufgabe hat, barrierefreie Webseiten zu gestalten, wird sich unweigerlich mit den BITV-Anforderungen auseinander setzen müssen. Von daher können die Beispiele als Einführung dazu betrachtet werden.

Grafiken

Die Nutzer von Screenreadern haben prinzipiell keine Möglichkeit, ein Bild oder eine Grafik zu betrachten. Der einzige Weg, etwas über den Inhalt einer Grafik zu erfahren, ist der sogenannte Alternativtext, der jeder Grafik im HTML-Quelltext beigefügt werden kann. Ein Screenreader, der beim Übersetzen einer Webseite eine Grafik interpretiert, gibt lediglich die Angabe "Grafik" und den Alternativtext aus. Deshalb haben die Alternativtexte für Screenreader-Nutzer eine sehr wichtige Funktion.

Ein "Bitte hier klicken" in mehrfacher Ausführung, wobei die Grafiken stets ein für Sehende leicht erkennbares Intern: Symbol anzeigen, ist nicht besonders hilfreich. Vielmehr müssen Alternativtexte für Grafiken den Sinn der Grafik widerspiegeln, wenn sie beispielsweise gleichzeitig als Link dienen, oder eine kurze Angabe des Bildes geben, um die Inhalte durch den Screenreader vermitteln zu lassen. Wenn ein Bild als Navigationslink eingesetzt wird, sollte der Text dazu eben auf die dahinter stehende Information schließen lassen.

Um eine erste Einschätzung der Barrierefreiheit zu bekommen, empfiehlt sich ein einfacher Test mit Ihrem Browser. In den Einstellungen von Standard-Browsern gibt es die Möglichkeit, die Anzeige von Grafiken auszuschalten. Wenn sich Webseiten auch bei ausgeschalteter Grafikfunktion eines Browsers ohne Informationsverlust lesen lassen, können diese auch von blinden und sehbehinderten Menschen genutzt werden. Alternativ kann auch ein textorientierter Browser wie Lynx oder die Brückensoftware Webformator zum Testen eingesetzt werden.

In allen Fällen können Grafiken nur anhand des Alternativtextes gelesen werden. Fehlt dieser Alternativtext oder ist er nicht aussagekräftig genug, werden Sie sehr schnell erkennen, dass die Navigation auf der Seite schwierig oder gar unmöglich wird.

Ergänzend zur Barriere "Grafik" muss hinzugefügt werden, dass es Möglichkeiten gibt, eine Grafik als Intern: Image-Map einzusetzen und jeden Bildpunkt als gesonderten Link auszuweisen, d.h. man kann beispielsweise ein Auswahlmenü als Grafik abspeichern und nachher einzelne Bereiche als klickbare Flächen definieren. Sofern Image-Maps serverseitig sind, sind sie nur mit der Maus bedienbar! Der Screenreader erfasst zwar die Grafik als solche, kann aber die verschiedenen Klick-Bereiche nicht ansteuern. Damit sind serverseitige Image-Maps nicht überwindbare Barrieren für Menschen, die auf Screenreader angewiesen sind.

Oft werden sogenannte "blind GIFs" (transparente Grafiken) zum Einrücken oder Schaffen von Abständen zwischen Textteilen eingesetzt. Da diese unsichtbar sind und sein sollen, werden sie ohne Alternativtext belegt. Für Blinde sind solche Grafiken ohne Textangabe jedoch immer ein Rätsel, da sie nie wissen, ob sich ein informatives Bild dahinter verbirgt. Die blind GIFs unterbrechen zudem den Lesefluss, da sie von den Screenreadern erfasst und ausgewertet werden.

Aus Sicht von Sehbehinderten ist noch zu sagen, dass wichtige Grafiken auf einer Webseite, die z.B. für die Navigation auf der Seite benötigt werden, unbedingt kontrastreich und mit einer angemessenen Größe von darin enthaltenen Wörtern dargestellt werden müssen.

Stichwort "Nur Text"

Oft findet man als Ausweg für Barrieren im Internet einen Link zu einer Intern: Textversion. Dies ist dann meist ein Link zu einer parallelen Webseite mit denselben Inhalten – nur ohne Grafiken. Regelmäßig finde ich aber Textversionen, die entweder nicht so aktuell wie die eigentliche Seite sind oder lediglich eine abgespeckte Version des eigentlichen Internetauftritts darstellen. Die Betreiber der Seiten haben es sich zur Aufgabe gemacht, zwei Webseiten anzubieten und werden mit dem Problem konfrontiert, jede Aktualisierung zweimal vorzunehmen – einmal auf der "normalen", mit Grafiken bestückten Seite, und einmal auf der parallelen Seite.

Meines Erachtens ist dieser Aufwand nur in bestimmten Fällen notwendig. Wenn eine Internetseite tatsächlich nur mit Grafiken navigierbar ist oder wenn komplexe Webanwendungen mit einem Screenreader nicht bedienbar sind, dann braucht es eine Alternative mit einfachem HTML.

Tabellen

Das Verwenden von Intern: Tabellen zu Layoutzwecken birgt für den Screenreader-Nutzer Tücken, von denen viele Webgestalter nicht einmal etwas ahnen. Bedenken Sie, dass Blinde immer nur eine einzige Tabellenzelle erfassen können. Eine sinnvolle und systematische Anordnung der Zelleninhalte erleichtert das Lesen erheblich.

Tabellen jeder Art, ob sie eine tabellarische Darstellung enthalten oder als unsichtbare Tabellen für das Layout von Text eingesetzt werden, können dann am besten gelesen werden, wenn die Tabellenzellen Zeile für Zeile von links nach rechts gelesen werden können und immer noch einen Sinn ergeben.

Frames

Ähnlich wie bei Tabellen können Screenreader bei Webseiten mit Intern: Frames immer nur einen der Frames zu einem bestimmten Zeitpunkt betrachten. D.h. wenn beispielsweise eine Seite in zwei Frames eingeteilt ist und in dem ersten Frame Navigationselemente und in dem zweiten Frame die eigentlichen Inhalte der Seite dargestellt werden, muss der Screenreader-Nutzer immer hin und her springen. Die Frames sind zwar grundsätzlich kein Problem mehr in Screenreadern, aber als unproblematisch kann man sie dennoch nicht bezeichnen.

Viele Frames machen Webseiten für Blinde und Sehbehinderte unüberschaubar. Damit blinde und sehbehinderte Internetnutzer schnell Zugang zu einem Frame finden, ist es wichtig, dass Frames mit sinnvollen Titeln versehen werden, wie z.B. "Navigation", "Inhalt" und "Menü". Ideal wäre für die richtige Nutzung der Einsatz des NOFRAMES-Elements, z.B. mit einem Menü zur Navigation auf der Seite. Dies käme den Nutzern von Textbrowser-Nutzern zugute.

Oft wird eine parallele "Nur Text"-Version, d.h. auch ohne Frames, gefordert, denn alte textorientierte Browser stellen die Frames eines Framesets als einzelne Links dar.

Textgestaltung

Wenn Farbe oder ein Zeichenformat nicht nur zur Hervorhebung, sondern ausschließlich als Unterscheidungsmerkmal eingesetzt wird, kann dies von Blinden und vielen Sehbehinderten nicht erkannt werden. Dies lässt sich vermeiden, wenn zusätzlich zur Farbe oder zum Zeichenformat weitere Unterscheidungsmerkmale, z.B. Sonderzeichen eingesetzt werden.

Auch animierte Texte (Laufschriften, dynamische Texte) führen zu Problemen und sollten deshalb mit einer Alternative versehen werden. Bewegung und Blinken kann vom Inhalt soweit ablenken, dass der Nutzer nicht mehr lesen kann.

Wenn bei der Webgestaltung darauf geachtet wird, dass sich die Farben von Text und Hintergrund deutlich voneinander abheben, die Farben von einzelnen Zeichen und Elementen sowie die Schriftgrößen nicht fix in Pixelangaben definiert werden, dann kommt dies auch den besonderen Bedürfnissen Sehbehinderter entgegen. Bedenkenswert ist auch, dass nicht nur Sehbehinderte mit kleinen Schriften Probleme haben. Um ein bestimmtes Größenverhältnis der einzelnen Schriftzüge im Text zu erzielen, bestehen die Möglichkeiten Intern: der relativen Schriftgrößen.

Es leuchtet den Meisten ein, dass rote Schrift auf grünem Hintergrund schwieriger zu erkennen ist als gelb auf blau oder schwarz auf weiß. Bei der Gestaltung von Buttons und sonstigen Symbolen ist dies besonders wichtig, denn diese sind im Browser nicht manipulierbar. Hingegen besteht die Möglichkeit, bei reinem Text die Farbvorgaben einer Seite zu überschreiben z.B. zu ignorieren.

Auch wenn man im Browser Farben ignorieren lassen kann, sind viele Sehbehinderte nicht darauf angewiesen. Jedoch tauchen gelegentlich Seiten auf, auf denen der Kontrast zwischen Text und Hintergrund gering ist. Bei der Textgestaltung ist also auch auf die Farbgebung zu achten.

Zur sehbehindertengerechten Gestaltung von Webseiten gehört weiter das Verwenden relativer Größenangaben für Frames und Tabellen sowie für Text. Die relativen Angaben im Layout dienen der Berücksichtigung geringer Bildschirmauflösungen. Im Browser festgelegte (benutzerdefinierte) Schriftgrößen werden nur dann berücksichtigt, wenn der Quelltext einer Webseite dies erlaubt.

Java und JavaScript

Auf JavaScript muss nicht verzichtet werden. Jedoch sollten Sie bei entscheidenden Stellen, die für die Interaktion wichtig sind, eine Fallback-Lösung vorsehen. Insbesondere dynamisch erzeugte Ergebnisse werden manchmal inkorrekt von Screenreaderm verstanden.

Bei Java-Applets sieht das allerdings etwas anders aus. Java-Applets bringen eine eigene Benutzerschnittstelle mit sich, die grundsätzlich von Screenreadern interpretiert werden kann. Allerdings muss der Nutzer die Java Accessibility Brücke installieren.

Audio und Video

Welche Multimedia-Inhalte Sie in Ihrer Homepage auch einbauen, Sie werden stets für einen bestimmten Personenkreis eine Barriere aufstellen. Es gilt beispielsweise für alle auditiven Inhalte eine textorientierte Alternative für Gehörlose anzubieten. Allgemein gilt, dass Video und Audio eine Textbeschreibung brauchen: Videomaterial benötigt ggf. Audiodescription und Audio z.B. Untertitel. Für beide Situationen sollen die zusätzlichen Inhalte mit der Multimedia synchronisiert werden, z.B. mit SMIL.

Formulare

Die Beschriftung (mit LABEL) von Eingabefeldern muss in unmittelbarer Nähe erfolgen, damit es nicht zu Fehleingaben kommen kann. Formulare müssen alternativ mit der Tastatur bedienbar sein, da Blinde keine Maus im üblichen Sinne benutzen.