Home Previous Zeitschrift 2002/01 Next Index
 
  Inhalt:
 
 
 
Vorbemerkung
Allgemeines zur Gestaltung 
Schrift
Farben
Bilder
Bewegte Bilder und Effekte
Audio
Applets und Scripts 
Links
Frames
Tabellen
Layout, Seitenaufbau 
Formulare
Sprache
E-Mail und Textdokumente
Überprüfung
Autor
Angebote

 

Empfehlungen für ein barrierefreies Webdesign

1. Vorbemerkung

Da sich dieser Artikel an geübte und fortgeschrittene NutzerInnen bzw. ProgrammiererInnen wendet, haben wir bei Fremdwörtern oder Fachausdrücken auf Verweise zum Glossar verzichtet. Bei der Zusammenstellung unserer Empfehlungen halfen uns zahlreiche bereits erarbeitete Texte und Ratschläge zum Thema, die sowohl von Institutionen als auch von engagierten Einzelpersonen zusammengestellt wurden. Hervorheben möchten wir den Gemeinsamen Fachausschuss für Informations- und Kommunikationssysteme (FIT), den Arbeitskreis EDV des Deutschen Blinden- und Sehbehindertenverbandes (DBSV), den Verein für Behinderte in Gesellschaft und Beruf (BiGuB e. V.) und das W3-Consortium mit seinen "Zugangsrichtlinien für Web-Inhalte". Die Links hierzu finden Sie in unserer Linkliste (auf der Homepage von WEB for ALL - Anmerkung der Redaktion)

Behinderte Menschen benutzen spezielle Hilfsmittel im Soft- und Hardwarebereich. Da diese Hilfsmittel oft sehr teuer sind, werden sie nicht so schnell ausgetauscht, wie z. B. eine einzelne Browserversion, sondern jahrelang verwendet. Deshalb orientieren wir uns an Hilfsmitteln, die in den letzten fünf Jahren auf den Markt gekommen sind. Da der Markt aber sehr komplex ist, ist es schwierig, einen vollständigen Überblick zu bekommen und wir sind für alle Hinweise und Diskussionsbeiträge dankbar. Das Papier spiegelt unseren derzeitigen Diskussionsstand wider. Für die einzelnen Punkte gibt es jeweils einen Text zur Erläuterung und im Anschluss eine Checkliste für die schnelle Übersicht. 

Die Checkliste haben wir bei verschiedenen Punkten in die drei Kategorien notwendig, empfehlenswert und komfortabel unterteilt. Notwendig bedeutet, dass die hier aufgeführten Punkte erfüllt sein müssen, weil die Inhalte sonst für viele Behinderte nicht nutzbar sind, empfehlenswert macht Ihre Webseite für behinderte NutzerInnen übersichtlich und zeitsparend, komfortabel heißt, die Programmierung in dieser Weise wäre entgegenkommend, die Funktion würde andernfalls aber nicht beeinträchtigt. 

2. Allgemeines zur Gestaltung

Der Text steht im Mittelpunkt von Webseiten, deshalb sollten alle Informationen auch als Text auf der Webseite zur Verfügung stehen. Damit ist eine wichtige Voraussetzung geschaffen, dass die Informationen auf Ihrer Seite mit den unterschiedlichsten Ausgabegeräten und mit verschiedenen Sinnen gelesen werden können. Sie sollten immer bemüht sein, Ihre Informationen vom Layout der Webseite zu trennen. Programmieren Sie nicht für die bestimmte Version eines Browsers oder eine festgelegte Auflösung, sondern für alle NutzerInnen des Internets. Dies hält Ihre Webseite für behinderte Menschen und die BesitzerInnen älterer Soft- und Hardware offen und gleichzeitig ist Ihr Internet-Auftritt für die Nutzung mit den modernsten Programmen, Browsern und Geräten am besten vorbereitet. 

Dem Ziel, Information und Layout zu trennen, dient auch der Einsatz von Cascading Style Sheets (CSS). Wir empfehlen Ihnen, CSS vor allem für Formate von Schrift und Farbe zu benutzen. Dies hat den großen Vorteil, dass behinderte und nichtbehinderte Menschen im Browser eigene Einstellungen z. B. für Schriftgrößen und Farben vornehmen können. Sobald jeder Browser in der Lage ist, alle CSS-Befehle korrekt umzusetzen, werden diese eine immer größere Rolle spielen. 

Beschränken Sie sich in der Verwendung von Multimedia, sowie komplizierten Layouts und spezieller Programmierung wie Java und Javascript, weil zahlreiche Browser und die Hilfsmittel Sehbehinderter das meist nicht in brauchbare Information umsetzen können. Wenn Sie Elemente nutzen, die nicht barrierefrei sind, dann schaffen Sie immer eine Text-Alternative. 

Bei komplizierten Webseiten oder solchen, bei denen eindeutig nicht Text sondern Grafiken im Vordergrund stehen, sollte man eine "Nur-Text-Version" erstellen. Diese kann mit einfachen Mitteln optimal barrierefrei gestaltet werden, hat aber den Nachteil, dass in Zukunft zwei Versionen gepflegt werden müssen. Textalternativen machen den Inhalt auch für Suchmaschinen zugänglicher. Verwenden Sie HTML syntaktisch und formal korrekt. Wenn Sie sich unsicher sind, ob Sie HTML sauber eingesetzt haben, können Sie das auch im Internet unter http://www.w3.org/People/Ragett/tidy oder http://validator.w3.org/ überprüfen lassen. Hier gibt es auch einen Link zur Überprüfung von CSS. 
 

Checkliste Gestaltung
  • Informationen immer als Text zur Verfügung stellen
  • Trennung von Information und Layout
  • Verwendung von CSS
  • Vermeidung von Multimedia und spezieller Programmierung wie Java, Javascript u. Ä.
  • zusätzliche "Nur-Text-Version" für komplizierte Seiten
  • HTML syntaktisch und formal korrekt einsetzen 

3. Schrift

Sehbehinderte Menschen brauchen die Möglichkeit, in den Browsern Größen und Farben für die Schrift selbst festzulegen, um sich auf diese Weise eine individuelle Bildschirmeinstellung einzurichten. Das ist aber nur möglich, wenn die Programmierung es zulässt. Legen Sie also die Formate nie absolut fest und benutzen Sie nicht den FONT-Tag. Bieten Sie im Quelltext mehrere Schriftarten ohne Serifen z. B., Arial, Verdana oder Sans Serife an, da diese für Sehbehinderte deutlicher zu erkennen sind. Mit dieser Auswahl stellen Sie auch sicher, dass jede/r NutzerIn den Text lesen kann und Sie nicht eine einzelne Schriftart gewählt haben, die auf deren System nicht verfügbar ist.

Verringern Sie den Standardabstand zwischen den Buchstaben nicht, weil auch das die Lesbarkeit verschlechtert und vermeiden Sie zugunsten der Übersichtlichkeit den Einsatz zu vieler unterschiedlicher Schriftfonts. Der Schriftgrad sollte mindestens 12 pt betragen und nicht absolut, sondern nur relativ festgelegt werden (z .B. +2, +50%, nicht 15pt). 

Verzichten Sie auf den Einsatz des BLINK-Tags. Erscheinende und wieder erlöschende Schrift erschwert die Orientierung auf dem Bildschirm und stört erheblich den Einsatz einer Vergrößerungssoftware. Die Information ist für Sehbehinderte meist nicht zu erkennen und macht das Ganze unnötig anstrengend. Schrift können Sie sinnvoll mit CSS formatieren. Ein sehbehinderter Nutzer kann dann seine eigenen Einstellungen wählen. 

Benutzen Sie HTML-Konstrukte wie H1, H2 usw. nur für die vorgesehene Funktion und nicht, um z. B. einen Standardtext hervorzuheben. Achten Sie auch auf die korrekte Verwendung von MARKUP. Formatieren Sie also Überschriften nicht z. B. mit bold, sondern benutzen Sie H1, H2 usf. Moderne Screenreader lesen aus dem Quelltext vor und orientieren sich an diesen Befehlen. Wenn Sie mitten in einem Text den H1-Befehl nutzen, um z. B. ein Wort fett hervorzuheben, wird ein Screenreader dieses Wort durch Pause und Betonung als Überschrift vorlesen. 
 

Checkliste Schrift
  • Schriftart und -größe nicht festlegen
  • <FONT>-Tag (für Schriftarten, -größen, -farben) nicht verwenden
  • Schriftarten ohne Serifen; empfohlene Schriftarten: Arial, Verdana, Sans Serife
  • sparsamer Einsatz unterschiedlicher Schriftfonts
  • Schriftgröße mindestens 12pt
  • nur relative, keine absolute Schriftgröße festlegen, z. B. nur +2, nicht 15pt
  • Standardabstand zwischen den Buchstaben nicht verringern
  • <BLINK>-Tag nicht benutzen: statischer, nicht dynamischer Text
  • mit CSS formatieren
  • HTML-Kontrukte und MARKUP korrekt einsetzen

4. Farben

Für Sehbehinderte ist ein hoher Kontrast zwischen Hintergrund und Schrift wichtig. Die kontrastreichste Kombination ist natürlich schwarz-weiß. Wenn zwei Farben für Text und Hintergrund gewählt werden, dann eine möglichst helle Hintergrundfarbe und schwarze Schrift. Verwenden Sie keine Farbkombinationen, die schlecht kontrastieren wie z. B. rot/braun. Ob der Kontrast ausreichend ist, können Sie testen, wenn auf Ihrem System eine monochrome (Schwarz-Weiß-)Bilddarstellung möglich ist: Die verschiedenen Grautöne vermitteln Ihnen eine Vorstellung davon, wie farbenblinde und viele sehbehinderte Menschen Ihre Seite wahrnehmen. Auf keinen Fall eine Seite in rot-grün gestalten: Die Rot-Grün-Blindheit ist eine der häufigsten Arten der Farbfehlsichtigkeit. 

Eine Grafik sollte noch verständlich sein, wenn sie ohne Farbe betrachtet wird. Vermitteln Sie Informationen nicht ausschließlich über Farbe, indem z. B. etwas nur durch einen Farbenwechsel symbolisiert wird. Oder wenn Sie eine grüne Schaltfläche auf einem grauen Hintergrund einsetzen, werden alle Farbenblinden, die Probleme mit dieser Farbkombination haben und NutzerInnen eines Schwarz-Weiß-Monitors diese optisch nicht wahrnehmen. Legen Sie die Farben nicht fest, damit Sehbehinderte eigene Einstellungen in ihrem Browser wählen können. 
 

Checkliste Farben
  • kontrastreiche Kombinationen; am besten schwarz-weiß; wenn zwei Farben für Text und Hintergrund, dann keine, die schlecht kontrastieren (z. B. nicht rot/braun)
  • auf farbigem (hellen) Hintergrund: Schrift schwarz
  • nicht rot/grün
  • Text, Grafik und alle Informationen müssen verständlich bleiben, wenn sie ohne Farbe betrachtet werden
  • nicht festlegen 

5. Bilder

Definieren Sie Text in keinem Fall als Grafik. Bilder, Grafiken, Symbole und alle anderen rein visuell angebotenen Informationen haben nur für Sehende einen Informationswert. Deshalb müssen sie immer zusätzlich mit einem aussagekräftigen Alternativtext versehen werden. Wiederholen Sie die Botschaft, die ein Bild übermitteln soll, in Textform. Sie haben dafür entweder die Möglichkeit, den ALT-Tag als Zusatzbefehl zum IMG-Tag zu nutzen oder einen Link zu einer Unterseite mit eigener Textversion zur ausführlichen Beschreibung anzubieten. In den Alt-Tag können Sie bis zu 1024 Zeichen hinein schreiben. Das entspricht ungefähr dem Text einer halben DINA4-Seite. Da dieser Text dann für Sehende in einem gelben Kästchen die Seite überlagert, muss man überlegen, ob diese Möglichkeit ganz ausgeschöpft werden sollte oder ob der Alt-Tag nicht wirklich nur für kurze Bezeichnungen eingefügt wird und man für darüber hinaus erforderliche Erklärungen einen Link zu einer Unterseite mit einer ausführlichen Beschreibung einrichtet. 

Setzen Sie aus den schon im Kapitel "Farben" beschriebenen Gründen keine oder nur sehr diskrete Hintergrundbilder/grafiken ein. Auch Diagramme sind Bilder und für eine/n Sehbehinderte/n überhaupt nicht oder nur wenig fassbar. Wenn das Diagramm die Aufbereitung einer hohen Anzahl von Daten darstellt, sollten Sie sie alternativ als Datentabelle anbieten und mit dieser wie in dem entsprechenden Kapitel beschrieben verfahren. Wenn dagegen das Diagramm vor allem eine Gesamtaussage, z. B. eine längere zeitliche Entwicklung, veranschaulichen soll, bietet es sich an, eine zusätzliche Seite zu verwenden, um dort die Aussage mit Text zu erläutern. 

Bei Imagemaps sollten Informationen über das gesamte Bild als Text zur Verfügung stehen und es muss klar sein, wie viele Links mit welchem Ziel vorhanden sind. Beispiel: Eine Landkarte von Baden-Württemberg gibt die Möglichkeit, die einzelnen Stadt- und Landkreise auszuwählen. Wählt man eine Stadt aus, erhält man z. B. eine Liste aller Restaurants in der Stadt. Bieten Sie alternativ eine Liste der in Imagemaps vorhandenen Links an. Imagemaps sollten immer client-seitig eingerichtet werden werden. Server-seitige Imagemaps sind eine Barriere für die NutzerInnen von Screenreader-Programmen. Client-seitige Imagemaps sind unproblematisch, da sie auch ohne Maus, nur mit der Tastatur angesteuert werden können. Bei der Benennung der Links ist es hier besonders wichtig, aussagekräftige, sinnvolle Bezeichnungen, die den Zusammenhang verständlich machen, zu verwenden. 

Für alle BesucherInnen Ihres Internet-Auftritts gilt: Je weniger grafisches Beiwerk sich auf Ihren Seiten befindet, desto besser kann man sich auf die wichtigen Informationen konzentrieren. 
 

Checkliste Bilder
  • Texte nicht als Bilder ablegen
  • immer Unterlegung mit Alternativ-Text
  • Information in Textform wiederholen
  • keine Hintergrundbilder/grafiken bzw. nur sehr dezent 
  • Diagramme
    • mit Alt-Text unterlegen
    • Alternative anbieten (z. B. Tabelle) Imagemaps
    • Textinformation über das gesamte Bild
    • Liste mit Übersicht über Anzahl und Ziel aller Links
    • client-seitige statt server-seitige Imagemaps bereitstellen 

    6. Bewegte Bilder und Effekte

    Generell gelten die bei "Bilder" beschriebenen Regeln auch hier. Sorgen Sie zusätzlich dafür, dass man bewegte Bilder immer stoppen kann und bieten Sie eine Beschreibung in einer alternativen Textseite an. Setzen Sie für die Beschreibung von ganzen Videofilmen oder eben sehr komplexen Inhalten, einen Link an eine logische Stelle, der zu einer ausführlichen Beschreibung dessen, was ein Sehender wahrnimmt, führt. 

    Wenn Sie beabsichtigen, flackernde oder aufblitzende Elemente in Ihre Seite einzubinden, bedenken Sie, dass das für Menschen mit photosensitiver Epilepsie fatal sein kann: Im Bereich von 4 bis 59 Hertz oder bei einem schnellen Wechsel von Dunkel nach Hell kann die Betrachtung einen Anfall auslösen. Verzichten Sie auf sich bewegenden/laufenden Text, wenn es keine Möglichkeit gibt, ihn anzuhalten.
     

    Checkliste bewegte Bilder und Effekte
    • Möglichkeit zum "Einfrieren", zum Anhalten
    • Angebot der Beschreibung in einer alternativen Textseite
    • Beschreibung für Video
    • für komplexen Inhalt:  Beschreibungs-LINK
    • kein Flackern oder Aufblitzen im Bereich von ca. 4-59 Hertz
    • kein Lauftext 

    7. Audio

    Alle Informationen, die nur als hörbare Datei über das Internet zum Nutzer gelangen, erreichen gehörlose Menschen nicht. Deshalb müssen für alle diese Dateien, abhängig von der Bedeutung, entweder komplette Textalternativen oder zumindest kurze Textbeschreibungen angeboten werden. Dies gilt entsprechend für den Ton bei Videos und Audiovorträgen. Behalten Sie auch hier immer die Aktualisierung der alternativen Seite im Auge!
     

    Checkliste Audio
    • für Schwerhörige/Taube: Textalternative bzw. kurze Beschreibung Musik/Geräusch
    • ggf. Transkripte bei Videosequenzen anbieten

    8. Applets und Scripts

    Verwenden Sie Applets und Scripts nur dann, wenn Sie eine Alternative anbieten können, weil DOS-Browser wie LYNX mit z. B. JavaScript nichts anfangen können. Achten Sie darauf, dass die Seite ihren Informationswert behält, wenn diese Elemente abgeschaltet werden und dass dann unabhängig vom Eingabegerät in der Seite noch navigiert werden kann.
     

    Checkliste Applets und Scripts
    • Alternative anbieten
    • wenn abgeschaltet noch Informationswert?
    • vom Eingabegerät unabhängig nutzbar 

    9. Links

    Die Namen von Links sollten klar und in wenigen Worten sagen, zu welchen Informationen die Verknüpfung führt. Blinde NutzerInnen bewegen sich oft von Link zu Link und erhalten auf diese Weise einen Überblick. Wenn auf einer Seite jede weitere Erläuterung mit "Klicken Sie: Hier" angeboten wird, ist das Ergebnis beim Durchsuchen der Seite eine ständige Wiederholung: "Hier", "Hier", "Hier". Der Titel eines Links, der auf ein Unterkapitel verweist, sollte eine kurze Information über dieses beinhalten. 

    Achten Sie darauf, dass die Links nicht zu dicht nebeneinander liegen, und setzen Sie mindestens ein Leerzeichen dazwischen. Für Sehbehinderte ist es übersichtlicher, wenn Linklisten untereinander, nicht nebeneinander angeordnet sind. Ebenfalls komfortabel sind Shortcuts für wichtige Links. Positionieren Sie Links, die zur Navigation benötigt werden, immer an die gleiche Stelle und platzieren Sie wichtige Navigationselemente an den Anfang der Seite. Damit machen Sie Ihre Seiten benutzerfreundlicher. Setzen Sie bei Seiten, die mit vielen Links beginnen, die nichts mit dem eigentlichen Thema zu tun haben, einen Link an den Anfang der Seite, der zum Wesentlichen führt. 

    Bei Suchmaschinen wäre das z. B. ein Link zum Formularfeld "Suchen". Stellen Sie sicher, dass alle Links mit der Tabulator-Taste ansteuerbar sind. Vergessen Sie bei Grafiken, die einen Link enthalten, nicht den Alt-Text für den Link und denken Sie daran, dass auch die Schriftgröße der Link-Beschriftungen nicht unter 12pt liegen sollte. 
     

    Checkliste Links notwendig
    • deutliche inhaltliche Beschriftung
    • Links zu Unterkapiteln; nicht nur einzelne Wörter, sondern ganzer Begriff/komplette Information
    • alle Links mit der Tab-Taste ansteuerbar 
    empfehlenswert
    • nicht zu dicht beieinander
    • immer an der gleichen Stelle der Seite
    • wichtige Navigationselemente am Anfang der Seite platzieren
    • bei Seiten, die am Beginn zahllose Links zu Themen haben, die nicht interessieren: 1 LINK am Anfang z. B. zu "Suchen" 
    komfortabel
    • untereinander, nicht nebeneinander
    • Shortcuts für wichtige Links

    10. Frames

    Frames stellen für blinde Menschen, die sich nicht mit der Maus, sondern nur mit verschiedenen Tastenkombinationen durch eine Seite bewegen, oft Barrieren dar. Sie bleiben darin häufig "hängen", d. h. das Programm liest immer wieder die gleiche Stelle vor und läuft nicht weiter. 

    Unsere Empfehlung lautet deshalb, keine Frames zu verwenden. Wenn Sie dennoch nicht auf den Einsatz von Frames verzichten wollen, unterlegen Sie diese mit einer Noframe-Version. Was zwischen <NOFRAMES> und </NOFRAMES> steht, wird auf Browsern angezeigt, die keine Frames beherrschen. Framefähige Browser erkennen diesen Tag und ignorieren den Bereich. Entwerfen Sie Ihre Seiten so, dass man sich ausschließlich mit der Tab-Taste hindurch bewegen kann. Sowohl blinde als auch motorisch behinderte Menschen arbeiten nur mit der Tastatur. 

    Benennen Sie jeden Frame eindeutig mit Angabe des zugewiesenen Bildschirmbereichs und seiner Funktion, z. B. "oben Menüframe", "Mitte Hauptframe" "links Navigationsframe" und geben Sie ihnen Namen z. B. "Text", "Inhalt", etc. Diese Namen können von den Screenreader-Programmen der blinden NutzerInnen wiedergegeben werden und sind für die Orientierung notwendig. Stellen Sie am Beginn der Site eine "Sitemap" zur Veranschaulichung der Struktur zur Verfügung. 
     

    Checkliste Frames notwendig
    • so entwerfen, dass man sich ausschließlich mit der Tab-Taste durch die Seite bewegen kann, ohne "Hängenzubleiben".
    • Frame eindeutig benennen mit Ortsbezeichnung + Funktion
    • jeden Frame mit Namen versehen ("Text", "Inhalt",...) 
    empfehlenswert
    • keine Frames verwenden oder
    • Noframes-Version anbieten 
    komfortabel
    • Inhaltsverzeichnis, "Sitemap", zur Veranschaulichung der Struktur

    11. Tabellen

    Tabellen stellen oft Barrieren für blinde und sehbehinderte Menschen dar, die sich Internet-Seiten mit einem speziellen Programm vorlesen bzw. auf die Braillezeile umsetzen lassen. Man muss dabei bedenken, dass in diesem Fall eine Maus nutzlos ist und man sich nur mit der Tab-Taste über die Seite bewegt. Gleichzeitig gibt es auch noch verschiedene Screenreader, die unterschiedlich arbeiten. 

    Screenreader verarbeiten die Informationen, die sie einerseits aus der Bildschirmanzeige (d. h. der Auswertung des Bildschirmspeichers) und andererseits aus Programmen oder Quelltext erhalten. Screenreader in Verbindung mit Webbrowsern greifen verstärkt auf den Quelltext, d. h. die HTML-Dateien zu. Manche Screenreader haben keine Probleme, Tabellen zu erkennen und lesen aus dem Quelltext vor, dass jetzt eine Tabelle kommt und wie sie aufgebaut ist. Ältere Versionen lesen aber nur den Text vor und sagen nicht an, dass es sich um eine Tabelle handelt. Es gibt ältere Screenreader, die die Struktur einer Tabelle nicht voll erfassen und den Text nicht sinnvoll auslesen. Lesen Sie hierzu auch die genauere Beschreibung von Screenreadern etc. auf der Seite Probleme bzw. den Hilfsmitteltest auf der Seite ...von anderen.

    11.1 Layouttabellen 

    Die häufigste Form, bei einer Webseite ein Layout festzulegen, ist der Einsatz von - meist unsichtbaren - Layouttabellen. Wenn sich ein Screenreader nun von Zelle zu Zelle "bewegt", kann die inhaltlich logische Reihenfolge durcheinander kommen. Werden Layouttabellen ineinander verschachtelt, gibt das Programm Unsinn wieder. Vermeiden Sie deshalb komplexe Layouttabellen und achten Sie beim Einsatz darauf, dass die Linearität gewahrt bleibt, sprich, der Aufbau des Inhalts der Webseite dem Aufbau der Layouttabelle (von Zelle zu Zelle) entspricht.

    11.2 Datentabellen 

    Für sehbehinderte Menschen kann es sehr mühsam sein, eine Tabelle mit Daten zu verstehen. Ein sehender Leser sucht meist nur einen oder wenige bestimmte Werte von vielen und wählt diese optisch aus. Um den Umgang mit Datentabellen zu erleichtern, sollten Sie die Zeilen- und Spaltenköpfe kennzeichnen sowie den Inhalt und die Aussage der Datentabelle zusammenfassen.
     

    Checkliste Tabellen notwendig
    • nur fürs Layout verwenden, wenn die Linearität beibehalten wird
    • der Tabelle zu Beginn eine Überschrift/Tabellennamen geben
    • bei Datentabellen Zeilen- und Spaltenüberschriften kennzeichnen 
    empfehlenswert
    • Inhalt zusammenfassen

    12. Layout, Seitenaufbau

    Bauen Sie Ihre Site so auf, dass die Orientierung mit einem durchgängig benutzten Layout erleichtert wird und positionieren Sie Links für die gleiche Funktion immer an derselben Stelle. Das nutzt auch dem Wiedererkennungswert Ihrer Seiten und Ihrer Corporate Identity. Beginnen Sie mit dem wesentlichen Bestandteil am Anfang der Seite, damit LeserInnen mit dem Screenreader sich nicht durch unzählige Links klicken müssen, um zu der gesuchten, wichtigen Aussage oder einem Eingabefeld (z. B. bei Suchmaschinen) zu gelangen. Für Sehbehinderte ist es hilfreich, wenn diese Navigationselemente grafisch hervorgehoben werden. 

    Vermeiden Sie sich automatisch über der Seite öffnende Fenster (Pop-Ups), weil sie Orientierung und Navigation erschweren. So können z. B. Blinde viele Pop-Ups nicht mehr schließen, weil das nur mit einem Mausklick möglich ist. Zur Nutzung nicht unabdingbar aber angenehm ist die Bereitstellung eines Inhaltsverzeichnisses (Sitemap) zur Orientierung in der gesamten Site. Komfortabel ist ein einspaltiges, vertikal angeordnetes Inhaltsverzeichnis; untereinander angeordnet ist die Struktur vor allem für Sehbehinderte besser erkennbar. 
     

    Checkliste Layout/Seitenaufbau notwendig
    • Layout einheitlich für alle Seiten
    • klare + einheitliche Navigationsstruktur; z. B. Rücksprunganzeiger immer am Anfang oder Ende
    • die wesentlichen Bestandteile an den Anfang der Seiten
    • keine Pop-Ups 
    empfehlenswert
    • Informationen zum allgemeinen Layout einer Seite am Anfang
    • Sitemap 
    komfortabel
    • einspaltiges, vertikal angeordnetes Inhaltsverzeichnis
    • grafisch hervorgehobene Navigationselemente 

    13. Formulare

    Bei Formularen haben sehbehinderte Nutzer oft das Problem, dass die Zuordnung zwischen dem Namen und dem eigentlichen Formularfeld nicht eindeutig ist. Positionieren Sie deshalb die Beschriftung direkt vor dem dazu gehörigen Formularfeld und arbeiten Sie mit HTML so, das die Verbindung zwischen Beschriftung und Formularfeld nicht unterbrochen wird. Sichern Sie die logische Reihenfolge der Tab-Sprünge, damit die Bewegung ausschließlich mit der Tastatur möglich ist. Stellen Sie Shortcuts für wichtige Steuerungselemente (Buttons, Schaltflächen, etc.) bereit, damit alle NutzerInnen eine Chance haben, zeitsparend an die gesuchten Informationen zu gelangen. 
     

    Checkliste Formulare
    • Beschriftung jeweils direkt vor der Zeile positionieren
    • logische Tab-Reihenfolge
    • ausschließlich mit der Tastatur bedienbar
    • Tastatur-Kurzbefehle (Shortcuts) für wichtige Elemente

    14. Sprache

    Sich so auszudrücken, dass nur eine begrenzte Anzahl von Menschen in der Lage ist, es zu verstehen, war noch nie ein Zeichen von höherer Bildung. In einem Medium wie dem Internet, auf das eine Vielzahl unterschiedlichster Menschen zugreifen kann, muss mehr denn je darauf geachtet werden, Sprache allgemein verständlich zu gebrauchen. Gerade hier werden aber oft Fachausdrücke benutzt, die bestimmte Gruppen von NutzerInnen ausgrenzen. Auch unter dem Aspekt des begrenzten Platzangebots einer Webseite ist es ratsam, sich klar und einfach auszudrücken. 

    Bei komplizierten Sätzen mit unnötig eingesetzter Fachterminologie werden die BesucherInnen Ihrer Webseiten Ihnen nicht lange erhalten bleiben. Wenn Sie sicher gehen möchten, dass die Informationen, die Sie vermitteln wollen, für alle verständlich sind, Sie aber der Ansicht sind, einige Fachausdrücke nicht vermeiden zu können, so erklären Sie das jeweilige Wort an Ort und Stelle in Klammern oder legen Sie ein Glossar an. 

    Lassen Sie Ihren fertigen Entwurf immer von einer "fachfremden" Person gegenlesen, bevor Sie ihn ins Netz stellen. Setzen Sie auch bei Artikeln, die für ein begrenztes Fachpublikum geschrieben sind, eine Rechtschreibprüfung und eine/n  Korrekturleser/In ein. Für NutzerInnen, die mit Screenreader lesen, können Rechtschreibfehler und ungeläufige Abkürzungen sehr hinderlich sein und den Sinn verstellen.
     

    Checkliste Sprache
    • allgemein verständlich
    • klar und einfach
    • Fachausdrücke nur wenn nicht vermeidbar
    • wenn Fachterminologie oder Worte aus anderen Sprachen, dann im Text in Klammern dahinter erklären oder ein Glossar anlegen
    • Abkürzungen und Akronyme kennzeichnen und erklären
    • Rechtschreibprüfung einschalten
    • menschliche/n KorrekturleserIn einsetzen

    15. E-Mail und Textdokumente

    Soweit Sie die Fähigkeiten und Anwendungsprogramme der EmpfängerInnen Ihrer E-Mail nicht kennen, sollten Sie Folgendes beachten: Versenden Sie E-Mails immer als Text. Wenn Sie das Medium Text verlassen und z. B. HTML-Formatierungen oder sogar Bilder in Ihre E-Mail aufnehmen, riskieren Sie, dass blinde AdressatInnen oder NutzerInnen mit alten Browsern Ihre Information nicht lesen können. 

    Halten Sie sich beim Benennen von Dateien, die Sie als Anhang mitsenden, an die alte MS DOS-Konvention, nach der Dateinamen aus maximal acht Zeichen, einem Trennpunkt und einer Erweiterung aus höchstens drei weiteren Zeichen (keine Punkte!) bestehen sollen. Übermitteln Sie Texte in Anhängen in einem allgemein gehaltenen Format (z. B. RTF, TXT). Es sollte beim Herunterladen von Textdokumenten (z. B. PDF) die Möglichkeit bestehen, zwischen verschiedenen Formaten zu wählen. Stellen Sie in jedem Fall eine TXT- oder RTF-Datei zur Verfügung.
     

    Checkliste E-Mail
    • E-Mail als Text versenden
    • MS DOS-Konvention für Dateinamen von Anhängen einhalten (xxxxxxxx.xxx)
    • Texte im Anhang im RTF- oder TXT-Format anbieten
    • Herunterladen von Textdokumenten in verschiedenen Formaten ermöglichen

    16. Überprüfung

    Ihre Website ist fertig. Es gibt nun unterschiedliche Möglichkeiten zu testen, ob auch wirklich alle, die Sie ansprechen wollen, umfassend in den Genuss Ihres Internet-Auftritts kommen. Um die Zugänglichkeit Ihrer Website zu überprüfen, sollten Sie Folgendes ausprobieren: 

    Können alle Inhalte wahrgenommen und alle Steuerungsfunktionen ausgeübt werden wenn die Einstellungen in ihrem Browser so geändert werden, dass jeweils keine Grafiken mehr geladen werden, Java, JavaScript und Formatvorlagen/Stylesheets nicht aktiviert sind?  Betrachten Sie Ihre Webseite in schwarz-weiß: Sind alle Inhalte mit ausreichendem Kontrast dargestellt? Wenn Ihr System das nicht zulässt, können Sie sich auch helfen, indem Sie einen Screenshot von einzelnen Stellen Ihrer Webseite anfertigen und in einem Bildbearbeitungsprogramm die Farben reduzieren.  Ist Ihre gesamte Website nur mit der Tastatur (Tab-Taste) sinnvoll steuerbar? Dieser Test ist vor allem bei der Verwendung von Tabellenlayouts und Frames notwendig.  Testen Sie Ihre Website mit unterschiedlichen Browsern, verschiedenen Versionen und mit mehreren Auflösungen. 

    Das sind die Punkte, die Sie selbst kontrollieren können. Lassen Sie die Zugänglichkeit aber zusätzlich durch behinderte NutzerInnen mit ihren jeweiligen Hilfsmitteln und der dazu gehörigen Software und durch einen Kontrolldurchlauf mit Nicht-Behinderten testen. Wenn Sie Ihre Seite mit dem Browser Lynx anschauen, bekommen Sie eine Vorstellung davon, was von Ihrer Seite übrigbleibt, wenn man auf Informationsübermittlung nur über Text angewiesen ist.
     

    Checkliste Überprüfung
    • Inhalt und Navigationsfunktion mit ausgeschalteten Grafiken und deaktiviertem Java, JavaScript, Formatvorlagen/Stylesheets testen
    • Webseite in schwarz-weiß: Kontrast ausreichend?
    • Navigation nur durch Tastatur möglich?
    • mit verschiedenen Browsern und unterschiedlichen Versionen testen systematischer Browser-Test von CSS: http://www.fas.harvard.edu/~dbaron/csstest/
    • Test für/mit Lynx: http://www.delorie.com/web/lynxview.html
    • Zugänglichkeitsprüfung durch behinderte NutzerInnen
    • Kontrolldurchlauf durch nicht behinderte Menschen

     
     

    Logo - WEB for ALL

    Das Team von WEB for ALL
    Heidelberg


    Angebote von WEB for ALL:
    • Überprüfung und Beratung
    • Webseitengestaltung
    • Infoveranstaltungen und Vorträge
    Zum Seitenanfang
     

    © ADOLPH Verlag GmbH - Letztes Update 03.05.2004