Im Audit wurden Barrieren identifiziert, die vor allem die Nutzung mit Screenreader, Tastatur und teilweise auch für Nutzer:innen mit kognitiven oder motorischen Einschränkungen erschweren. Die wichtigsten Probleme betreffen eine fehlende oder unklare semantische Auszeichnung, uneindeutige Beschriftungen, nicht optimal zugängliche Navigationselemente sowie zusätzliche dekorative Inhalte, die von assistiven Technologien fälschlich mit vorgelesen werden.
Besonders kritisch sind dabei Probleme in den Bereichen Formulare, Navigationsstrukturen, Fokusreihenfolge, Link- und Button-Beschriftungen sowie bei der sprachlichen Konsistenz. Mehrere Elemente vermitteln visuell zwar die richtige Information, stellen diese aber nicht in einer Form bereit, die für Screenreader oder Tastaturnutzer:innen eindeutig und effizient nutzbar ist. Dadurch entstehen Missverständnisse, doppelte Ausgaben oder unnötig lange Navigationswege.
Wichtigste WCAG-Verstöße
- WCAG 1.3.1 Info and Relationships: Informationen und Zusammenhänge sind visuell vorhanden, aber nicht immer programmatisch eindeutig vermittelt.
- WCAG 4.1.2 Name, Role, Value: Interaktive Elemente haben teils unklare, doppelte oder sprachlich ungeeignete zugängliche Namen.
- WCAG 2.4.3 Focus Order: Die Tastaturnavigation ist nicht überall logisch und effizient aufgebaut.
- WCAG 2.4.4 Link Purpose / 2.4.6 Headings and Labels: Link- und Buttontexte sowie Überschriften sind teilweise nicht eindeutig genug.
- WCAG 3.1.1 / 3.1.2 Language of Page / Language of Parts: Einzelne Inhalte oder Bezeichnungen weichen sprachlich von der Seitensprache ab.
- WCAG 3.3.2 Labels or Instructions: Hinweise und Beschriftungen in Formularen oder Kontextinformationen sind nicht immer klar verständlich.
- WCAG 2.5.8 Target Size: Teilweise sind interaktive Flächen zu klein.
Wesentliche Best Practices
- Dekorative Inhalte für assistive Technologien ausblenden, damit nur relevante Informationen vorgelesen werden.
- Sichtbare und technische Beschriftungen konsistent halten, insbesondere bei Buttons, Links und Formularfeldern.
- Semantisch korrektes HTML verwenden, statt Inhalte nur visuell mit CSS oder
<br> zu strukturieren.
- Klare Fokusführung und Skiplinks bereitstellen, um wiederkehrende oder umfangreiche Bereiche effizient überspringen zu können.
- Navigation und interaktive Elemente eindeutig benennen, damit ihr Zweck sofort verständlich ist.
- Sprachkonsistenz sicherstellen, insbesondere bei Fehlermeldungen, ARIA-Labels und Formularhinweisen.
- Ausreichend große Klick- und Touchflächen vorsehen, um die Bedienung zu erleichtern.
Fazit
Die meisten identifizierten Probleme lassen sich mit überschaubarem Aufwand beheben, wenn visuelle Gestaltung, semantische Struktur und technische Accessibility enger zusammen gedacht werden. Besonders viel Wirkung haben dabei klare Beschriftungen, saubere HTML-Strukturen, reduzierte Screenreader-Störgeräusche und eine konsequent auf Tastatur- und Screenreader-Nutzung ausgerichtete Interaktionslogik.