Web ohne Barrieren - Die Web Accessibility Initiative Die Web Accessibility Initiative (WAI) ist ein Organ des obersten WWW-Gremiums, des World Wide Web Konsortiums (W3C), und legt die Kriterien für Barrierefreiheit im Internet fest. Grundsätzliche Muss-Anforderungen sind hier definiert.

Visuell-bedingte Barrieren

Rot/grün und Kontrast
Die am häufigsten vorkommende Barriere im WWW liegt in der farblichen Gestaltung von Grafiken und Buttons. Eine sehr häufige Sehschwäche ist beispielsweise eine Rot/Grün-Schwäche. Menschen mit einer solchen Einschränkung haben Schwierigkeiten, zwischen bestimmten Farbtönen zu differenzieren. Sie sollten Rot und Grün nicht als kritische Erkennungsmerkmale einsetzen und Ihre Seiten bei der Gestaltung immer von einem Farbblinden überprüfen lassen.

Ebenfalls aus Sicht von Sehbehinderten ist anzuführen, 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 der darin enthaltenen Wörter dargestellt werden müssen, wenn sie lesbar sein sollen.

Alternativtexte bei 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 der Grafik zu erfahren, ist der sogenannte Alternativtext, der jeder Grafik im HTML-Quellcode beigefügt werden kann. Ein Screen Reader, der beim Übersetzen einer WWW-Seite auf eine Grafik trifft, gibt lediglich die Angabe "Grafik" und den Alternativtext aus. Fehlen Alternativtexte, kann es passieren, dass der Screen Reader eine Seite vorliest wie: "Grafik Grafik Grafik ...". Aus diesem Grund haben die Alternativtexte für Screen-Reader-Nutzer eine sehr wichtige Bedeutung.

Insbesondere die Grafiken, die als Link eingesetzt werden, bedürfen aus Sicht der Screen Reader-Anwender eine präzise Textbelegung bzgl. Ziel des Links. 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 wiederspiegeln. Wenn ein Bild als Navigationslink eingesetzt wird, sollte der Text dazu eben auf die dahinter stehende Information schließen lassen.

Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Bei Buttons reicht der Text auf dem Button. Bei anderen Symbolen ist die Bedeutung meist in ein bis drei Worten ebenfalls hinreichend erklärt. Gelegentlich kann es jedoch notwendig sein, eine längere Erläuterung beizufügen, etwa bei Fotos oder Karikaturen. Hier eignet sich besser als der Alternativtext der D-Link (D = Description, zu deutsch "Beschreibung"). Unmittelbar nach der Grafik kann ein Link mit dem Text "D" zu einer gesonderten Seite führen, die die Grafik ausführlich erläutert.

Bei Image-Maps handelt es sich um besondere Grafiken, meist mit Menüs, Listen oder andere Bereiche zum Anklicken mit der Maus. Die einzelnen Auswahlbereiche von Image Maps können Screen Reader ausschließlich über den Titel des Bereichs erfassen. Da die Maps meist zur Navigation auf Übersichtsseiten eingesetzt werden und daher eines der wichtigsten Navigationselemente darstellen, sind die einzelnen Titel besonders sorgfältig auszuwählen. Für ältere Screen Reader sind Image-Maps unüberwindbare Barrieren. Eine parallele "Nur-Text"-Seite ist nach den WAI-Richtlinien dringend zu empfehlen.

Layout

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

Für Sehbehinderte kann das Problem auftauchen, dass eine Tabelle breiter angelegt ist als die individuelle Bildschirmauflösung. Wenn die Breite der Tabelle ausschließlich über Zellen statt der gesamten Tabelle definiert wird, kann diese Irritation vermieden werden.

Tabellen jeder Art, ob sie eine tabellarische Darstellung enthalten oder für ein Layout von Text eingesetzt werden, können dann am besten gelesen werden, wenn die Zellen Zeile für Zeile von links nach rechts gelesen werden können und immer noch einen Sinn ergeben.
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 Fließtext Farbvorgaben zu ignorieren. Aber auch wenn man im Browser Farben ignorieren lassen kann, sind viele Sehbehinderte nicht darauf angewiesen. Jedoch tauchen gelegentlich Seiten auf, die nur einen geringen Kontrast zwischen Text und Hintergrund aufweisen. Bei der Textgestaltung ist auch auf die Farbgebung zu achten.

Oft werden sogenannte "Dummies" (transparente Grafiken) zum Einrücken oder Schaffen von Abständen zwischen Textteilen eingesetzt. Da sie unsichtbar sind und sein sollen, werden sie ohne Alternativtext belegt. Für Blinde sind solche Grafiken ohne Textangabe immer ein Rätsel, da sie nie wissen, ob sich ein informatives Bild dahinter verbirgt. Die Dummies unterbrechen auch den Lesefluss, da sie von den Screen Readern erfasst und ausgewertet werden. Wenn nicht auf die Dummies verzichtet werden kann, dann sollten die Grafiken sinnvolle Namen wie "layout.gif" und "transparent.gif" statt "lg2.gif" erhalten, damit zumindest über die Zweitinformation des Dateinamens Klarheit geschaffen wird.

Was dem "normalen" User zur Orientierung auf einer Seite oft hilft, sind Überschriften. In der Praxis ist es leider oft so, dass die Überschriften zunächst als Absatz definiert werden und der Text danach über Zeichengröße und/oder fett/kursiv hervorgehoben wird. Dabei verfügt HTML über Überschriften-Befehle, die dem Seitenüberblick bei langen Seiten dienen. Die Nutzung solcher Überschriften (H1, H2, ... H6) hilft dem Screen-Reader-Nutzer, schneller einen Überblick auf der Seite zu bekommen.

Ähnlich wie bei Tabellen können Screen Reader bei WWW-Seiten mit Frame-Sets immer nur einen der Frames gleichzeitig betrachten. Eine große Anzahl Frames macht Webseiten daher für Blinde und Sehbehinderte unüberschaubar. Damit blinde und sehbehinderte Internetnutzer schnell Zugang zu einem Frame-Set finden, ist es wichtig, dass Frames mit sinnvollen Namen versehen werden wie z. B. "Navigation", "Inhalt" und "Menü". Ideal eignet sich der korrekte Einsatz des <NOFRAMES>-Tags.

Relative Werte statt absolute Angaben
Für Sehbehinderte sind manche Seiten nicht zu lesen, weil die Schrift nicht nur zu klein, sondern auch unveränderbar ist. Dies ist immer dann der Fall, wenn Schriftgrößen etwa wie 10pt (pt = Punkt) vorgegeben werden. Das W3c hat sowohl mit HTML als auch mit Cascading Style Sheets (CSS) Möglichkeiten geschaffen, Angaben zu machen, die relativ zu den benutzereigenen Einstellungen definiert sind. Auf diese Weise können die persönlichen Präferenzen bei der Bestimmung der Schriftgröße immer berücksichtigt werden. In HTML gibt es die Skala 1, ... 7, die über den <FONT>-Tag definiert werden kann (wird aber demnächst nicht mehr im HTML-Standard enthalten sein). In CSS gibt es gleich mehrere Möglichkeiten, allen voran aber die Größe "em", die der benutzereigenen Schriftgröße entspricht.

Zur sehbehindertengerechten Gestaltung von WWW-Seiten gehört weiter das Verwenden von relativen Größenangaben für Tabellen und Frames. Die relativen Angaben im Layout dienen der Berücksichtigung verschiedener Bildschirmauflösungen (s.a. "Layout").

Motorisch bedingte Barrieren

Großzügige Flächen für den Mausklick
Ein Mensch mit motorischen Einschränkungen hat weniger Kontrolle über seine Bewegungen und somit auch über die Bewegung der Maus. Je nach Einschränkung kann das eine eher schleppende oder eher ruckartige Bewegung der Maus bedeuten - als ob Sie die Maus mit Boxerhandschuhen oder mit Ihren Füßen bewegen würden. Es ist daher von großer Bedeutung, dass wichtige Navigationselemente im selben Bereich des Bildschirms positioniert werden und dass gleichzeitig der anklickbare Bereich bei Links eine angemessene Größe hat.
Kleine Flächen sind tendenziell für alle lästig.

Tastaturbedienung
Ähnlich wie bei den Screen-Reader-Anwendern ist die Tastatur für motorisch gestörte Bewegungen der Maus wichtiger für den Benutzer als eine Maus. Alle Funktionen müssen daher auch per Tastatur ausgeführt werden können. Beispielsweise sollten Image-Maps, sofern sie eingesetzt werden, immer so angeboten werden, dass sie vom Browser interpretiert werden können und nicht als Server-seitige Funktion in der Seite eingebaut sein, um die Bedienung mit der Tastatur zu erlauben. Die Möglichkeiten, die Tastatur als Maus-"Ersatz" zu berücksichtigen, sind unlängst auch in Java und ActiveX implementiert.

Formulare
Ein "Spezialfall" der Tastatursteuerung ist der Umgang mit Formularen. Formulare werden manchmal auch für die Navigation eingesetzt, indem eine Liste von Themen o.ä. angegeben werden, z.B. per Auswahlliste, Drop-Down-Menü oder Radio-Button. Bei eingeschränkten motorischen Bewegungsmöglichkeiten sind Radio-Buttons für Navigationsfunktionen eine erhebliche Barriere.

Für motorisch Behinderte sollten bei Eingabefeldern möglichst alle Voreinstellungen bereits eingetragen sein. Einen Mehrfachtastendruck wie für das @ können viele kaum schaffen. Für sie ist es gut, wenn das @ bereits im E-Mail-Feld steht, oder noch besser bereits zwischen zwei Feldern steht (<TEXTAREA> @ </TEXTAREA>).
Für Sehbehinderte trifft das Gegenteil zu, weil sie unter Umständen gar nicht merken, dass da schon was eingetragen ist oder sich die Adresse auf zwei Felder verteilt. Sie schicken dann z.B. eine ungültige Email-Adresse ab. Das W3C empfiehlt deshalb, in Formularen jeweils eine Check Box vorzusehen, so dass ein Benutzer entscheiden kann, ob das Formular bereits ausgefüllt sein soll oder nicht.

Ergänzend sei noch aus Sicht der Screen-Reader-Anwender gesagt: Die Beschriftung von Eingabefeldern muss in deren unmittelbarer Nähe erfolgen, damit es nicht zu Fehleingaben kommen kann.

Auditiv bedingte Barrieren

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.

Sound- und Video-Clips dokumentieren
Wenn Sie Interviews, akustische Informationen und andere gesprochene Audiodateien auf ihren Seiten verwenden, sollten Sie dem Besucher Ihrer Website auch eine Textalternative anbieten. Bei der Verwendung von Video-Clips sollten entsprechende Untertitel verfügbar gemacht werden.

Eine rein akustische Seite ist mir persönlich nicht bekannt, aber die Sprache ist dem Menschen sicherlich ein intuitiveres Kommunikationsmittel als die Tastatur und der Bildschirm. Sicherlich wird in der Zukunft die Akustik im Web zunehmen. Es sollte daher immer darauf geachtet werden, alternative Ausgabemöglichkeiten anzubieten.

Sprachlich bedingte Barrieren
Wie bei der auditiv bedingten Barriere besteht auch hier noch kaum eine sinnvolle Anwendung im Netz, wo die Spracheingabe als Barriere gelten könnte.
Spracheingabe ist sicherlich auf dem Vormarsch, aber es wird noch Jahre dauern bevor interaktive Spracheingabe und -ausgabe zu einem Mittel der Kommunikation zwischen Mensch und Maschine auf breiter Basis eingeführt werden kann.
Das WWW als multimediales Kommunikationsmittel wird aber zwangsläufig die Sprache als Medium einsetzen, denn das ist unsere eigene natürliche Form der Kommunikation. Für bestimmte Anwendungen ist durchaus vorstellbar, dass die Sprache dem Text vorgezogen wird, aber beides muss möglich sein.

Kognitiv bedingte Barrieren
In den WAI-Richtlinien sind im wesentlichen nur solche Kriterien verankert, die physische Behinderungen betreffen. Barrieren, die durch geistige Fähigkeiten bedingt sind, müssen jedoch ebenso berücksichtigt werden, da sie durchaus - wenn auch in subtilerer Weise - jeden betreffen können. Eine komplexe Struktur der Inhalte und uneinheitliche Navigationsführung erschwert jedem den Zugang zu Internetangeboten!

Verständlich wie eine Grundschul-Lektüre
In den Anfangszeiten des Internet waren es begabte Programmierer und Gelehrte an Hochschulen, die das Medium "Internet" benutzten. Seit Anfang der 90er werden die Teilbereiche "WWW" und "Email" des Internets einem breiten Publikum immer zugänglicher. Es sind nicht mehr alleine die Hochintelligenten, die Analytiker und die Computer-Freaks, die das Web benutzen, sondern zunehmend auch "durchschnittliche" Personen und natürlich auch solche, die eine unterdurchschnittliche Intelligenz besitzen.

Es ist wichtig, dass Informationen auf einer Website von möglichst vielen verstanden werden. Versuchen Sie bei der inhaltlichen Gestaltung Ihrer Webseiten, möglichst auf komplexe Sätze und zu viele Fremdwörter zu verzichten.

Einfache Struktur / simple Navigation
Auch der Aufbau der Website, insbesondere der Navigation, sollte möglichst einfach gehalten werden. Die Navigation mit Menüs ist eng verknüpft mit einer visuellen Vorstellung des Aufbaus samt Inhalt der Sites. Bei fehlenden Visualisierungsfähigkeiten kommt es also darauf an, ein bestimmtes "Gerüst" vor sich zu haben.

Einfache, sinnvolle Namen für URLs
Eine andere kognitive Störung liegt im Bereich des Gedächtnisses. Ist ein Surfer nicht in der Lage, ungewöhnliche Namen oder andere Texte für mehr als ein Paar Sekunden zu behalten, kann das Navigieren im Web schnell in eine Sackgasse führen.

Wählen Sie Namen für Links, die einen Bezug zum Ziel haben. Vermeiden Sie solche Terme wie "Hier klicken". Sonstige Texte auf Ihren Seiten, die nicht als Link o.ä. einfach angeklickt werden können, sollten ebenfalls eine bedeutungsvolle Bezeichnung bekommen.

Wenn der Besucher Ihrer Webseite durch mehrere Seiten "gelotst" wird, geben Sie Hilfestellung bei jeder Entscheidung anstatt eine ausführliche Anleitung zu Beginn.

Rechtschreibprüfung bei Eingabefeldern
Auch Menschen mit Legasthenie sollten Sie berücksichtigen. Nicht jeder beherrscht die deutsche Rechtschreibung - das gilt sowohl für Deutsche als auch für internationale Besucher. Sie sollten daher bei Eingabefeldern in Formularen Vorsorge tragen.

Wenn Sie Suchfunktionen für Ihre Website eingebaut haben, überlegen Sie sich, ob Sie die Möglichkeit haben, phonetisch vorzugehen. Auch eine automatische Rechtschreibprüfung bei der Eingabe kann dem Benutzer helfen, schneller die Informationen zu finden, die er sucht. Beispielsweise könnte bei einem 0-Treffer-Ergebnis die Rechtschreibprüfung auch automatisch eingreifen und Verbesserungen vorschlagen.

Allgemein gibt es viele behinderte Menschen, die ausgegrentz werden. Mit diesem Wissen sollten auch Sie sich mehr mit dem Thema beschäftigen, um eine behindertengerechte Webseite zu erstellen.

Jan Eric Hellbusch hat zum Thema "Barrierefreies Webdesign" das Buch -Barrierefreies Webdesign - im KnowWare-Verlag veröffentlicht. Weitere Informationen zum Thema finden Sie auf seiner Homepage

http://www.barrierefreies-webdesign.de/

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Keine weiterführenden Beiträge.