Häufige Fehler bei der Barrierefreiheit und wie ihr sie vermeidet
Fehlende Alt-Texte für Bilder
- Problem: Screenreader können Bilder nicht interpretieren, wenn kein Alternativtext hinterlegt ist.
- Lösung: Alle relevanten Bilder sollten mit aussagekräftigen Alt-Texten versehen werden. Dekorative Bilder können mit
alt=""ausgeklammert werden.
Schlechte Farbkontraste
- Problem: Texte, die sich kaum vom Hintergrund abheben, sind für viele Nutzer schwer lesbar.
- Lösung: Das Kontrastverhältnis sollte mindestens 4,5:1 für normalen Text und 3:1 für große Schrift betragen. Tools wie der WebAIM Contrast Checker helfen bei der Überprüfung.
Fehlende Fokus-Steuerung und Tastatur-Navigation
- Problem: Nutzer, die keine Maus verwenden können, sind auf die Tastaturnavigation angewiesen. Ohne sichtbare Fokus-Rahmen ist eine Orientierung schwierig.
- Lösung: Interaktive Elemente wie Links und Formulare sollten einen gut sichtbaren Fokus-Rahmen erhalten, damit Nutzer sehen, wo sie sich befinden.
Nicht barrierefreie Formulare
- Problem: Eingabefelder ohne klare Labels und Platzhalter verwirren Screenreader-Nutzer.
- Lösung: Alle Formularelemente sollten mit beschreibenden Labels und ARIA-Attributen versehen werden. Fehlermeldungen sollten klar und verständlich formuliert sein.
Nicht zugängliche Navigation und Pop-ups
- Problem: Dropdown-Menüs, Slider und Pop-ups sind oft nicht per Tastatur bedienbar.
- Lösung: Sicherstellen, dass alle interaktiven Elemente mit der Tab-Taste navigierbar sind und dass Pop-ups durch ESC geschlossen werden können.