Barrierefreies Design - eine Aufgabe für Internet-Architekten

Gestaltung von Webseiten ohne Barrieren

Im Folgenden zeige ich, anhand von Beispielen die größten Barrieren im WWW 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 Screen-Readern 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 Screen-Reader, der beim Übersetzen einer Homepage eine Grafik interpretiert, gibt lediglich die Angabe "Grafik" und den Alternativtext aus. Deshalb haben die Alternativtexte für Screen-Reader-Nutzer eine sehr wichtige Funktion.

Ein "Bitte hier klicken" in mehrfacher Ausführung, wobei die Grafiken stets ein für Sehende leicht erkennbares Symbol anzeigen, ist nicht besonders hilfreich. Vielmehr müssen Alternativtexte für Grafiken den Sinn der Grafik widerspiegeln, wenn sie beispielsweise gleichzeitig ein Link ist, oder eine kurze Angabe des Bildes geben, um die Inhalte durch den Screen-Reader kommunizieren 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.

Manche Blinde verwenden den Zeilen orientierten Lynx-Browser, der Grafiken gar nicht erst lädt. Aber auch die Microsoft-, Netscape- und Opera-Browser werden sehr oft eingesetzt. 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 Image-Map in mehrere Teile zu gliedern, und jeden dieser Einzelbereiche als gesonderten Link auszuweisen, d. h. man kann beispielsweise ein Auswahlmenü als Bild abspeichern und nachher die Menüpunkte als einzelne Links definieren. Diese Art Auswahl ist nur mit der Maus bedienbar! Der Screen-Reader erfasst darüber hinaus zwar die Grafik als solche, kann aber die verschiedenen Auswahlbereiche nicht erfassen. Damit sind Image-Maps unüberwindbare Barrieren für Menschen, die Screen-Reader benutzen.

Oft werden sogenannte "Dummys" (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 Dummys unterbrechen zudem den Lesefluss, da sie von den Screen-Readern 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 die Angabe "Nur Text" auf einer Webseite. Dies ist dann meist ein Link zu einer parallelen Webseite mit denselben Inhalten - nur ohne Grafiken. Dies kann ich immer wieder nur begrüßen, aber regelmäßig finde ich "Nur Text"-Seiten, 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 Layouts die Vorgabe sind, wird es für Screen-Reader schwierig und für den Nutzer verwirrend.

Tabellen

Das Verwenden von Tabellen zu Layout-Zwecken birgt für den Screen-Reader-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 Screen-Reader bei WWW-Seiten mit 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 Screen-Reader-Nutzer immer hin und her springen. Die Frames sind zwar grundsätzlich kein Problem mehr für blinde und sehbehinderte Surfer, 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 Namen versehen werden, wie z. B. "Navigation", "Inhalt" und "Menü". Ideal wäre für die richtige Nutzung der Einsatz des Noframe-Tags z. B. mit einem Menü zur Navigation auf der Seite. Dies käme den blinden 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 einem alternativen Text versehen werden. Auch hier ist es der Screen-Reader, der in erster Linie versucht, ein statisches Bild der Seite zu interpretieren und dadurch die Veränderungen auf dem Bildschirm nicht oder falsch interpretiert.

Wenn bei der Web-Gestaltung darauf geachtet wird, dass sich die Farben von Text und Hintergrund deutlich von einander abheben, die Farben von einzelnen Zeichen und Elementen sowie die Schriftgrößen nicht fix in Punktangaben 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 z. B. die Möglichkeiten der relativen Schriftgrößen, der Header-Tags oder der Angabe relativer Schriftgrößen in den Style-Sheets (CSS).

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 Texten die Farbvorgaben einer Homepage 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 WWW-Seiten 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 WWW-Seite dies erlaubt.

Java und JavaScript

Auf Java und JavaScripts muss nicht verzichtet werden. Jedoch sollten Sie bei entscheidenden Stellen, die für die Interaktion wichtig sind, eine Alternativeingabe über einen Link vorsehen. Insbesondere dynamisch erzeugte Ergebnisse werden inkorrekt von den Screen-Readern verstanden.

Sound und Video

Welche Multimediaeffekte Sie in Ihrer Homepage einbauen, Sie werden stets für einen bestimmten Personenkreis eine Barriere aufstellen. Es gilt beispielsweise für jedes akustische Signal eine entsprechende optische Darstellung anzubieten.

Formulare und Dialoge

Die Beschriftung (und am besten die Bezeichnung 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.

Über das CSS-Design

Lesen Sie, [intern] warum ich mich an die Standards halte und warum das Layout mit [intern] Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der [intern] Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?


Entspricht die Seite den W3C-Normen?


validiertes XHTML 1.0
validiertes CSS

Die [intern] Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das -Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie [intern] Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.

 

[intern] Startseite [intern] Know-How [intern] Bücher [intern] Richtlinien [intern] Links [intern] Kontakt

Logo: Xplain  Die Entstehung