Typische Situationen
Diese Beispiele zeigen, wie Barrierefreiheitsprobleme konkret aussehen – und was wir dagegen tun. Alle Fälle sind anonymisiert.
Kontaktformular nicht mit Tastatur bedienbar
Ausgangslage
Ein Dienstleister bemerkte, dass Anfragen über das Kontaktformular stark zurückgegangen waren. Beschwerden gab es keine – das Problem blieb unsichtbar.
Das Problem
Das Formular verwendete ein JavaScript-Framework, das keine nativen Formularelemente nutzte. Mit der Tastatur war es unmöglich, die Felder zu erreichen. Screenreader-Nutzer hatten keine Chance.
Unsere Lösung
Wir haben das Formular auf native HTML-Elemente umgestellt, korrekte Labels ergänzt und die Fokus-Reihenfolge korrigiert. Fehlermeldungen werden jetzt per ARIA live angekündigt.
Der Effekt
Formularabschlüsse stiegen um 18% – nicht nur von Menschen mit Behinderung, sondern auch von Power-Usern, die gern mit Tastatur arbeiten.
Navigation springt – Fokus ist unsichtbar
Ausgangslage
Ein Online-Shop hatte regelmäßig Abbrüche im Bestellprozess. Die Zahlen waren rätselhaft – der Funnel sah eigentlich gut aus.
Das Problem
Die Navigation hatte keine sichtbaren Fokuszustände. Nutzer, die mit Tastatur navigierten, verloren ständig die Orientierung. Der Fokus sprang nach dem Öffnen eines Dropdowns an den Anfang der Seite.
Unsere Lösung
Wir haben sichtbare Fokus-Ringe implementiert, die Fokus-Reihenfolge korrigiert und dafür gesorgt, dass der Fokus beim Öffnen von Menüs an der richtigen Stelle bleibt.
Der Effekt
Die Abbruchrate im Checkout sank um 12%. Support-Anfragen zum Thema ‚Navigation funktioniert nicht‘ gingen auf null zurück.
PDFs nicht lesbar
Ausgangslage
Ein Unternehmen stellte wichtige Dokumente (AGB, Produktinfos, Anleitungen) als PDF zum Download bereit.
Das Problem
Die PDFs waren als gescannte Bilder erstellt – kein Text, keine Struktur. Screenreader lasen nur ‚Grafik, Grafik, Grafik‘. Auch die Suche innerhalb der Dokumente funktionierte nicht.
Unsere Lösung
Wir haben die wichtigsten Dokumente als barrierefreie PDFs neu erstellt: echte Textebene, korrekte Lesereihenfolge, Überschriftenstruktur, Alternativtexte für Grafiken.
Der Effekt
Die Dokumente sind jetzt durchsuchbar, lesbar und werden von Screenreadern korrekt vorgelesen.
Fehlermeldungen ohne Kontext
Ausgangslage
Ein Formular für Terminbuchungen hatte eine hohe Abbruchrate. Nutzer versuchten es mehrfach und gaben dann auf.
Das Problem
Fehlermeldungen erschienen nur als roter Text am Anfang des Formulars. Welches Feld betroffen war, war unklar. Für Screenreader-Nutzer wurden die Fehler gar nicht angekündigt.
Unsere Lösung
Wir haben Fehlermeldungen direkt an die betroffenen Felder gesetzt, per aria-describedby verknüpft und mit aria-live für Screenreader ankündigen lassen. Zusätzlich: Icon + Text statt nur Farbe.
Der Effekt
Die Erfolgsquote bei Formularen stieg um 24%. Support-Anfragen zum Thema Buchungsprobleme sanken deutlich.
Terminbuchung nicht bedienbar
Ausgangslage
Ein Dienstleister nutzte ein externes Buchungs-Widget für Termine. Kunden beschwerten sich, dass sie keine Termine buchen konnten.
Das Problem
Das Widget war ein visueller Kalender ohne Tastaturunterstützung. Datumsauswahl nur per Mausklick, keine ARIA-Labels, keine Ankündigungen bei Änderungen.
Unsere Lösung
Wir haben ein alternatives, barrierefreies Booking-Modul empfohlen und bei der Integration unterstützt. Wo nötig, haben wir Wrapper-Komponenten geschrieben.
Der Effekt
Alle Nutzer können jetzt Termine buchen – unabhängig von Eingabegerät. Die Buchungsrate stieg um 9%.