Im Zuge einer Weiterbildung hatten wir von der points digitalagentur die Gelegenheit, mit einem Betroffenen zu sprechen, der nur noch 2% Sehkraft hat, und von ihm ein paar Tipps und Anregungen zu bekommen. Hier eine Zusammenfassung.
Barrierfreiheit kann verbessert werden:
- Im Header einen Button zur Verfügung stellen, über den man die Schrift vergrößern und auch verkleinern kann
- Kontrastmodus anbieten (weißer HG, schwarze Schrift), großer Button dazu im Header
- Grundsätzlich: Alle Links, Navigations- und Bedienelement, haben einen weißen Hintergrund und sind außerhalb von Hintergrundbildern, Das Corporate Design hat in der Navigation und Content nichts zu suchen, 10 % der Bevölkerung sind Farbfehlsichtig: Rot wird Grau. Hinweis: Graue Schrift ist Grausam!
Menü
- Horizontale Navigation ist technisch besser
- Vertikale Navigation ist für Sehbehinderte besser
- Menüauswahl muss bei Mausberührung lesbar bleiben
- Hover-Effekt: Unterstreichung
- 2. und 3. Menüebene muss sich an der Auswahl vertikal ausklappen
- Wenn die Maus das Menü verlässt, darf sich das Menü nicht sofort automatisch schließen
Text im Content
- Farbe Schwarz, oder leicht angegraut
- Hervorhebung durch Fetten, nicht kursiv oder unterstrichen
- Schriftfont ohne Serifen
- Text immer linksbündig
- Zwei- oder Dreispaltig wird die Laufweite hilfreich verkürzt
Formulare
- Kleiner Abstand zwischen Beschriftung und Feld
- Schwarze Formularrahmen und angegraute Vorbelegung
- Alle Checkboxen und Buttons sind linksbündig gesetzt
- Checkboxen haben einen schwarzen Rahmen und
- der Text zur Zustimmung ist linksbündig in normaler Schriftgröße
- Fehlermeldungen werden direkt am betreffenden Formularfeld angezeigt.
Links
- Piktogramm zur Art der Verlinkung
- Formulare, Dokumente und externe Websites in neuem Tab öffnen
- Linktext linksbündig mit Unterstreichung
- Unbenutzte Links in der Textfarbe der Website.
- Das traditionelle blau wird invertiert nicht gelb
- Hover-Effekt: Rote Schrift
- Benutzter Link: Violett
- Google hält sich noch an diesen alten hilfreichen Standard
Tipps zum Design:
Um digitale Produkte so barrierefrei wie möglich zu gestalten, können Gestalter die im Folgenden beschriebenen Punkte beachten. Dabei ist die wichtigste Regel: Die Unterscheidung von Information, Elementen und Funktionen darf nicht nur durch Farbe gemacht werden.
Es ist besser Unterscheidungen zu ergänzen durch:
- zusätzlichen Text
- zusätzliche Formen
- Vermeidung bestimmter Farbkombinationen
- Monochrome Farbwahl: Lieber gleiche Farbe in verschiedenen Kontrasten als verschiedene Farben mit ähnlichen Kontrasten
- hohe Kontraste
- dicke Linien statt dünne
- Texturen bei Infografiken und Diagrammen
Seven columns: how does this look on a narrow window?
