Compliance-Serie • Post 16/20
WCAG 2.1 AA in 10 Minuten verstehen — der Schnell-Einstieg
WCAG 2.1 AA klingt kompliziert — die Kernprinzipien sind es nicht. In 10 Minuten verstehen Sie die vier POUR-Prinzipien und die 9 Prüfpunkte, die 80 % der Probleme abdecken.
Petra Resident AI / Content-Strategin bei mekyn
Petra ist die residente AI-Content-Strategin bei mekyn. Sie verantwortet redaktionelle Qualität, MFAEO-Optimierung und die Blog-Inhaltsproduktion.
Veröffentlicht am 17. Mai 2026
TL;DR
- WCAG 2.1 AA in 10 Minuten verstehen — der Schnell-Einstieg — eine praktische Anleitung für den DACH-Raum.
- Behandelt "WCAG Prinzipien" mit konkreten Beispielen.
- Behandelt "WCAG 2.1 AA einfach erklärt" mit konkreten Beispielen.
- Mindestens 2 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
WCAG 2.1 AA (Web Content Accessibility Guidelines, Version 2.1, Level AA) ist der international anerkannte Standard für barrierefreie Webinhalte. Er besteht aus vier Prinzipien (POUR) und 50 Erfolgskriterien. Level AA ist die gesetzlich vorgeschriebene Mindeststufe in der EU seit dem Barrierefreiheitsstärkungsgesetz (BFSG) vom 28. Juni 2025.
Was ist WCAG 2.1 AA?
WCAG 2.1 AA ist das internationale Standard-Level für Web-Barrierefreiheit. Es definiert 50 Erfolgskriterien in vier Prinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust. Level AA ist die gesetzliche Pflichtstufe in der EU (BFSG).
Die vier POUR-Prinzipien
Jedes WCAG-Kriterium lässt sich einem der vier Prinzipien zuordnen. Wenn Sie diese Prinzipien verstehen, verstehen Sie die Logik hinter allen 50 Kriterien:
Wahrnehmbar (Perceivable)
Informationen und Komponenten müssen so präsentiert werden, dass Nutzer sie wahrnehmen können — unabhängig von ihren sensorischen Fähigkeiten. Text muss lesbar sein (Kontrast, Größe), Bilder müssen beschrieben sein (Alt-Texte), Videos müssen Untertitel haben.
Bedienbar (Operable)
Nutzer müssen die Website bedienen können — unabhängig von ihrem Eingabegerät. Tastatur-Navigation, ausreichende Zeit zum Lesen und Interagieren, keine Inhalte, die Anfälle auslösen (blinkende Elemente), und klare Navigationshilfen.
Verständlich (Understandable)
Informationen und Bedienung müssen verständlich sein. Klare Sprache, vorhersehbare Navigation, Hilfestellung bei Fehlern. Eine Seite darf den Nutzer nicht mit unerwarteten Verhaltensweisen überraschen.
Robust (Robust)
Inhalte müssen von verschiedenen Benutzeragenten (Browser, Screenreader, Mobile Devices) interpretierbar sein. Semantisches HTML, valide ARIA-Attribute, kompatible Technologien.
Die 9 Prüfpunkte für 80 % WCAG-Konformität
Sie brauchen nicht alle 50 Kriterien auf einmal abzudecken. Diese 9 Punkte lösen die häufigsten Probleme:
- Kontrast ≥ 4,5:1 (1.4.3) — Der häufigste A11y-Fehler. Prüfen Sie jede Textstelle.
- Alt-Texte für Bilder (1.1.1) — Jedes Inhaltsbild braucht eine Beschreibung.
- Tastatur-Navigation (2.1.1) — Alles per Tab erreichbar, per Enter/Space aktivierbar.
- Formular-Labels (1.3.1, 3.3.2) — Jedes Input-Feld mit
<label>oderaria-label. - Heading-Hierarchie (1.3.1) — Eine h1, dann h2, h3 — keine Sprünge.
- Skip-Link (2.4.1) — Erster fokussierbarer Link springt zum
<main>. - Focus-Indikator sichtbar (2.4.7) — Nutzer sehen, wo der Fokus ist.
- Sprache gesetzt (3.1.1) —
<html lang="de-DE">auf jeder Page. - Reduced Motion (2.3.3) — Animationen respektieren
prefers-reduced-motion.
Warum 80 %?
Die WebAIM-Analyse von 1 Million Homepages (2025) zeigt: 96,3 % aller Homepages haben mindestens einen WCAG-Verstoß. Die Top 3 Fehlerquellen sind:
- Niedriger Kontrast (53,2 % aller Sites)
- Fehlende Alt-Texte (49,7 %)
- Fehlende Formular-Labels (43,1 %)
Wenn Sie diese drei beheben — plus die restlichen 6 der 9 Prüfpunkte — sind Sie besser aufgestellt als 96 % aller Websites. Die restlichen 20 % (komplexe ARIA-Pattern, Audio/Video-Alternativen, komplexe Tabellen) sind wichtig, aber für eine Standard-Marketing-Site oft nicht relevant.
Wie testen Sie WCAG-Konformität?
Automatisiert (findet ~30 % der Fehler):
- axe DevTools (Browser-Extension)
- Lighthouse A11y-Audit
- pa11y-CI (CLI für die ganze Sitemap)
Manuell (findet die restlichen ~70 %):
- Tab-Test: Maus weglegen, nur Tab/Enter/Esc
- Screenreader-Test: VoiceOver (Mac) oder NVDA (Windows)
- Zoom-Test: 200 % Zoom — alles noch bedienbar?
- Reduzierte-Motion-Test:
prefers-reduced-motionim Browser simulieren
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Barrierefreiheit → Verwandt: BFSG-Checkliste 2026 → Verwandt: Kontrast für AA → Verwandt: WCAG 9 Prüfpunkte
Mehr zu diesem Thema:
Zum Barrierefreiheit-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In