WCAG 2.1 Anforderungen – was hinter den vier Buchstaben steckt
WCAG 2.1 – vier Buchstaben, die seit dem Barrierefreiheitsstärkungsgesetz für jedes Unternehmen mit digitalen Angeboten relevant sind. Die Web Content Accessibility Guidelines sind der internationale Standard für barrierefreie Websites. Wer WCAG 2.1 Level AA erfüllt, erfüllt die gesetzliche Pflicht nach dem BFSG.
Das Problem: Die offizielle WCAG-Dokumentation des W3C liest sich wie ein technisches Handbuch. 78 Erfolgskriterien, verteilt auf 4 Prinzipien und 13 Richtlinien. Für Unternehmer, die wissen wollen, was das für ihre Website bedeutet, ist das wenig hilfreich.
Dieser Beitrag übersetzt die WCAG 2.1 Anforderungen in verständliche Sprache. Sie erfahren, was die vier Grundprinzipien praktisch bedeuten, welche Kriterien für Level AA relevant sind, und was Sie konkret auf Ihrer Website prüfen und anpassen müssen.
WCAG-Konformität für Ihre Website? Lassen Sie uns den aktuellen Stand prüfen.
Die Struktur der WCAG 2.1 – Prinzipien, Richtlinien, Kriterien
Wie die WCAG aufgebaut sind
Die WCAG 2.1 folgen einer klaren Hierarchie. An der Spitze stehen vier Prinzipien – die grundlegenden Ziele, die jede barrierefreie Website erfüllen muss. Unter jedem Prinzip liegen Richtlinien, die das Prinzip konkretisieren. Und unter jeder Richtlinie stehen Erfolgskriterien – die einzelnen, testbaren Anforderungen.
Insgesamt umfasst WCAG 2.1 vier Prinzipien, 13 Richtlinien und 78 Erfolgskriterien. Die Erfolgskriterien sind in drei Levels eingeteilt: A (Grundanforderungen), AA (gesetzlicher Standard) und AAA (höchste Anforderungen).
Was die drei Levels bedeuten
Level A deckt die absoluten Grundlagen ab. Ohne Level A ist eine Website für viele Menschen mit Behinderung komplett unbenutzbar. Beispiel: Bilder brauchen Alt-Texte. Inhalte müssen per Tastatur erreichbar sein.
Level AA ist der gesetzliche Mindeststandard nach dem BFSG. Es baut auf Level A auf und fügt Anforderungen hinzu, die die Website für eine breitere Gruppe zugänglich machen. Beispiel: Farbkontraste von mindestens 4,5:1, Text auf 200 Prozent vergrößerbar.
Level AAA ist der höchste Standard und für die meisten Websites nicht vollständig umsetzbar. Beispiel: Kontraste von mindestens 7:1, Gebärdensprachvideos für alle Audio-Inhalte. Level AAA ist keine gesetzliche Pflicht, kann aber in bestimmten Bereichen sinnvoll sein.
Prinzip 1 – Wahrnehmbar: Alle Inhalte müssen für alle Sinne zugänglich sein
Was „wahrnehmbar” praktisch bedeutet
Nicht jeder Nutzer kann sehen. Nicht jeder kann hören. Und nicht jeder kann Farben unterscheiden. Wahrnehmbar bedeutet: Jede Information auf Ihrer Website muss über mindestens einen alternativen Sinneskanal zugänglich sein.
Die wichtigsten Kriterien unter Prinzip 1
Textalternativen (Kriterium 1.1.1 – Level A). Jedes Nicht-Text-Element – Bilder, Icons, Grafiken – braucht eine Textalternative. Für informative Bilder ist das ein beschreibender Alt-Text. Für dekorative Bilder ein leeres alt-Attribut. Für komplexe Grafiken eine ausführliche Beschreibung im umgebenden Text.
Untertitel für Videos (Kriterium 1.2.2 – Level A). Alle vorproduzierten Videos mit Sprache brauchen synchrone Untertitel. Das betrifft auch eingebettete YouTube-Videos auf Ihrer Website.
Kontraste (Kriterium 1.4.3 – Level AA). Normaler Text braucht mindestens 4,5:1 Kontrastverhältnis zum Hintergrund. Großer Text (ab 18 Pixel bold oder 24 Pixel regular) mindestens 3:1. Prüfbar mit dem WebAIM Contrast Checker. Hellgrauer Text auf weißem Hintergrund – ein häufiger Design-Trend – verstößt fast immer gegen dieses Kriterium.
Text-Vergrößerung (Kriterium 1.4.4 – Level AA). Text muss auf 200 Prozent vergrößerbar sein, ohne dass Inhalte verloren gehen oder horizontal gescrollt werden muss. Das erzwingt responsives Design mit relativen Einheiten statt fester Pixelwerte.
Nicht nur durch Farbe (Kriterium 1.4.1 – Level A). Information darf nicht ausschließlich durch Farbe vermittelt werden. Ein roter Pflichtfeld-Rahmen allein reicht nicht – es braucht zusätzlich einen Text wie „Pflichtfeld” oder ein Symbol.
Prinzip 2 – Bedienbar: Alle Funktionen müssen für alle Eingabemethoden funktionieren
Was „bedienbar” praktisch bedeutet
Nicht jeder Nutzer hat eine Maus. Manche navigieren per Tastatur, manche per Sprachsteuerung, manche per Augensteuerung. Bedienbar bedeutet: Jede Funktion Ihrer Website muss mit jeder Eingabemethode nutzbar sein.
Die wichtigsten Kriterien unter Prinzip 2
Tastaturzugänglichkeit (Kriterium 2.1.1 – Level A). Jedes interaktive Element – Links, Buttons, Formulare, Menüs – muss per Tastatur erreichbar und bedienbar sein. Tab navigiert vorwärts, Shift+Tab rückwärts, Enter aktiviert, Escape schließt.
Keine Tastaturfallen (Kriterium 2.1.2 – Level A). Kein Element darf den Tastaturfokus so einfangen, dass der Nutzer nicht mehr wegnavigieren kann. Besonders kritisch bei Modals: Sie müssen per Escape schließbar sein und den Fokus danach zum auslösenden Element zurückgeben.
Fokus sichtbar (Kriterium 2.4.7 – Level AA). Bei Tastaturnavigation muss immer erkennbar sein, welches Element gerade fokussiert ist. Der Standard-Fokusring des Browsers reicht – solange er nicht per CSS deaktiviert wurde. outline: none ohne sichtbare Alternative ist einer der häufigsten Barrierefreiheits-Fehler.
Seitentitel (Kriterium 2.4.2 – Level A). Jede Seite braucht einen aussagekräftigen <title>. Nicht „Startseite” oder „Home”, sondern „David Keiser – Webdesign & SEO Recklinghausen”. Screenreader lesen den Seitentitel als erstes vor.
Skip-Navigation (Kriterium 2.4.1 – Level A). Ein „Zum Inhalt springen”-Link am Seitenanfang ermöglicht es Tastaturnutzern, die Hauptnavigation zu überspringen. Ohne diesen Link müssen Tastaturnutzer auf jeder Seite durch die gesamte Navigation tabben.
Ausreichend Zeit (Kriterium 2.2.1 – Level A). Wenn Inhalte zeitgesteuert sind – automatische Slider, Session-Timeouts – muss der Nutzer die Möglichkeit haben, die Zeit zu verlängern, zu deaktivieren oder auf mindestens das Zehnfache der Standardzeit zu setzen.
Prinzip 3 – Verständlich: Inhalte und Bedienung müssen klar sein
Was „verständlich” praktisch bedeutet
Eine Website kann technisch perfekt zugänglich sein und trotzdem unverständlich. Verständlich bedeutet: Die Sprache ist klar, die Bedienung konsistent, und Fehler werden hilfreich erklärt.
Die wichtigsten Kriterien unter Prinzip 3
Seitensprache (Kriterium 3.1.1 – Level A). Das lang-Attribut im <html>-Tag muss die Hauptsprache der Seite angeben. Bei deutschen Websites: <html lang="de">. Fremdsprachige Abschnitte müssen separat ausgezeichnet sein: <span lang="en">Web Content Accessibility Guidelines</span>.
Konsistente Navigation (Kriterium 3.2.3 – Level AA). Die Hauptnavigation muss auf allen Seiten in derselben Reihenfolge und an derselben Position erscheinen. Nutzer – mit und ohne Behinderung – verlassen sich darauf, dass die Navigation vorhersagbar ist.
Konsistente Bezeichnungen (Kriterium 3.2.4 – Level AA). Elemente mit derselben Funktion müssen auf allen Seiten gleich bezeichnet sein. Wenn der Kontakt-Button auf einer Seite „Anfrage senden” heißt und auf einer anderen „Formular absenden”, ist das inkonsistent.
Fehleridentifikation (Kriterium 3.3.1 – Level A). Wenn ein Formularfehler erkannt wird, muss das fehlerhafte Element identifiziert und der Fehler in Textform beschrieben werden. Nicht nur ein roter Rahmen – sondern eine klare Nachricht: „Bitte geben Sie eine gültige E-Mail-Adresse ein.”
Formularlabels (Kriterium 3.3.2 – Level A). Wenn Nutzereingaben erforderlich sind, müssen Labels oder Anweisungen bereitgestellt werden. Placeholder-Text verschwindet beim Eintippen und ist kein Ersatz für ein Label. Pflichtfelder müssen programmatisch gekennzeichnet sein.
Prinzip 4 – Robust: Der Code muss für alle Technologien funktionieren
Was „robust” praktisch bedeutet
Nutzer verwenden unterschiedliche Browser, Betriebssysteme und assistive Technologien. Robust bedeutet: Der Code muss so standardkonform sein, dass alle diese Technologien ihn korrekt interpretieren können.
Die wichtigsten Kriterien unter Prinzip 4
Korrektes Parsing (Kriterium 4.1.1 – Level A). Valides HTML mit korrekten Öffnungs- und Schließungs-Tags, eindeutigen IDs und korrekter Verschachtelung. Doppelte IDs verwirren Screenreader und JavaScript gleichermaßen.
Name, Rolle, Wert (Kriterium 4.1.2 – Level A). Alle Benutzeroberflächen-Komponenten müssen einen programmatisch bestimmbaren Namen und eine Rolle haben. Standard-HTML-Elemente liefern das automatisch – ein <button> hat die Rolle „Button” und den Namen aus seinem Textinhalt. Probleme entstehen bei Custom-Elementen: Ein <div> mit Click-Handler hat weder Rolle noch Name. Hier müssen ARIA-Attribute ergänzt werden: role="button", aria-label="Menü öffnen".
Statusmeldungen (Kriterium 4.1.3 – Level AA). Statusmeldungen – zum Beispiel „Formular erfolgreich gesendet” oder „3 Ergebnisse gefunden” – müssen für Screenreader wahrnehmbar sein, ohne dass der Fokus verschoben wird. Das geschieht durch ARIA Live Regions: aria-live="polite" für nicht-dringende und aria-live="assertive" für dringende Meldungen.
WCAG 2.1 Level AA für Ihre Website – professionell umgesetzt. Jetzt beraten lassen.
WCAG 2.1 vs. WCAG 2.2 – was hat sich geändert?
Die neuen Kriterien in WCAG 2.2
WCAG 2.2 wurde im Oktober 2023 veröffentlicht und erweitert WCAG 2.1 um neun neue Erfolgskriterien. Die wichtigsten für Unternehmenswebsites:
Fokus-Erscheinung (2.4.11 – Level AA): Der Fokusindikator muss eine Mindestfläche und einen Mindestkontrast haben. Nicht mehr nur „sichtbar”, sondern „ausreichend sichtbar”.
Ziehbare Bewegungen (2.5.7 – Level A): Funktionen, die Zieh-Bewegungen (Drag & Drop) erfordern, müssen auch per Einfach-Klick bedienbar sein.
Mindestgröße für Ziele (2.5.8 – Level AA): Interaktive Elemente müssen mindestens 24 × 24 CSS-Pixel groß sein oder ausreichend Abstand zu anderen Zielen haben.
Was gilt für das BFSG?
Das BFSG verweist auf die EN 301 549, die aktuell auf WCAG 2.1 Level AA basiert. WCAG 2.2 ist nicht verpflichtend, aber empfehlenswert – insbesondere die Kriterien zur Fokus-Erscheinung und Zielgröße verbessern die Nutzererfahrung messbar. Wenn Sie jetzt eine neue Website bauen lassen, sollten Sie direkt WCAG 2.2 anpeilen.
WCAG-Audit für Ihre Website – klar, verständlich, handlungsorientiert
Wir prüfen Ihre Website gegen alle 50 Level-AA-Kriterien und liefern einen priorisierten Maßnahmenplan, den Ihr Entwickler direkt umsetzen kann.
Häufig gestellte Fragen zur WCAG 2.1
Was ist der Unterschied zwischen WCAG 2.1 Level A, AA und AAA?
Level A deckt die Grundanforderungen ab – ohne Level A ist eine Website für viele Menschen mit Behinderung unbenutzbar. Level AA ist der gesetzliche Standard nach dem BFSG und umfasst 50 Erfolgskriterien. Level AAA ist der höchste Standard mit den strengsten Anforderungen, aber für die meisten Websites nicht vollständig umsetzbar und keine gesetzliche Pflicht.
Wie viele WCAG-Kriterien muss meine Website erfüllen?
Für BFSG-Konformität müssen alle 50 Erfolgskriterien von WCAG 2.1 Level AA erfüllt sein. Das schließt die 30 Kriterien von Level A mit ein, da Level AA auf Level A aufbaut. Nicht erfüllbare Kriterien müssen in der Barrierefreiheitserklärung dokumentiert und begründet werden.
Ist WCAG 2.1 oder WCAG 2.2 der aktuelle Standard?
WCAG 2.2 ist die neueste Version und wurde im Oktober 2023 veröffentlicht. Das BFSG verweist jedoch über die EN 301 549 auf WCAG 2.1 Level AA. WCAG 2.2 ist empfehlenswert, aber nicht verpflichtend. Neue Websites sollten WCAG 2.2 anpeilen, da die zusätzlichen Kriterien die Nutzererfahrung verbessern.
Kann ich WCAG-Konformität selbst prüfen?
Teilweise. Automatisierte Tools wie Lighthouse, WAVE und axe DevTools prüfen etwa 30 bis 40 Prozent der Kriterien. Die restlichen 60 bis 70 Prozent erfordern manuelle Tests mit Tastatur und Screenreader. Für eine rechtlich belastbare Prüfung empfiehlt sich ein professioneller Audit.
Was passiert, wenn meine Website nicht alle WCAG-Kriterien erfüllt?
Dokumentieren Sie nicht erfüllte Kriterien in Ihrer Barrierefreiheitserklärung mit Begründung und geplantem Zeitrahmen für die Umsetzung. Teilweise Konformität mit transparenter Dokumentation ist besser als keine Erklärung. Die Marktüberwachungsbehörden bewerten die Bemühungen und den Fortschritt bei der Umsetzung.
