Startseite | Infos für Behinderte | Behindertensoftware | Forum | Programmierarchiv | Webguide | Markus privat | Kontakt | Download | Online Games | Entstehungsgeschichte


Richtlinien für behindertengerechte Webseiten



Über diese Thema gibt es zwar schon einige Links, aber Marlem-Software wird hier die offiziellen Richtlinien ebenfalls veröffentlichen. Hier werden auch praktische Tipps für die konkrete Umsetzung gegeben.

Bevor ich nun zu den Richtlinien komme, noch einige praktische Tipps. Verwenden Sie bei der Erstellung von Webseiten unbedingt CSS(Style Sheets). Eine zentrale CSS-Datei nimmt ihnen sehr viel Arbeit ab und Sie können, das Design einer Webseite sehr bequem und sehr schnell anpassen. Außerdem hat CSS auch im Zusammenhang mit Barrierefreiheit viele tolle Möglichkeiten. Deswegen möchte ich hier noch ein paar Links zum Thema CSS aufführen.

Links zum Thema CSS

CSS 4 you

CSS-PRAXIS

CSS Barrierefrei e-workers



Inhaltsüberblick über die Richtlinien zur Erstellung von barrierefreien Internetseiten

  1. Bilder sollten immer einen Alt-Tag haben
    Blinde Menschen können mit der EDV nur mit Hilfe eines Screenreaders arbeiten. Ein Screenreader ist eine Software die den Bildschirminhalt liest und in Brailleschrift übersetzt. Brailleschrift ist eine spezielle Schrift für Blinde Menschen. Jeder Buchstabe wird in Punkte dargestellt. Diese Punkte werden auf einer Braillezeile dargestellt und können mit den Händen ertastet werden. Wer es ganz genau wissen will, sollte auf die Webseite von Matthias-Haenel Schauen.
    Da diese Screenreader Software nur lesen und nicht sehen kann, werden Bilder als weisse Flächen wahrgenommen! Den Alt-Tag kann aber die Screenreader-Software lesen, und somit weiss der blinde Mensch, dass da ein Bild ist! Natürlich ist es auch wichtig, dass der Alt-Tag dieses Bild beschreibt und nicht einfach irgendwas drin steht! Leider ist die Interpretation des Alt-Tags von Browser zu Browser unterschiedlich und eigentlich soll er wohl eher einen Text anbieten, wenn das Bild gar nicht angezeigt werden kann. Das manche Browser ihn als Tooltip(=Kurzhilfe) anzeigen ist wohl eher Zufall! Der Title-Tag ist hier wohl besser, weil er bei allen Browsern (getestet bei Internet Explorer 6.0, Netscape 6, Opera 6.05, Mozilla 1.2) als Tooltip angezeigt wird! Das heißt aber nicht, dass Sie den Alt-Tag weg lassen dürfen! Der Alt-Tag ist HTML-Standard und muss verwendet werden. Benutzen sie einfach beide!
    Der Title-Tag ist auch HTML-Standard und kann auf alle Tags angewendet werden.
    Beispiel:
    <img src="passbild.jpg" alt="Auf diesem Passfoto sieht man Markus" title="Auf diesem Passfoto sieht man Markus" >

    Mit dieser Lösung haben Sie die Gewißheit dass in 99% alle Fälle bei Bildern ein Tooltip angezeigt wird, welcher von Screenreadern gelesen werden kann, unabhängig vom verwendeten Browser.

    Zurück zum Inhaltsüberblick

  2. Der Font-Tag hat ausgedient!
    Nicht nur wegen sehbehinderten Menschen, sondern auch in der nächsten HTML-Version wird es den Font-Tag nicht mehr geben! Nehmen Sie deswegen lieber Style-Sheets. Die Angaben:
    xx-small = winzig.
    x-small = sehr klein.
    small = klein.
    medium = mittel.
    large = groß.
    x-large = sehr groß.
    xx-large = riesig.
    smaller = sichtbar kleiner als normal.
    larger = sichtbar größer als normal.
    
    sind relativ und somit kann der Anwender seine persönlichen Einstellungen im Browser festlegen. Es sind aber auch Prozentangaben zulässig.
    Zum Beispiel: font-size: 80%;
    Damit hat man sehr gute Skalierungsmöglichkeiten und schreibt einem Browser dennoch nicht vor, wieviel Pixel eine Schrift hoch sein sollte.

    Zurück zum Inhaltsüberblick

  3. Farben
    Für Sehbehinderte und Farbenblinde ist ein hoher Kontrast zwischen Hintergrund und Schrift wichtig. Es sollte immer eine helle Farbe für den Hintergrund gewählt werden und eine dunkle Farbe für die Schrift. Grafiken sollten auch erkennbar sein, wenn Sie ohne Farbe dargestellt werden. Der Browser Opera hat solch eine Funktion! Da kann man sämtliche Formatierungen herausnehmen und der Hintergrund ist dann weis.

    Zurück zum Inhaltsüberblick

  4. Links
    Links sollten eine deutliche Beschriftung haben. Sinnvoll ist, dass eine Linkbeschriftung aus mehreren Worten besteht. Alle Links sollten mit der Tabulatortaste erreichbar sein, weil es behinderte Menschen gibt, die mit der Tastatur besser umgehen können als mit der Maus. Links sollten nicht zu dicht nebeneinander bzw. übereinander liegen. Menschen mit Behinderung oder Senioren haben Probleme, den Mauszeiger exakt an eine gewisse Position zu steuern, deswegen ist hier ein gewisser Abstand ganz sinnvoll. Wichtige Navigationselemente sollten am Anfang und am Ende der Seite platziert werden, damit man sich großes scrollen erspart!

    Zurück zum Inhaltsüberblick

  5. Bewegte Bilder und Effekte
    Hier ist auch das zu beachten, was im Umgang mit Bildern zu beachten ist. Ein bewegtes Bild sollte man immer anhalten können. Es sollte auch immer ein Alt-Tag vorhanden sein. Flackernde oder aufblitzende Bilder in einem bestimmten Hertzbereich, können bei Betrachtung von Menschen mit Epilepsie einen Anfall auslösen! Deswegen sollte man auf solch Elemente verzichten, wenn es keine Möglichkeit gibt diese zu stoppen. Ein Beispiel wie man es programmieren kann, eine Animation zu stoppen finden Sie hier:
    Animation stoppen

    Hier noch ein Beispiel wie man ein Gif erstellen kann, welches eine bestimmte Anzahl von Bewegungen macht und dann selbst anhält:
    Animation stoppt selber


    Zurück zum Inhaltsüberblick

  6. Frames
    Frames stellen für blinde Menschen, die sich nur mit Tastatur durch eine Internetseite bewegen, ein Problem dar! Es ist schwierig, per Tastatur von einem Frame zum anderen zu kommen. Deswegen ist von der Verwendung von Frames abzuraten. Wenn Sie trotzdem unbedingt Frames haben wollen, bieten Sie auf jeden eine No-Frames-Version an! Geben Sie jedem Frame einen aussagekräftigen Titel, damit die Screenreader-Software von Blinden dies vorlesen kann und der blinde Mensch eine Orientierung hat! Wenn Sie dennoch eine Navigation haben möchten die auf jeder Seite sichtbar ist, dann kopieren Sie einfach den HTML-Code ihrer Navigation auf jede HTML-Seite. So habe ich das bei meiner Internetseite auch gemacht.

    Zurück zum Inhaltsüberblick

  7. Tabellen
    Tabellen können für manche Screenreaderprogramme von blinden Menschen ein Problem sein! Allerdings die neuen Programme haben extra eine Tabellen-Lesefunktion, so das generell Html-Tabellen verwendet werden können! Abzuraten ist von verschachtelten Html-Tabellen. Hier kommen die Screenreader-Programme wirklich durcheinander. Für Sehbehinderte kann es schwer sein, Datentabellen zu erkennen und zu verstehen. Zeilen- und Spaltenköpfe sollen deshalb besonders gekennzeichnet werden und man sollte die Aussage einer Datentabelle zusammenfassen.

    Zurück zum Inhaltsüberblick

  8. Layout und Seitenaufbau
    Sie sollten Ihre Seite mit einem durchgängigen Layout versehen. Das nutzt dem Wiedererkennungswert und hilft bei der Orientierung! Wichtige Informationen gehören an den Beginn der Seite, damit blinde Menschen, welche einen Screenreader verwenden sich nicht durch unzählige Links durcharbeiten müssen. Von Fenstern die sich automatisch öffnen (Pop-Ups) ist abzuraten. Blinde Menschen "sehen" ja nicht, dass da noch ein Popupfenster aufgegangen ist und somit kann es sein, dass sie das Popupfenster für die aufgerufene Webseite halten. Das Popupfenster hat auch keine eigene Task, somit kann es auch nicht über den Taskmanager identifiziert werden. Man findet auch oft Banner die ihren Inhalt wechseln. Dieser Wechsel wird mit einem "Refresh"(=neu laden der Seite) vollzogen. Nach jedem Laden der Seite beginnt die Screenreader-Software von Blinden den Lesevorgang neu, am Anfang der Seite. Deswegen haben Blinde bei solch Seiten, keine Chance bis zum Seitenende zu kommen! Von der Verwendung von solchen Bannern ist deswegen dringend abzuraten!

    Zurück zum Inhaltsüberblick

  9. Formulare
    Bei Formularen ist es wichtig, dass die Beschriftung der Eingabefelder eindeutig ist. Wenn eine Beschriftung über oder unter dem Eingabefeld ist, haben sehbehinderte Probleme bei der Zuordnung. Deswegen sollte die Beschriftung immer direkt vor dem Eingabefeld sein.

    Zurück zum Inhaltsüberblick

  10. E-Mail und Textdokumente
    Wenn Sie die Person nicht kennen bzw. deren PC-Ausstattung sollten Sie folgendes beachten:

    Schreiben Sie immer Text-E-Mails. Wenn Sie HTML-Formatierungen oder Bilder verwenden, riskieren Sie, dass der/die AdressatIn die Mail nicht lesen kann, weil die Person blind ist oder ein älteres Mailprogramm hat. Dateianhänge sollten 8 Zeichen einen Trennpunkt und eine Dateierweiterung (3 Zeichen) haben. Anhänge sollten RTF oder Textformat haben, weil diese Formate am bekanntesten sind und von jedem Windowsbetriebssystem gelesen werden kann. Generell sollte man sich vergewissern, dass der Empfänger mit den angehängten Dateien etwas anfangen kann.

    Zurück zum Inhaltsüberblick

  11. Sprache
    Sich so auszudrücken, dass nur wenige Menschen es verstehen, war noch nie ein Zeichen von höherer Bildung! Da es sehr viele Menschen gibt, die täglich im Internet sind, ist es sehr wichtig, sich allgemein verständlich auszudrücken. Fachausdrücke sollten vermieden werden oder sie sollten beim ersten Auftreten erklärt werden. Sätze sollten klar und kurz formuliert werden. Rechtschreibfehler sollten vermieden werden, da blinde Menschen, die mit einem Screenreader arbeiten hier Probleme haben können. Setzen sie deswegen eine Rechtschreibkorrektur ein oder lassen Sie Ihren Text von einer anderen Person Korrektur lesen.

    Zurück zum Inhaltsüberblick

  12. Audio
    Gehörlose nehmen Akustik nicht wahr! Wenn Sie also auf Ihrer Internetseite eine tolle Begrüßungsrede halten, die der Besucher nur hören kann, so geht dieses Begrüßungsrede an Gehörlosen vorbei! Bieten Sie deswegen eine Alternative an, in dem Sie die Begrüßungsrede auch als Text zum Nachlesen bereitstellen. Auch sollte bei Videos mit Ton daran gedacht werden, wie ein Gehörloser diese Information wahrnehmen kann.

    Zurück zum Inhaltsüberblick

  13. Testen Sie Ihre Webseite auf verschiedenen Browsern
    Sie können heute nicht mehr davon ausgehen, dass jeder mit den Internet-Explorer ins Internet geht! Blinde Menschen benutzen oft den Browser "Lynx" und der Browser "Opera" hat einige nützliche Funktionen für Behinderte und ist auch bei Nichtbehinderten sehr beliebt! Deswegen ist es sehr wichtig, dass Sie darauf achten, Ihre Webseite auf mehreren Browsern zu testen.

    Folgende Browser werden viel verwendet:

    Opera
    Mein Lieblingsbrowser! Opera hat viele tolle Einstellungsmöglichkeiten, auch für Behinderte!

    Mozilla

    Netscape

    Lynx
    Lynx ist ein Textbrowser, das bedeutet er stellt keine Bilder da. Es ist sehr interessant eine Webseite mal mit diesem Browser zu testen.


    Zurück zum Inhaltsüberblick


zurück zur Seite Behindertensoftware