Was ist WCAG 2.1 AA?

Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale Standard für barrierefreie Webinhalte. Level AA ist dabei die am häufigsten geforderte Konformitätsstufe – und das aus gutem Grund.

Warum WCAG wichtig ist

Barrierefreiheit im Web bedeutet, dass alle Menschen Ihre Website nutzen können – unabhängig von körperlichen oder technischen Einschränkungen. Das betrifft:

15% der Weltbevölkerung haben eine Form von Behinderung
Ältere Menschen mit altersbedingten Einschränkungen
Menschen mit temporären Einschränkungen (z.B. gebrochener Arm)
Nutzer mit langsamen Internetverbindungen oder älteren Geräten

Rechtliche Anforderungen

In vielen Ländern ist WCAG 2.1 AA gesetzlich vorgeschrieben:

EU: European Accessibility Act (ab 2025 für viele Websites Pflicht)
Deutschland: Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) für öffentliche Stellen
USA: Americans with Disabilities Act (ADA) fordert vergleichbare Standards

Nicht-Konformität kann zu Abmahnungen und Klagen führen.

Die drei Konformitätsstufen

WCAG definiert drei Level:

Level A (Minimal)

Die grundlegendsten Anforderungen. Ohne diese ist die Website für viele Menschen nicht nutzbar.

Level AA (Standard) ⭐

Der goldene Standard und in vielen Fällen gesetzlich gefordert. Bietet ein gutes Gleichgewicht zwischen Barrierefreiheit und Umsetzbarkeit.

Level AAA (Optimal)

Die höchste Stufe. Oft nur für spezielle Bereiche sinnvoll, da nicht immer umsetzbar.

Die vier Prinzipien von WCAG

WCAG basiert auf vier Grundprinzipien (POUR):

1. Perceivable (Wahrnehmbar)

Informationen müssen für alle Sinne darstellbar sein.

Beispiele:

Alternativtexte für Bilder
Untertitel für Videos
Ausreichende Farbkontraste (mindestens 4.5:1 für Text)
Keine Information nur durch Farbe vermitteln

<!-- ✅ Gut -->
<img src="diagramm.webp" alt="Verkaufszahlen Q4 2024: 25% Steigerung" />

<!-- ❌ Schlecht -->
<img src="diagramm.webp" alt="Diagramm" />

2. Operable (Bedienbar)

Die Website muss mit verschiedenen Eingabemethoden nutzbar sein.

Beispiele:

Vollständige Tastaturnavigation
Keine Zeitlimits oder anpassbare Zeitlimits
Keine blinkenden Inhalte (Anfallsgefahr)
Klare Fokus-Indikatoren

/* ✅ Fokus-Styles nicht entfernen */
button:focus {
  outline: 2px solid #1db954;
  outline-offset: 2px;
}

/* ❌ Niemals so */
*:focus {
  outline: none;
}

3. Understandable (Verständlich)

Inhalt und Bedienung müssen klar und nachvollziehbar sein.

Beispiele:

Konsistente Navigation
Klare Fehlermeldungen bei Formularen
Sprachwechsel im Code markieren
Vorhersehbares Verhalten

<!-- ✅ Klare Fehlermeldung -->
<label for="email">E-Mail-Adresse *</label>
<input id="email" type="email" required aria-describedby="email-error" />
<span id="email-error" role="alert">
  Bitte gib eine gültige E-Mail-Adresse ein (z.B. name@beispiel.de)
</span>

<!-- ❌ Unklar -->
<input type="email" placeholder="Email" />
<span style="color: red;">Fehler</span>

4. Robust (Robust)

Inhalte müssen mit aktuellen und zukünftigen Technologien funktionieren.

Beispiele:

Valider HTML-Code
ARIA-Attribute korrekt verwenden
Kompatibilität mit Screenreadern
Progressive Enhancement

Die wichtigsten AA-Anforderungen

Farbkontrast

Text: Mindestens 4.5:1 (normal) oder 3:1 (groß)
UI-Elemente: Mindestens 3:1

/* ✅ Ausreichender Kontrast */
color: #0f172a; /* Dunkelgrau auf Weiß = 16:1 */
background: #ffffff;

/* ❌ Zu wenig Kontrast */
color: #cccccc; /* Hellgrau auf Weiß = 2.8:1 */
background: #ffffff;

Größe von Touch-Targets

Mindestens 44×44 Pixel für klickbare Elemente
Ausreichend Abstand zwischen Elementen

Textgröße und Zoom

Text muss auf 200% zoombar sein ohne Funktionsverlust
Responsive Design für verschiedene Bildschirmgrößen

Formulare

Jedes Eingabefeld braucht ein <label>
Fehler müssen klar beschrieben werden
Pflichtfelder deutlich markieren

Tastaturnavigation

Alle Funktionen per Tastatur erreichbar
Logische Tab-Reihenfolge
Sichtbare Fokus-Indikatoren
Keine Tastaturfallen

Häufige Fehler (und wie man sie vermeidet)

❌ Fehler 1: Fehlende Alt-Texte

<!-- Schlecht -->
<img src="produkt.webp" />

<!-- Gut -->
<img src="produkt.webp" alt="Ergonomischer Bürostuhl mit Lordosenstütze" />

<!-- Dekoratives Bild -->
<img src="decoration.svg" alt="" role="presentation" />

❌ Fehler 2: Schlechter Farbkontrast

Nutze Tools wie WebAIM Contrast Checker zum Testen.

❌ Fehler 3: Nur Farbe als Information

<!-- Schlecht -->
<span style="color: red;">Pflichtfeld</span>

<!-- Gut -->
<span style="color: red;">* Pflichtfeld</span>

❌ Fehler 4: Unklare Links

<!-- Schlecht -->
<a href="/mehr">Mehr erfahren</a>

<!-- Gut -->
<a href="/wcag-guide">Mehr über WCAG 2.1 erfahren</a>

❌ Fehler 5: Fehlende Formular-Labels

<!-- Schlecht -->
<input type="text" placeholder="Name" />

<!-- Gut -->
<label for="name">Name</label>
<input id="name" type="text" placeholder="z.B. Max Mustermann" />

Tools zum Testen

Browser-Extensions

axe DevTools (Chrome/Firefox) – Umfangreich und präzise
WAVE (Chrome/Firefox) – Visuelles Feedback
Lighthouse (in Chrome DevTools) – Automatische Audits

Manuelle Tests

Tastaturnavigation: Navigiere die gesamte Seite nur mit Tab, Enter und Esc
Screenreader: Teste mit NVDA (Windows), JAWS oder VoiceOver (Mac/iOS)
Zoom: Zoome auf 200% und prüfe Lesbarkeit

Online-Tools

Business Case für WCAG

Größere Zielgruppe

15% der Bevölkerung haben eine Behinderung – das sind potenzielle Kunden, die Ihre Konkurrenz verliert.

Bessere SEO

Viele WCAG-Anforderungen (semantisches HTML, Alt-Texte, klare Struktur) helfen auch Suchmaschinen.

Höhere Conversion

Barrierefreie Websites sind oft einfacher für alle zu nutzen:

Klarere Navigation
Bessere Formulare
Schnellere Ladezeiten

Rechtssicherheit

Vermeide teure Abmahnungen und Klagen.

WCAG in der Praxis: Unsere Herangehensweise

Bei InnfinIT integrieren wir WCAG 2.1 AA von Anfang an:

1. Design-Phase

Farbpalette mit ausreichendem Kontrast
Touch-Target-Größen berücksichtigen
Klare visuelle Hierarchie

2. Entwicklung

Semantisches HTML
ARIA-Attribute wo nötig
Tastaturnavigation testen
Progressive Enhancement

3. Testing

Automatische Tests mit axe
Manuelle Tastatur-Tests
Screenreader-Tests
Echte Nutzer mit Behinderungen (wenn möglich)

4. Dokumentation

WCAG-Konformitätserklärung
Bekannte Einschränkungen dokumentieren
Kontaktmöglichkeit für Feedback

Fazit

WCAG 2.1 AA ist kein "Nice-to-have", sondern:

✅ Rechtlich oft erforderlich
✅ Ethisch richtig
✅ Business-sinnvoll
✅ Technisch machbar

Der beste Zeitpunkt, um mit Barrierefreiheit zu starten, ist jetzt – am besten gleich beim nächsten Projekt.

Sie brauchen Hilfe bei der Umsetzung?

Wir bei InnfinIT achten bei jedem Design- und Entwicklungsprojekt auf WCAG 2.1 AA-Konformität. Von Farbauswahl über semantischen Code bis zum finalen Testing.

Kostenloses Beratungsgespräch vereinbaren →

Weitere Ressourcen:

Was ist WCAG 2.1 AA?

Was ist WCAG 2.1 AA?

Sie haben ein konkretes Vorhaben?