Dieses Tutorial für barrierefreies Webdesign orientiert sich an der Checkliste von access-for-all.ch
1. Prinzip: Wahrnehmbar
Alle Inhalte müssen für jeden Benutzer wahrnehmbar sein. Dies betrifft vor allem grafische Elemente.
Alternativen für Nicht-Text Inhalte
- Überall wo Inhalte in Nicht-Text Form auftreten, sollte es Alternativen in Textform geben. Im Regelfall wird dies durch Alt-Tags durchgeführt, die in den HTML Quellcode hinterlegt werden.
- Alle bedienbaren und/oder interaktiven Elemente grafischer Natur, benötigen eine Alternative in Textform. Denken Sie dabei auch an Karten mit Markierungen!
Alternativen für zeitbasierte Medien
- Viele Videos und Audio Dateien sind zulange, um deren Inhalt in Alt-Tags zu beschreiben. Dazu sollten unter den Videos textliche Zusammenfassungen geschrieben werden.
Inhalte sind mit verschiedenen Layouts stimmig
- Achten Sie auf korrekte HTML Strukturen. Dies betrifft insbesondere H1,H2,H3 Überschriften, Aufzählungen (ul,ol), Tabellen, Textformatierungen. Diese müssen sich immer an der inhaltlichen Struktur orientieren und nicht am Design.
- Als Test, einfach CSS und JavaScript abschalten (Hinweis: die meisten Browser unterstützen einen Entwicklermodus, der dies erlaubt). Ist die Website immer noch bedienbar? Ist die Struktur erhalten geblieben? Dann können auch Screenreader gut mit der Website arbeiten.
Unterscheidbar: Unterschiede zwischen Inhaltselementen
- Informationen sollten nicht nur durch Farbe alleine vermittelt werden.
- Automatisch abgespielte Audioelemente (wenn sie unbedingt notwendig sind) sollten leicht deaktivierbar sein.
- Kontraste aller Arten sind ausgeprägt
- Textgröße in CSS ist in % oder em angegeben und lässt sich im Browser problemlos vergrößern.
2. Prinzip: Bedienbar
Alle Inhalte sind einfach bedienbar. Dies betrifft z.B. die Bedienung ohne Maus.
Bedienkonzepte
- Alle Funktionen sind mit Tastatur bedienbar
- Keine Funktionselemente sind auf Handlung des Benutzers in gewissen Zeitrahmen ausgelegt (Keine Zeifallen).
- Keine Blitze die zu Anfällen führen könnten.
- Sich wiederholende Inhalte (Sidebar) sind gekennzeichnet und können übersprungen werden.
- Die Reihenfolge von Links sind logisch (Menüs).
- Links sind mit aussagekräftigen Ankertexten ausgestattet.
- Elemente im Fokus (mit Tastatur angesteuert) sind deutlich sichtbar.
3. Prinzip: Verständlich
Eine Website sollte den Benutzer vor keine Rätsel stellen und klar und einfach erklären, worum es geht.
Inhalte sind leicht verständlich
- Jede URL hat die richtige Sprachdeklaration.
- Anderssprachige Inhalte sind gekennzeichnet (lang-Attribut).
- Ungewöhnliche Wörter, Abkürzungen und Fachbegriffe werden ausreichend erklärt oder wenn möglich vermieden.
Die Seite funktioniert vorhersehbar
- Der Inhalt verändert sich nicht wenn der Fokus verändert wird (bspw. mit Tabulator zwischen Menüpunkten wechseln).
- Die Navigation ändert sich nicht unvorhersehbar.
Hilfe bei der Eingabe
- Automatisch erkannte Eingabefehler werden an den Benutzer gemeldet und führen nicht zu weiteren Problemen.
- Eingabefelder sind klar erkennbar und mit Hinweisen ausgestattet.
- Eingaben mit rechtlichen oder finanziellen Folgen werden doppelt bestätigt.
- Vor dem Absenden von Formulardaten können diese nochmals überprüft und geändert werden.
4. Prinzip: Robust
Hier geht es um die einwandfreie Programmierung
- Der HTML oder XHTML Code ist fehlerfrei.
Sind diese Punkte erfüllt, ist die Webseite gut optimiert. Wer sich noch näher damit beschäftigen möchte, sollte die offizielle Checkliste Punkt für Punkt abarbeiten und auch die dort angegebenen, weiterführenden Informationen durchlesen.