Barrierefreiheit im Web: WCAG 2.2 Compliance für alle

Webbarrierefreiheit (Accessibility) ist nicht nur ethisch richtig – sie ist rechtlich verpflichtend und verbessert die User Experience für alle. Erfahren Sie, wie Sie WCAG 2.2 AA-Konformität erreichen.

1. Warum Barrierefreiheit wichtig ist

Über 1 Milliarde Menschen weltweit leben mit Behinderungen. Aber auch ohne Behinderung profitieren alle von barrierefreiem Design:

Ältere Menschen: Bessere Lesbarkeit, größere Links
Mobile-Nutzer: Einfachere Navigation, kontrastreiches Design
Entwickler: Semantisches HTML ist wartbarer
SEO: Google belohnt barrierefreie Seiten
Rechtlich: EU-Richtlinien (EN 301 549) schreiben es vor

2. WCAG 2.2 – Die Vier Säulen

Wahrnehmbar (Perceivable)

Farbe & Kontrast: Mindestens 4.5:1 für Text auf Hintergrund
Bilder: Aussagekräftige alt-Attribute
Videos: Untertitel und Transkripte
Schriftgröße: Text resizierbar bis 200%

Bedienbar (Operable)

Keyboard-Navigation: Alle Funktionen per Tastatur erreichbar
Focus-Management: Sichtbarer Focus-Ring
Skip-Links: "Zum Inhalt springen"-Link
Timing: Keine Inhalte, die verschwinden oder blinken

Verständlich (Understandable)

Klare Sprache: Kurze Sätze, Fachwörter erklärt
Konsistente Navigation: Navigation an gleicher Stelle
Fehlerhinweise: Klare, hilfreiche Fehlermeldungen
Leicht zu lesen: Good Typography, Legibility

Robust (Robust)

Semantisches HTML: Korrektes, valides HTML5
ARIA-Labels: Für dynamische Inhalte
Browser-Kompatibilität: Funktioniert überall
Assistive Technologien: Screen Reader Support

3. Praktische Implementierung

Semantisches HTML

<!-- ❌ Falsch: Div für Alles -->
<div class="header">...</div>
<div class="nav">...</div>

<!-- ✅ Richtig: Semantische Tags -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<footer>...</footer>

Farb-Kontrast testen

✅ Gut: Schwarzer Text auf weißem Hintergrund (21:1)
✅ Ausreichend: #333333 auf weiß (12.6:1)
❌ Schlecht: Grau (#999999) auf Grau (#EEEEEE) (2.9:1)

ARIA-Labels verwenden

<!-- Navigation mit ARIA -->
<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/">Startseite</a></li>
  </ul>
</nav>

<!-- Button mit Beschreibung -->
<button aria-label="Menü öffnen" aria-expanded="false">
  ☰
</button>

<!-- Formular richtig labeln -->
<label for="email">E-Mail Adresse:</label>
<input id="email" type="email" required>

Keyboard-Navigation

/* CSS: Focus-Indikator sichtbar machen */
a:focus, button:focus, input:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Kein outline-none ohne Alternative! */
a:focus {
  outline: 3px solid #0066cc;  /* ✅ */
  /* outline: none;  ❌ Nie ohne Replacement! */
}

4. Checklist für WCAG 2.2 AA

Struktur (Structure)

Genau ein <h1> pro Seite
Heading-Hierarchie (h1 → h2 → h3)
<main> Tag vorhanden
<header>, <nav>, <footer> richtig gesetzt

Farben & Kontrast

Text-Kontrast mindestens 4.5:1
Grafik-Kontrast mindestens 3:1
Farbe allein nicht die einzige Info
Mit Lighthouse in DevTools geprüft

Keyboard & Navigation

Tab-Reihenfolge logisch
Focus-Indikator sichtbar
Skip-Link vorhanden
Mobile-Menü mit Escape zu schließen

Bilder & Medien

Alle Bilder haben aussagekräftige alt-Attribute
Videos haben Untertitel
Dekorative Bilder: alt=""
Keine Text-als-Bild

Formulare

Alle Inputs haben Labels
Fehlermeldungen sind klar
Erforderliche Felder gekennzeichnet
Placeholder sind nicht Labels

5. Werkzeuge für die Prüfung

Browser-Tools

Lighthouse: Chrome DevTools → Lighthouse
WAVE: wave.webaim.org/extension/
axe DevTools: deque.com/axe/devtools/
NVDA: Kostenlos Screen Reader (Windows)
VoiceOver: Eingebaut in macOS/iOS

Online-Tools

Contrast Checker: webaim.org
Color Blindness Simulator: coblis.herokuapp.com/
Headings Checker: airanklab.com

6. Häufige Fehler

Fehler
role="button" auf <div>

Problem
Tastatur-Support fehlt

Lösung
<button> verwenden

Fehler
Keine alt-Attribute

Problem
Screen Reader können Bilder nicht verstehen

Lösung
Aussagekräftige alt-Texte schreiben

Fehler
Farbe allein als Information

Problem
Farblinde sehen die Info nicht

Lösung
Icons oder Text zusätzlich nutzen

Fehler
Kein Skip-Link

Problem
Keyboard-Nutzer müssen Menü Tab-en

Lösung
Skip-Link am Anfang hinzufügen

Fehler
position: absolute; left: -9999px

Problem
Zu radikal versteckt

Lösung
CSS für sichtbare Versteckung nutzen