eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor     

4.2 Gestaltung barrierefreier Webseiten

 

Farbe und Schrift

Sehbehinderte benötigen einen hohen Kontrast zwischen Hintergrund und Schrift. Der Hintergrund sollte möglichst hell sein, die Schrift dunkel. Die Kombination rot-grün ist zu vermeiden, da die Rot-Grün-Blindheit die häufigste Form der Farbfehlsichtigkeit ist. Bei der Gestaltung von Buttons und sonstigen Symbolen ist die richtige Farbgebung besonders wichtig, da diese im Browser nicht manipulierbar sind. Bei Fließtext kann man Farben im Browser ignorieren lassen. Der Kontrast sollte aber auf jeden Fall ausreichend sein (vgl. Hellbusch URL). Text, Grafik und alle Informationen müssen verständlich bleiben, auch wenn sie ohne Farbe betrachtet werden (vgl. WEB for ALL URL). Für Sehbehinderte ist es wichtig, dass sie in ihrem Browser Schriftgröße und Schriftart selbst einstellen können. Aus diesem Grund sollten diese Formate nie absolut festgelegt werden. Die Bestimmung der Schriftgröße etwa sollte nicht über einen Größenwert in Punkt (z. B. 10 pt) erfolgen, sondern besser mit Angaben wie +2, +50%. Cascading Style Sheets (CSS) bietet mehrere Möglichkeiten, Angaben zu machen, die relativ zu den benutzereigenen Einstellungen definiert sind. Auf diese Weise können persönliche Präferenzen berücksichtigt werden (vgl. Hellbusch URL). Schriftarten ohne Serifen wie z. B. Arial oder Verdana sollten im Quelltext angeboten werden, da sie einen deutlichen Darstellungscharakter haben und für Sehbehinderte leichter zu erkennen sind. Die Verwendung von BLINK-Tags erschwert das Lesen auf dem Monitor und stört den Einsatz eines Vergrößerungssystems. HTML-Tags sollten korrekt verwendet werden. Möchte man z. B. einen Standardtext durch eine größere Schrift und Fettdruck hervorheben, sollte man die dafür vorgesehenen Tags (<big>, <b>) verwenden und nicht die Tags zur Formatierung von Überschriften (<h1>, <h2>, etc.) Umgekehrt sollten für Überschriften nicht die Tags verwendet werden, die zur Formatierung von Standardtext gedacht sind. Dies hängt damit zusammen, dass Screenreader Überschriften durch Pause und besondere Betonung kennzeichnen. Sie lesen aus dem Quellcode vor und erkennen an diesen Befehlen, um welche Art von Text es sich handelt (vgl. WEB for ALL URL).

 

Grafiken

In Grafiken enthaltene Informationen sollten immer zusätzlich in Textform dargestellt werden. Dies geschieht durch Hinterlegung der Grafik mit einem ALT-Tag. Allerdings sollten in den ALT-Tag keine zu langen Texte geschrieben werden, da dieser für Sehende in einem Kästchen sichtbar wird, wenn man die Maus über die Grafik bewegt. Sind größere Bildbeschreibungen erforderlich, z. B. Erklärungen von Diagrammen, kann über einen Link in der Nähe des Bildes auf eine Unterseite mit Textversion verzweigt werden (vgl. ebd.). Als Navigationselemente werden häufig Imagemaps verwendet. Sie bestehen aus mehreren Bildern mit verschiedenen Auswahlbereichen, denen jeweils ein Link zugeordnet ist. Man findet sie oft auf Übersichtsseiten (vgl. Hellbusch URL). Auch Landkarten sind Imagemaps. Wählt man eine Stadt aus, erhält man z. B. eine Liste aller Restaurants in dieser Stadt (vgl. WEB for ALL URL). Screenreader können die einzelnen Auswahlbereiche ausschließlich über den Titel des Bereichs erfassen. Deshalb muss zu jedem Bereich ein aussagekräftiger Titel vorliegen (vgl. Hellbusch URL). Wichtig ist auch, dass für alle in Grafiken und Imagemaps vorhandenen Links ein Alternativtext vorliegt, damit die von Blinden und Sehbehinderten verwendete Software sie erkennen kann. Bei Imagemaps geschieht dies am besten in Form einer Liste mit Übersicht über Anzahl und Ziel aller Links. Hintergrundgrafiken wirken sich negativ auf die Lesbarkeit des Standardtextes aus und sind, wenn sie dennoch verwendet werden, möglichst dezent zu halten (vgl. WEB for ALL URL).

 

Links

Die Namen von Links sollten aussagekräftig sein. Die Benutzer von Screenreadern lassen sich zunächst einen Absatz vorlesen, ohne dass dabei zwischen normalem Text und Links unterschieden wird. Erst anschließend lässt sich der Benutzer vom Rechner sagen, welche Links in dem Absatz enthalten sind. Deshalb ist es ungünstig, wenn Links nur aus einem Wort bestehen und ohne den Satz, in den sie eingebettet sind, unverständlich werden. Dasselbe gilt für die häufig verwendeten Links mit dem Titel "hier klicken", die der Benutzer möglicherweise zehnmal hintereinander zu hören bekommt. Er weiß nicht, zu welchen Informationen diese Verknüpfung führt. Idealerweise sollten Links untereinander liegen, wobei jeweils eine Leerzeile eingefügt wird. Screenreader haben oft Probleme, nebeneinander liegende Links voneinander zu unterscheiden (vgl. Dobusch URL). Menschen mit motorischen Einschränkungen können die Maus nicht so exakt auf dem Bildschirm positionieren, weshalb zu dicht beieinander liegende Links problematisch sind. Aus demselben Grund sollten Links und sämtliche Schaltflächen auch eine angemessene Größe haben (vgl. Hellbusch URL). Links für die gleiche Funktion (z. B. Rücksprunganzeiger) sollten immer an der gleichen Stelle positioniert werden. Blinde und manche mobilitätsbehinderte Menschen verwenden keine Maus, sondern arbeiten ausschließlich mit der Tastatur. Alle Links sollten daher mit der Tabulatortaste ansteuerbar sein (vgl. WEB for ALL URL).

 

Sonstiges

Screenreader und DOS-Browser wie Lynx unterstützen Java-Script nicht (vgl. WEB for ALL URL). Deshalb sollten Java-Applets durch den Text, der zwischen den Tags <Applet> und </Applet> steht, so beschrieben werden, dass keine Informationen verloren gehen, wenn das Applet nicht ausgeführt werden kann (vgl. Dobusch URL). Frames stellen für die Anwender solcher Programme oft ein großes Hindernis dar. Sie bleiben darin häufig "hängen" und können sich nicht durch die Seite bewegen. Deshalb sollte auf Frames verzichtet oder alternativ eine Noframes-Version angeboten werden (vgl. WEB for ALL URL). Auch Tabellen bereiten Probleme, da viele Screenreader und Browser  die Struktur nicht erkennen und einfach von links nach rechts über die Spalten hinweglesen. So werden Informationen, die eigentlich voneinander getrennt sein sollten, vermischt. Eine kurze Beschreibung in Textform ist daher sinnvoll (vgl. Dobusch URL). Zu Audio-Clips, die wichtige Informationen enthalten, sollte für gehörlose und schwerhörige User eine Textversion vorhanden sein.  Wenn Clips nur Musik oder Geräusche enthalten, sollte darauf zumindest ein kleiner Texthinweis gegeben werden. Dadurch hat der Benutzer nicht das Gefühl, etwas versäumt zu haben. Am einfachsten ist es, neben den Link, der zur Audio-Datei führt, einen weiteren Link zu setzen, der zu einem Alternativtext führt. Für Blinde kann man längere Texte als Audio-Clip anbieten. Dies funktioniert sehr gut mit Multimedia-Programmen wie z. B. audio-on-demand (vgl. ebd.). Die Verwendung einer klaren und einfachen Sprache ist eine Hilfe für Menschen mit kognitiven Behinderungen oder Lern- bzw. Leseschwierigkeiten. Auch für Gehörlose, deren Muttersprache die Gebärdensprache ist, ist der Zugriff auf geschriebene Information schwierig, da die Struktur der Gebärdensprache eine völlig andere ist als die der "normalen" Sprache (vgl. Web Content Accessibility Guidelines 2.0, Checkpoint 3.3).

Das National Center for Accessible Media (NCAM) hat ein Symbol für besonders behindertenfreundliche Webseiten entworfen, das Web Access Symbol. Webdesigner können es in ihre Seite einfügen, wenn sie glauben, dass diese den Bedürfnissen behinderter Internetnutzer entspricht. Maßgeblich für die Gestaltung sind die von der Web Accessibility Initiative (WAI) herausgegebenen Web Content Accessibility Guidelines.

Web Access Symbol (for people with disabilities)

Die WAI ist ein Organ des World Wide Web Consortiums und legt die Kriterien für Barrierefreiheit im Internet fest (vgl. Hellbusch URL).

Viele der hier genannten  Lösungen kommen übrigens auch gesunden Menschen zugute. Manche benutzen ältere oder textbasierte Browser, die keine Bilder unterstützen, oder sie haben Bilder wegen einer langsamen Internet-Verbindung abgeschaltet (vgl. Web Content Accessibility Guidelines 2.0 URL). Sehr bunte Seiten, deren Übersichtlichkeit nur auf einer bestimmten Farbauswahl beruht, können auf anders eingestellten Browsern ziemlich chaotisch aussehen. Insbesondere die großen Netscape Browser sollten nicht als Maßstab dienen. Eine "perfekt" gestaltete Seite kann auf einem anderen Browser völlig anders erscheinen (vgl. Dobusch URL).


    eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor     Erstellt von Simone Fabian, Kristina Laub & Claudia dos Reis Santos, letzte Änderung im Oktober 2002.