WCAG 2.1 AA Checkliste: Die wichtigsten Prüfkriterien für BFSG-konforme Websites 2026
Vollständige WCAG 2.1 AA Checkliste mit allen relevanten Prüfkriterien, praktischen Beispielen und direkter Verbindung zum BFSG. Erfahren Sie, welche Kriterien Pflicht sind, wie Sie sie prüfen und wie CheckBarriere Ihnen dabei hilft.
Einleitung
Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Websites. Die Konformitätsstufe AA ist in den meisten Rechtsvorschriften, einschließlich des BFSG, erforderlich.
Seit dem 28. Juni 2025 verlangt das BFSG (Barrierefreiheitsstärkungsgesetz) für Online-Shops und Apps die Einhaltung von WCAG 2.1 Level AA (über die harmonisierte Norm EN 301 549). Das bedeutet: Alle B2C-Online-Shops müssen seit diesem Datum die Anforderungen der WCAG 2.1 AA erfüllen.
WCAG 2.2 ist bereits verfügbar und bringt einige Verbesserungen, ist aber Stand März 2026 noch nicht verpflichtend. Es ist jedoch bereits als Best Practice empfehlenswert, da es rückwärtskompatibel zu 2.1 ist und die Anforderungen an die Barrierefreiheit weiter verschärft.
In diesem Artikel finden Sie:
- Die vollständige WCAG 2.1 AA Checkliste
- Die 4 POUR-Prinzipien im Detail
- Die häufigsten Fehler und wie Sie sie beheben
- Praktische Code-Beispiele für jeden Bereich
- Wie CheckBarriere viele Probleme in 60 Sekunden automatisch erkennt
Die 4 Grundprinzipien der WCAG (POUR)
Die WCAG basieren auf vier grundlegenden Prinzipien, die als POUR bekannt sind:
1. Wahrnehmbar (Perceivable)
Informationen müssen für alle Nutzer wahrnehmbar sein – unabhängig davon, welchen Sinn sie nutzen.
Beispiele:
- Bilder brauchen Alt-Texte für Screenreader-Nutzer
- Videos brauchen Untertitel für gehörlose Nutzer
- Farbkontraste müssen mindestens 4,5:1 betragen
- Text muss bis 200 % vergrößerbar sein ohne Layoutbrüche
Warum wichtig: Etwa 8 % der Männer und 0,5 % der Frauen haben eine Farbenblindheit. Screenreader-Nutzer sind auf Textalternativen angewiesen.
2. Bedienbar (Operable)
Alle Funktionen müssen bedienbar sein – auch ohne Maus oder mit motorischen Einschränkungen.
Beispiele:
- Vollständige Tastaturnavigation ohne Maus möglich
- Skip-Links ermöglichen das Überspringen von Navigation
- Ausreichende Klickzielgrößen (mindestens 44×44 Pixel)
- Keine Zeitlimits oder ausreichend Zeit für Eingaben
Warum wichtig: Etwa 10 % der Nutzer können keine Maus bedienen. Tastaturnavigation ist für viele eine Notwendigkeit.
3. Verständlich (Understandable)
Inhalte und Navigation müssen verständlich sein.
Beispiele:
- Konsistente Navigation auf allen Seiten
- Klare Fehlermeldungen mit konkreten Hinweisen
- Einfache, verständliche Sprache
- Keine unerwarteten Aktionen ohne Warnung
Warum wichtig: Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten brauchen klare, vorhersehbare Strukturen.
4. Robust (Robust)
Der Content muss mit verschiedenen Hilfstechnologien kompatibel sein.
Beispiele:
- Semantisches HTML für korrekte Struktur
- Korrekte ARIA-Nutzung nur wenn nötig
- Valider HTML-Code
- Kompatibilität mit Screenreadern (NVDA, VoiceOver, JAWS)
Warum wichtig: Unterschiedliche Browser und Hilfstechnologien müssen die Inhalte korrekt interpretieren können.
WCAG 2.1 AA vs. WCAG 2.2 – Was gilt wirklich beim BFSG?
Die folgende Tabelle zeigt den aktuellen Stand:
| Kategorie | WCAG 2.1 AA | WCAG 2.2 AA | Status |
|---|---|---|---|
| Pflicht | Alle Level A + AA | – | JA – nach BFSG |
| Empfohlen | – | Alle Level A + AA | Best Practice |
| Neu in 2.2 | – | Target Size 24×24 px | Optional |
| Neu in 2.2 | – | Focus Appearance | Optional |
| Neu in 2.2 | – | Dragging Movements | Optional |
Was bedeutet das für Sie?
Die harmonisierte Norm EN 301 549 referenziert weiterhin WCAG 2.1 AA als verbindlichen Standard. Das BFSG fordert "mindestens WCAG 2.1 Level AA".
WCAG 2.2 ist rückwärtskompatibel – alle Kriterien aus 2.1 sind auch in 2.2 enthalten. Wenn Sie 2.1 erfüllen, sind Sie bereits auf dem richtigen Weg.
Empfehlung: Beginnen Sie mit WCAG 2.1 AA und integrieren Sie wo möglich bereits die 2.2-Kriterien – besonders die Target Size von 24×24 Pixel (in 2.1 sind es 44×44 px als AAA).
Die komplette WCAG 2.1 AA Checkliste
Prinzip 1: Wahrnehmbar
1.1 Textalternativen
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 1.1.1 Non-text Content | A | Automatisch + Manuell | Keine Alt-Texte bei Bildern |
| 1.2.1 Audio-only und Video-only | A | Manuell | Fehlende Untertitel |
| 1.2.2 Captions | A | Manuell | Unvollständige Untertitel |
| 1.2.5 Audio Description | AA | Manuell | Keine Audiodeskription |
Praxis-Beispiel (1.1.1):
<!-- Falsch -->
<img src="produkt.jpg" />
<!-- Richtig -->
<img src="produkt.jpg" alt="Silberner Laptop mit 15-Zoll Display" />
Prüfung: Prüfen Sie jedes Bild auf der Seite. Dekorative Bilder können alt="" haben.
1.3 Anpassbar
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 1.3.1 Info and Relationships | A | Automatisch + Manuell | Falsche Überschriftenhierarchie |
| 1.3.2 Meaningful Sequence | A | Manuell | Tabellarische Daten ohneth-Struktur |
| 1.3.3 Sensory Characteristics | A | Manuell | Anweisungen nur nach Farbe |
| 1.3.4 Orientation | AA | Manuell | Festgelegte Querformat-Ansicht |
| 1.3.5 Identify Input Purpose | AA | Automatisch | Fehlendes autocomplete-Attribut |
Praxis-Beispiel (1.3.1):
<!-- Falsch -->
<div class="title">Willkommen</div>
<div class="heading">Produkte</div>
<!-- Richtig -->
<h1>Willkommen</h1>
<h2>Produkte</h2>
1.4 Unterscheidbar
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 1.4.1 Use of Color | A | Manuell | Farbe als einziges Erkennungsmerkmal |
| 1.4.3 Contrast (Minimum) | AA | Automatisch | Zu geringer Kontrast (unter 4,5:1) |
| 1.4.4 Resize text | AA | Manuell | Text nicht skalierbar |
| 1.4.10 Reflow | AA | Manuell | Horizontales Scrollen bei 320px |
| 1.4.11 Non-text Contrast | AA | Automatisch | Grafiken unter 3:1 Kontrast |
| 1.4.12 Text Spacing | AA | Automatisch | Inline-Styles blockieren Anpassung |
Praxis-Beispiel (1.4.3):
Ein Text mit einer Schriftgröße von 16px benötigt einen Kontrast von mindestens 4,5:1 zum Hintergrund. Großer Text (18px+ oder 14px+ fett) benötigt mindestens 3:1.
Prüfen Sie mit dem Color Contrast Analyzer oder nutzen Sie CheckBarriere.
Prinzip 2: Bedienbar
2.1 Tastaturbedienbar
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 2.1.1 Keyboard | A | Manuell | Funktionen nur per Klick |
| 2.1.2 No Keyboard Trap | A | Manuell | Fokus in Modal nicht entfernbar |
| 2.4.3 Focus Order | A | Manuell | Logische Tab-Reihenfolge |
| 2.4.7 Focus Visible | AA | Manuell | Keine Fokus-Indikatoren |
Praxis-Beispiel (2.4.7):
/* Fokus sichtbar machen */
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
2.4 Navigation
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 2.4.1 Bypass Blocks | A | Manuell | Keine Skip-Links |
| 2.4.2 Page Titled | A | Automatisch | Fehlender oder generischer Seitentitel |
| 2.4.3 Focus Order | A | Manuell | Fokus springt unlogisch |
| 2.4.4 Link Purpose (In Context) | A | Manuell | "Hier klicken"-Links |
| 2.4.5 Multiple Ways | AA | Manuell | Keine alternative Navigation |
| 2.4.6 Headings and Labels | AA | Manuell | Fehlende Überschriften |
| 2.4.7 Focus Visible | AA | Manuell | Unsichtbarer Fokus |
Praxis-Beispiel (2.4.1):
<body>
<a href="#main-content" class="skip-link">Zum Hauptinhalt</a>
<nav>...</nav>
<main id="main-content">
<!-- Hauptinhalt -->
</main>
</body>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
position: fixed;
left: 0;
top: 0;
padding: 1rem;
background: white;
z-index: 9999;
}
2.5 Input Modalities
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 2.5.1 Pointer Gestures | A | Manuell | Nur Wischgesten |
| 2.5.2 Pointer Cancellation | A | Manuell | Kein Abbruch bei Down-Event |
| 2.5.3 Label in Name | A | Manuell | Sichtbarer Name ≠ ARIA-Label |
| 2.5.4 Motion Actuation | A | Manuell | Aktionen nur durch Bewegung |
Wichtig (Target Size): WCAG 2.1 fordert 44×44 Pixel (Level AAA für 2.1), WCAG 2.2 fordert 24×24 Pixel (Level AA). Nutzen Sie mindestens 44×44 px.
Prinzip 3: Verständlich
3.1 Lesbar
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 3.1.1 Language of Page | A | Automatisch | Fehlendes lang-Attribut |
| 3.1.2 Language of Parts | AA | Manuell | Sprachwechsel ohne Attribut |
Praxis-Beispiel (3.1.1):
<html lang="de">
<head>
<title>Online-Shop - Ihr Fachhändler</title>
</head>
3.2 Vorhersehbar
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 3.2.1 On Focus | A | Manuell | Popup beim Fokus |
| 3.2.2 On Input | A | Manuell | Automatische Weiterleitung |
| 3.2.3 Consistent Navigation | AA | Manuell | Nav an unterschiedlichen Stellen |
| 3.2.4 Consistent Identification | AA | Manuell | Unterschiedliche Button-Beschriftung |
3.3 Hilfestellung bei Eingabe
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 3.3.1 Error Identification | A | Manuell | Generische Fehlermeldung |
| 3.3.2 Labels or Instructions | A | Manuell | Keine Labels vorhanden |
| 3.3.3 Error Suggestion | AA | Manuell | Keine konkreten Lösungsvorschläge |
| 3.3.4 Error Prevention | AA | Manuell | Keine Bestätigung bei wichtigem Formular |
Praxis-Beispiel (3.3.1):
<!-- Falsch -->
<input type="email" aria-invalid="true" />
<span class="error">Fehler</span>
<!-- Richtig -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
<span id="email-error" class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein (z.B. name@beispiel.de)</span>
Prinzip 4: Robust
4.1 Kompatibel
| Kriterium | Level | Prüfmethode | Häufiger Fehler |
|---|---|---|---|
| 4.1.1 Parsing | A | Automatisch | Ungültiges HTML |
| 4.1.2 Name, Role, Value | A | Automatisch | Falsche ARIA-Nutzung |
Praxis-Beispiel (4.1.2):
<!-- Falsch -->
<div role="button" onclick="submit()">Absenden</div>
<!-- Richtig -->
<button type="submit">Absenden</button>
Oder wenn ein div nötig ist:
<div role="button" tabindex="0" aria-label="Formular absenden">Absenden</div>
Die Top 10 häufigsten Probleme in Online-Shops
1. Fehlende Alt-Texte bei Produktbildern
Problem: Online-Shops haben oft hunderte Produktbilder ohne aussagekräftige Alt-Texte.
Lösung:
<img src="/images/laptop-silver-15zoll.jpg"
alt="Silver HP Pavilion 15 - 15,6 Zoll Display, 16GB RAM, 512GB SSD" />
2. Unzureichende Farbkontraste
Problem: Grauer Text auf weißem Hintergrund (oft #888 auf #FFF = 2,9:1) ist nicht barrierefrei.
Lösung: Nutzen Sie mindestens #666 auf #FFF (7,5:1) für normalen Text.
3. Keine Skip-Links
Problem: Nutzer müssen bei jeder Seite die gesamte Navigation durchtabben.
Lösung: Fügen Sie "Zum Hauptinhalt"-Link am Seitenanfang ein.
4. Fehlende Formular-Labels
Problem: Platzhalter als einzige "Beschriftung" – verschwinden bei Fokus/Eingabe.
Lösung:
<label for="suchfeld">Suchbegriff eingeben</label>
<input type="search" id="suchfeld" placeholder="Produkt suchen..." />
5. Keine Tastaturbedienbarkeit
Problem: Dropdowns, Modals oder Slider nur per Maus bedienbar.
Lösung: Nutzen Sie <button>, <a>, <input> – keine <div> mit onclick.
6. Keine Fokus-Indikatoren
Problem: Entfernung des Browser-Standard-Fokus für "schöneres" Design.
Lösung:
*:focus-visible {
outline: 3px solid #2563eb !important;
outline-offset: 2px;
}
7. Fehlende Überschriftenhierarchie
Problem: <h1> → <h4> oder überhaupt keine Überschriften.
Lösung: Struktur: <h1> (nur einer) → <h2> → <h3> – keine Ebenen überspringen.
8. Keine Barrierefreiheitserklärung
Problem: Pflicht gemäß § 14 BFSG wird ignoriert.
Lösung: Erstellen Sie eine Erklärung und verlinken Sie sie im Footer.
9. Zu kleine Klickziele
Problem: "Jetzt kaufen"-Buttons mit 20×20 Pixel.
Lösung: Mindestens 44×44 Pixel, besser 48×48 oder größer.
10. Keine Unterstützung für Textvergrößerung
Problem: Fixe Pixelangaben verhindern Skalierung.
Lösung: Nutzen Sie relative Einheiten (rem, em, %) statt px für Schriftgrößen.
So prüfen Sie Ihre Website richtig – Schritt-für-Schritt
Schritt 1: Automatisierter Scan
Nutzen Sie Tools für eine erste Bestandsaufnahme:
- CheckBarriere – All-in-One-Lösung für deutsche Nutzer
- axe DevTools – Browser-Extension für Entwickler
- WAVE – Web Accessibility Evaluation Tool
- Lighthouse – In Chrome DevTools integriert
Schritt 2: Manuelle Prüfung
Testen Sie following:
- Tastaturnavigation: Tab durch die gesamte Seite
- Screenreader: NVDA (Windows), VoiceOver (Mac)
- Zoom: 200 % ohne horizontales Scrollen
- Farbkontrast: Color Contrast Analyzer
Schritt 3: Nutzertests
Beziehen Sie echte Nutzer mit Behinderungen ein – nur so finden Sie versteckte Probleme.
Empfohlene Test-Reihenfolge:
- Automatischer Scan (60 % der Probleme)
- Tastaturtest (20 %)
- Screenreader-Test (15 %)
- Nutzertest (5 %)
CheckBarriere hilft Ihnen sofort
Mit CheckBarriere können Sie viele dieser Probleme automatisch erkennen und beheben. Unser Scanner prüft in nur 60 Sekunden:
- Farbkontraste (WCAG 1.4.3)
- Alt-Texte bei Bildern (WCAG 1.1.1)
- Überschriftenstruktur (WCAG 1.3.1)
- Formular-Labels (WCAG 3.3.2)
- Tastaturnavigation und Fokus-Indikatoren
- Semantisches HTML und ARIA-Nutzung
- Barrierefreiheitserklärung
Sie erhalten einen detaillierten Bericht mit:
- Liste aller gefundenen Probleme
- WCAG-Kriterium und Schweregrad
- Konkrete Lösungsvorschläge
- Priorisierte Handlungsempfehlungen
FAQ: Häufig gestellte Fragen
Reicht WCAG 2.1 AA für das BFSG?
Ja. Das BFSG verlangt über die EN 301 549 die Einhaltung von WCAG 2.1 Level AA. Das ist der aktuelle Rechtsstandard.
Ist WCAG 2.2 schon Pflicht?
Nein. WCAG 2.2 ist noch nicht verpflichtend. Es ist jedoch als Best Practice empfehlenswert, da es die Anforderungen verschärft und rückwärtskompatibel zu 2.1 ist.
Was bedeutet Target Size 24×24 px wirklich?
WCAG 2.2 fordert eine minimale Zielgröße von 24×24 Pixel für alle interaktiven Elemente (Level AA). WCAG 2.1 fordert 44×44 Pixel als Level AAA. Empfehlung: Nutzen Sie mindestens 44×44 Pixel für bessere Nutzerfreundlichkeit.
Brauche ich für jede Seite eine Barrierefreiheitserklärung?
Nein. Eine zentrale Erklärung für den gesamten Online-Shop reicht aus. Diese muss jedoch alle Dienstleistungen abdecken und auf der Website verfügbar sein (§ 14 BFSG).
Reichen Overlay-Tools für Barrierefreiheit?
Nein. Accessibility-Overlays oder -Plugins erfüllen die gesetzlichen Anforderungen nicht. Sie können keine echte Barrierefreiheit herstellen und behindern oft Screenreader-Nutzer. Die Anforderungen müssen im echten Code umgesetzt werden.
Wie oft muss ich die Barrierefreiheit testen?
Mindestens einmal jährlich – besser nach jeder größeren Änderung. Die Barrierefreiheitserklärung muss bei wesentlichen Änderungen aktualisiert werden.
Gilt das auch für Shopify, WooCommerce, Magento?
Ja. Die Plattform spielt keine Rolle. Als Betreiber sind Sie für die Barrierefreiheit verantwortlich – unabhängig davon, ob Sie Shopify, WooCommerce, Magento oder eine andere Lösung nutzen.
Was ist das POUR-Prinzip?
POUR steht für: Perceivable (Wahrnehmbar), Operable (Bedienbar), Understandable (Verständlich), Robust (Robust). Das sind die vier Grundprinzipien der WCAG.
Kann ich mit Barrierefreiheit mein SEO verbessern?
Ja. Barrierefreie Websites haben oft bessere Struktur, schnellere Ladezeiten und mehr nutzerfreundliche Inhalte – all das sind positive SEO-Signale für Google.
Was kostet die Umsetzung?
Die Kosten variieren stark. Kleinere Shops mit wenigen Seiten können oft mit wenigen Tagen Aufwand viel erreichen. Größere E-Commerce-Plattformen brauchen mehr Ressourcen. Nutzen Sie den kostenlosen CheckBarriere-Scan für eine erste Einschätzung.
Fazit: WCAG 2.1 AA ist der Schlüssel zur BFSG-Konformität
Die WCAG 2.1 AA Checkliste ist Ihr Werkzeug für eine barrierefreie Website – und damit für BFSG-Konformität, bessere User Experience und mehr Umsatz.
Die wichtigsten Punkte zusammengefasst:
- WCAG 2.1 AA ist seit dem 28. Juni 2025 Pflicht
- Die 4 POUR-Prinzipien bilden das Fundament
- Automatische + manuelle Prüfung ist unverzichtbar
- 44×44 Pixel Klickzielgröße und 4,5:1 Kontrast sind Grundanforderungen
- Barrierefreiheitserklärung muss vorhanden sein
Handeln Sie jetzt: Nutzen Sie die Checkliste und starten Sie mit dem kostenlosen CheckBarriere-Scanner. In 60 Sekunden wissen Sie, wo Sie stehen.
Alle Fakten geprüft Stand 01.03.2026
Interne Link-Vorschläge: