Barrierefreiheit im Detail — ein Web, das alle nutzen können
Semantik, Tastatur, Kontrast und Screenreader von Anfang an
Einleitung
Bei Barrierefreiheit geht es darum, dass möglichst viele deine Seite nutzen können — auch die, die mit der Tastatur navigieren, mit einem Screenreader zuhören, schlecht sehen oder Mühe mit feinen Mausklicks haben. Das ist keine Zusatzfunktion, die man zum Schluss dranschraubt; es ist eine Art zu bauen, und von Anfang an gemacht kostet sie fast nichts extra.
Vier tragende Prinzipien
Die internationalen Richtlinien für barrierefreies Web fassen die Ziele in vier Worten zusammen. Inhalte müssen wahrnehmbar sein (man muss sie sinnlich erfassen können, z. B. über Alternativtext und Untertitel), bedienbar (man muss sie bedienen können, z. B. mit der Tastatur), verständlich (Sprache und Verhalten müssen Sinn ergeben) und robust (sie müssen über Browser und Hilfsmittel hinweg funktionieren).
Semantik ist das Fundament
Die meiste Barrierefreiheit gibt es gratis, wenn das HTML semantisch ist. Ein Button, der ein echtes Button-Element ist, lässt sich per Tastatur bedienen und wird von einem Screenreader ohne Weiteres korrekt angesagt. Überschriften in logischer Reihenfolge geben Screenreader-Nutzern einen Überblick über den Inhalt. Nutze die Elemente ihrer Bedeutung nach, bevor du zu zusätzlichen Hilfs-Attributen greifst — Semantik zuerst, Flickwerk danach.
Tastatur und Fokus
Viele Nutzer verwenden überhaupt keine Maus. Deshalb muss alles mit der Tastatur erreichbar und bedienbar sein, in einer logischen Reihenfolge, und das Element, das den Fokus hat, muss deutlich markiert sein. Entferne niemals die Fokusmarkierung, ohne eine bessere an ihre Stelle zu setzen — sonst lässt man Tastaturnutzer im Dunkeln darüber, wo sie sich auf der Seite befinden.
- 01Schreib semantisches HTML — echte Buttons, Links und Überschriften
- 02Sorge dafür, dass alles allein mit der Tastatur bedienbar ist
- 03Mach den Fokus deutlich sichtbar
- 04Verknüpfe mit jedem Formularfeld ein eindeutiges Label
- 05Gib Bildern einen sinnvollen Alternativtext — oder markiere sie als dekorativ
- 06Sorge für ausreichenden Kontrast zwischen Text und Hintergrund
Farbe, Kontrast und Bewegung
Verwende Farbe nicht als einzigen Weg, etwas zu vermitteln — ein Fehler, der nur rot markiert ist, ist für farbenblinde Nutzer unsichtbar, während eine Textmeldung daneben allen hilft. Sorge für guten Kontrast zwischen Text und Hintergrund. Und respektiere Nutzer, die um weniger Bewegung gebeten haben: kräftige Animationen können sowohl stören als auch manchen direkt unwohl machen.
So testen, wie die Nutzer es tun
Versuche, die Maus wegzulegen und die gesamte Seite mit der Tastatur zu bedienen. Schalte einen Screenreader ein und höre zu, wie die Seite vorgelesen wird. Nutze ein Werkzeug, um Kontrast und Struktur zu prüfen. Automatische Prüfungen fangen vieles ab, aber nicht alles — die beste Probe ist, die Seite unter denselben Bedingungen zu benutzen wie diejenigen, für die du sie baust.
“Barrierefreiheit, die von Anfang an mitgedacht wird, ist so gut wie gratis. Zum Schluss draufgesetzt ist sie teuer — und meist halbherzig.”
— Erfahrungsregel aus der Frontend-Arbeit