Analyse der Ausgangslage
Erste Prüfung der Website
- Automatische Tests mit Tools wie Google Lighthouse, WAVE und axe DevTools zur Identifikation erster Barrieren.
- Manuelle Tests mit Screenreadern und Tastaturnavigation zur Ermittlung von Problemstellen.
- Kundenfeedback von Nutzern mit Einschränkungen zur realistischen Einschätzung der Barrieren.
Erkannte Probleme
- Unzureichende Kontrastverhältnisse machten Texte schwer lesbar.
- Formulare waren nicht ausreichend für Screenreader optimiert.
- Die Navigation war nicht vollständig über die Tastatur bedienbar.
Optimierungsmaßnahmen
Technische Anpassungen
- Verbesserung der HTML-Struktur für eine semantisch korrekte Nutzung.
- Implementierung von ARIA-Attributen für Screenreader-Kompatibilität.
- Sicherstellung der Tastatur-Navigation für alle interaktiven Elemente.
Design-Optimierung
- Anpassung der Farbkontraste nach den WCAG 2.1 AA-Richtlinien.
- Klare und deutliche Fokus-Rahmen für besser sichtbare Navigation.
- Alternativtexte für Bilder hinzugefügt, um eine barrierefreie Nutzererfahrung zu gewährleisten.
Interaktive Elemente und Formulare
- Labels für Formularelemente ergänzt, damit Screenreader sie korrekt auslesen können.
- Fehlermeldungen und Erfolgsmeldungen verbessert, um verständliche Rückmeldungen zu bieten.
- Pop-ups und Modals so optimiert, dass sie per ESC-Taste schließbar sind und per Tastatur bedienbar bleiben.
Ergebnisse und Learnings
Deutliche Verbesserung der Usability
- Die Website wurde nun vollständig über die Tastatur bedienbar.
- Nutzer mit Screenreadern konnten Inhalte fehlerfrei erfassen und navigieren.
- Die Barrierefreiheitsprüfung nach WCAG 2.1 ergab eine signifikante Verbesserung.
Positive Auswirkungen auf SEO und Performance
- Bessere Struktur und semantischer HTML-Code führten zu einer verbesserten Indexierung durch Google.
- Schnellere Ladezeiten durch Reduzierung unnötiger Code-Elemente.
- Nutzerfreundlichkeit stieg messbar durch geringere Absprungraten und höhere Verweildauer.