Barrierefreiheit im Web: WCAG 2.2 erklärt — und warum Sie jetzt handeln müssen
Ab 2025 gilt der European Accessibility Act. Was bedeutet das für Ihre Website? Wir erklären WCAG-Anforderungen und wie Sie Compliance erreichen.
Web-Barrierefreiheit: Nicht nur Pflicht, sondern Business-Sinn
Mit dem European Accessibility Act (EAA), der ab Juni 2025 für digitale Produkte gilt, ist Web-Barrierefreiheit für viele Unternehmen gesetzliche Pflicht geworden. Aber selbst ohne Gesetz: eine barrierefreie Website erreicht mehr Menschen und konvertiert besser.
Was ist Barrierefreiheit im Web?
Barrierefreiheit (Accessibility, kurz a11y) bedeutet, dass Websites und Apps von Menschen mit Behinderungen vollständig genutzt werden können:
- Visuell: Blinde Menschen mit Screenreadern, Menschen mit Sehschwäche, Farbenblinde
- Motorisch: Menschen, die nur Tastatur nutzen, keine Maus
- Auditiv: Gehörlose bei Audio-/Video-Inhalten
- Kognitiv: Menschen mit Lernschwächen oder Konzentrationsschwierigkeiten
WCAG 2.2: Die vier Grundprinzipien
Die Web Content Accessibility Guidelines (WCAG) basieren auf dem POUR-Prinzip:
Wahrnehmbar (Perceivable)
- Alternativtexte für alle Bilder (`alt`-Attribut)
- Captions für Videos
- Ausreichendes Kontrastverhältnis (mindestens 4.5:1 für normalen Text)
- Text muss bis 200% zoombar sein ohne Horizontalscrollen
Bedienbar (Operable)
- Alle Funktionen per Tastatur erreichbar (Tab-Navigation)
- Keine zeitlichen Limits ohne Verlängerungsoption
- Skip-Links für Screenreader (direkt zum Hauptinhalt springen)
- Keine Animationen, die Anfälle auslösen können
Verständlich (Understandable)
- Sprache der Seite im HTML-Tag definiert (`lang="de"`)
- Fehlermeldungen in Formularen klar und hilfreich
- Labels für alle Formularfelder
- Konsistente Navigation
Robust (Robust)
- Valides, semantisches HTML
- ARIA-Attribute korrekt verwendet
- Kompatibel mit aktuellen Hilfstechnologien
WCAG-Konformitätsstufen
| Level | Anforderung | Relevanz |
|---|---|---|
| A | Mindestanforderungen | Gesetzlich oft Mindeststandard |
| AA | Erweitert | EAA-Anforderungsniveau |
| AAA | Exzellent | Best Practice |
Der EAA orientiert sich an WCAG 2.1 Level AA als Mindeststandard.
Häufige Barrieren in der Praxis
Problem 1: Bilder ohne alt-Text
<!-- Falsch -->
<img src="team.jpg">
<!-- Richtig -->
<img src="team.jpg" alt="Das Codemental-Team bei der Arbeit">
<!-- Dekorativ (kein Informationswert) -->
<img src="divider.png" alt="">Problem 2: Unzureichender Kontrast
Heller grauer Text auf weißem Hintergrund ist für sehschwache Menschen unleserlich. Tools: WebAIM Contrast Checker, Figma Plugins.
Problem 3: Fehlende Keyboard-Navigation
Dropdown-Menüs, Modals und Tabs müssen per Tastatur vollständig bedienbar sein. Testen: Nur Tab, Enter und Pfeiltasten verwenden.
Problem 4: Formular-Labels fehlen
<!-- Falsch -->
<input type="email" placeholder="E-Mail">
<!-- Richtig -->
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" placeholder="max@example.de">Tools für den Accessibility-Check
- WAVE (browser.com): Browser Extension für visuelle Accessibility-Analyse
- axe DevTools: Automatische Tests in Chrome DevTools
- Lighthouse: Accessibility-Score in Chrome DevTools
- NVDA / VoiceOver: Screenreader zum manuellen Testen
Wer ist betroffen vom EAA?
Unternehmen mit mehr als 10 Mitarbeitern oder mehr als 2 Mio. € Jahresumsatz in der EU, die digitale Produkte und Services anbieten. Dazu zählen E-Commerce, Banking, Verkehr und öffentlich zugängliche Software.
Bei neuen Projekten integrieren wir Accessibility-Anforderungen von Anfang an — das ist deutlich günstiger als nachträgliche Korrekturen. Sprechen Sie uns auf ein Accessibility-Audit Ihrer bestehenden Website an.
