Anleitungen zum Barrierefreien Webdesign - © 2004

| Start | WEBlog | Terminkalender | Projektseite | Admin |

SCHRANKENLOS.CH - KONZEPT

Einführung zum Thema

Motto
Schrankenloses Webdesign: Einfach für alle

Worum geht es?
Viele Webseiten sind heute zu kompliziert und sie sind für viele Leute nur schwer verständlich. Dies gilt in besonders grossem Masse für die Behinderten aller Art. Auch sie sollen die Möglichkeiten des Internets nutzen können. Es geht um die gleichberechtigte Teilhabe aller Menschen an der Informationsgesellschaft.

Kriterien
Die Kriterien für schrankenloses Webdesign orientieren sich an den folgenden vier Prinzipien:
  • Wahrnehmbarkeit
  • Bedienbarkeit
  • Verständlichkeit und Orientierung
  • Robustheit

Wahrnehmbarkeit
Alle auf der Website enthaltenen Informationen und Funktionen sollen so zur Verfügung gestellt werden, dass sie von jedem Benutzer erkannt und somit bedient werden können.

Bedienbarkeit
Alle Elemente, die benötigt werden, um sich die Inhalte der Website zu erschliessen, sollen von jedem Benutzer bedienbar sein.

Verständlichkeit und Orientierung
Die Gestaltung der Inhalte und die Handhabung von Bedienelementen sollen leicht verständlich sein. Eine klare und leicht verständliche Sprache kommt allen Besucherinnen und Besuchern einer Website zugute. Texte sollen so kurz und einfach wie möglich sein.

Robustheit
Die verwendeten Webtechnologien sollen es erlauben, dass jeder Benutzer mit aktuellen und möglichst auch zukünftigen Zugangstechnologieren auf die Inhalte der Webseiten zugreifen kann. Menschen mit Behinderungen nutzen zum Teil Zugangstechnologien wie Vergrösserungssoftware, Screenreader-Software oder Spracheingaben.

Zahlenangaben
In der Schweiz leben etwa 500'000 Menschen mit Behinderungen. Zusätzlich haben auch viele Normalos Mühe mit der Zugänglichkeit zum Internet. Es ist wohl kaum übertrieben, wenn wir in unserem Land mit etwa zwei Millionen Adressaten von schrankenlosem Webdesign rechnen.

Grundaussage
Ein barrierefreies oder schrankenloses Webdesign ist nicht nur oft gesetzliche Pflicht, sondern es ist auch:
  • menschlich
  • kundenfreundlich
  • kostengünstig (die Mehrkosten sind geringer als der Mehrnutzen)
  • ästhetisch
  • wertsteigernd
  • innovativ
  • präventiv
  • kreativ

Wahrnehmung: Einzelne Punkte
  • Beschriftung von Grafiken: Bilder und Grafiken sind über das ALT-Attribut klar verständlich beschriftet
  • Imagemaps: Bei Imagemaps werden die Regionen mittels ALT-Attribut und redundanten Textlinks gekennzeichnet
  • Beschreibung von Grafiken: Wichtige Grafiken werden zusätzlich mit LONGDESC textlich beschrieben
  • Multimedia: Multimedia-Inhalte werden nicht nur sichtbar, sondern auch hörbar beschrieben
  • Farbe: Mit Farbe übermittelte Informationen müssen auch ohne Farbe verfügbar sein
  • Farbkontraste: Der Kontrast zwischen Vorder- und Hintergrundfarbe erlaubt leichtes Lesen, auch bei Invertierung der Farben
  • Links: Links müssen vom Fliesstext klar unterscheidbar sein
  • Texte für Links: Texte für Links müssen auch dann noch Sinn machen, wenn sie ausserhalb des Zusammenhangs gelesen werden
  • Schrift: Die Fontwahl eignet sich für das Vergrössern, es gibt keine Texte in Bildern
  • Schriftgrösse: Schriftgrösse im Code nicht absolut, sondern relativ festlegen
  • Textplazierung: Texte linksbündig anordnen
  • Schriftformatierung: Die Schriftformatierung erfolgt mit CSS
  • Gestaltung: Die Gestaltung und das Layout erfolgt mit CSS
  • Aufbau: Aufbau des Dokumentes in logischer Reihenfolge, damit die Abfolge auch bei abgeschaltetem CSS korrekt angezeigt wird
  • Scripts: Seiten sollen auch bei ausgeschalteten Scripts verwendbar sein
  • Navigation: Eine Navigationslösung mit CSS soll auch bei ausgeschaltetem Javascipt funktionieren
  • Noscript: Ist eine Seite bei ausgeschaltetem Script nicht mehr verwendbar, so müssen Informationen auf einer alternativ zugänglichen Seite bereitgestellt werden

Bedienbarkeit: Einzelne Punkte
  • Formulare: Die Beschriftung eines Formularelementes ist mit dem Element explizit verknüpft
  • Schaltflächen: Schaltflächen sind so gross, dass sie für Menschen mit eingeschränkter Motorik mit der Maus bedienbar sind
  • Tabulatoren: Alle Bedienungselemente sind mit der TAB-Taste erreichbar
  • Navigation: Die Navigation am Seitenkopf ist durch einen Link überspringbar
  • Reload: Die Seite wird nie automatisch frisch geladen bzw. weitergeleitet
  • Flackern: Es gibt keine Animationen oder bewegte Bilder, welche ein Bildschirmflackern verursachen
  • Lesen: Das Lesen wird durch keine blinkenden oder bewegten Inhalte oder Laufschriften erschwert
  • Toneinblendungen: Toneinblendungen sind abschaltber und stören somit das Arbeiten mit einem Screenreader nicht
  • Links: Nebeneinander liegende Text- und Bildschirmlinks, welche auf dasselbe Ziel verweisen, werden zusammengefasst
  • Titel: Jede Seite trägt einen aussagekräftigen Titel

Verständlichkeit und Orientierung: Einzelne Punkte
  • Datentabellen: Zeilen- und Spaltenbeschriftungen verwenden, Kopfzeilen in nachfolgenden Zeilen referenzieren, Tabelle mit SUMMARY beschreiben
  • Layouttabellen: Layouttabllen nur verwenden, wenn auch bei einer Linearisierung ein Sinn entsteht
  • Frames: Frames mit kurzen und aussagekräftigen Namen und Titeln versehen
  • Text: Texte mit HTML-Strukturelementen in kurze, überschaubare Abschnitte unterteilen
  • Sprache: Sprache des Dokumenttextes identifizeren und fremdsprachige Elemente kennzeichnen
  • Abkürzungen: Abkürzungen mit HTML-Attributen kennzeichnen
  • Formulierungen: Klare und einfache Sprache verwenden
  • Navigation: Die Navigationsmechanismen werden in stets gleichartiger Form verwendet
  • Präsentation: Der Präsentationsstil ist über alle Seiten hinweg gleichartig

Robustheit: Einzelne Punkte
  • Dateien: HTML-fremde Inhalte (PDF-Dateien, usw.) sind beim Link mit Typ und Grösse gekennzeichnet
  • Pop-Up-Fenster: Pop-Up-Fenster nur nach Vorankündigung öffnen
  • Doctype: Auf jeder Seite gibt es ein DOCTYPE-Statement mit einer Validierung gegen einen Standard
  • W3C: Es müssen aktuelle W3C-Techniken genutzt werden
  • Textversion: Es ist in der Regel auf gesonderte Textversion einer Webseite zu verzichten. Wird das in Ausnahmefällen doch gemacht, so muss die Textversion möglichst vollständig der grafischen Version entsprechen

| nach oben | zurück |