WCAG 2.1 einfach erklärt: Die wichtigsten Anforderungen für Ihre Website

Was sind die WCAG 2.1 Anforderungen? Alle 4 Prinzipien (POUR), die Unterschiede zwischen Level A, AA und AAA, konkrete Beispiele und wie Sie Ihre Website prüfen — verständlich erklärt.

EAA Checker Team12 Min. Lesezeit

Die WCAG 2.1 — Web Content Accessibility Guidelines, Version 2.1 — sind der internationale Standard für barrierefreie Webinhalte und die technische Grundlage des European Accessibility Act. Doch was bedeuten diese Richtlinien konkret? Welche Anforderungen stellen sie? Und wie prüfen Sie, ob Ihre Website sie erfüllt? Dieser Artikel erklärt die WCAG 2.1 verständlich — ohne Fachjargon, mit konkreten Beispielen.

Was sind die WCAG?

WCAG (ausgesprochen "wuh-kag") sind Richtlinien des World Wide Web Consortiums (W3C) — der internationalen Organisation, die Web-Standards definiert. Die ersten WCAG erschienen 1999 (Version 1.0), WCAG 2.0 folgte 2008, WCAG 2.1 im Jahr 2018.

Der aktuelle Standard WCAG 2.1 enthält 78 Erfolgskriterien, die in vier Grundprinzipien organisiert sind. Jedes Kriterium ist entweder Level A, Level AA oder Level AAA. Der EAA fordert Level AA — das bedeutet, alle Level-A- und Level-AA-Kriterien müssen erfüllt sein.

Die vier POUR-Prinzipien im Detail

Alle WCAG-Anforderungen leiten sich aus vier Grundprinzipien ab, die als Akronym POUR bekannt sind: Wahrnehmbar, Bedienbar, Verständlich, Robust.

1. Wahrnehmbar (Perceivable)

Alle Informationen und Benutzeroberflächen-Komponenten müssen so präsentiert werden, dass Nutzer sie wahrnehmen können. Informationen, die nur über einen Sinneskanal zugänglich sind, sind nicht barrierefrei.

Wichtige AA-Kriterien:

  • 1.1.1 Nicht-Text-Inhalt (A): Alle Bilder, Icons und nicht-textuelle Inhalte müssen Text-Alternativen (Alt-Texte) haben. Dekorative Bilder erhaltenalt="".
  • 1.2.2 Untertitel für aufgezeichnete Videos (A): Alle Videos mit gesprochenen Inhalten brauchen Untertitel.
  • 1.3.1 Info und Beziehungen (A): Informationen, die durch visuelle Formatierung vermittelt werden (Überschriften, Listen, Tabellen), müssen im Code semantisch ausgedrückt sein.
  • 1.4.3 Kontrast (AA): Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 haben, großer Text (ab 18pt/24px) mindestens 3:1.
  • 1.4.4 Textgröße (AA): Text muss auf 200% vergrößerbar sein, ohne dass Inhalt oder Funktion verloren geht.
  • 1.4.11 Kontrast für Nicht-Text-Inhalte (AA): UI-Komponenten (Buttons, Formulare, Fokusrahmen) und informationstragende Grafiken benötigen ebenfalls 3:1 Kontrast.
  • 1.4.12 Textabstand (AA): Wenn Nutzer Schriftabstände ändern, darf kein Inhalt abgeschnitten oder überlappt werden.

2. Bedienbar (Operable)

Alle Funktionen der Benutzeroberfläche und die Navigation müssen bedienbar sein — nicht nur mit der Maus, sondern auch per Tastatur, Spracheingabe oder anderen Eingabegeräten.

Wichtige AA-Kriterien:

  • 2.1.1 Tastatur (A): Alle Funktionen müssen per Tastatur erreichbar und bedienbar sein — ohne Zeitbeschränkung für einzelne Tastenanschläge.
  • 2.1.2 Keine Tastaturfalle (A): Der Tastaturfokus darf nie in einer Komponente "stecken bleiben" — Modal-Dialoge müssen korrekt implementiert sein.
  • 2.4.3 Fokus-Reihenfolge (A): Die Tab-Reihenfolge muss der logischen Seitenstruktur entsprechen.
  • 2.4.4 Linktext (A): Link-Texte müssen ihren Zweck erkennen lassen — kein "Hier klicken" oder "Mehr" ohne Kontext.
  • 2.4.6 Überschriften und Labels (AA): Überschriften und Form-Labels müssen beschreibend sein.
  • 2.4.7 Sichtbarer Fokus (AA): Jedes per Tastatur fokussierbare Element muss einen sichtbaren Fokusindikator haben.
  • 2.5.3 Label im Name (A): Bei Steuerelementen mit sichtbarer Beschriftung muss die zugängliche Bezeichnung die sichtbare Beschriftung enthalten.

3. Verständlich (Understandable)

Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein. Nutzer müssen wissen, was zu tun ist, und Fehler müssen klar und hilfreich kommuniziert werden.

Wichtige AA-Kriterien:

  • 3.1.1 Sprache der Seite (A): Die Hauptsprache der Seite muss im HTML-Element deklariert sein: <html lang="de">
  • 3.1.2 Sprache von Teilen (AA): Fremdsprachige Abschnitte müssen ebenfalls mit lang ausgezeichnet sein.
  • 3.2.3 Konsistente Navigation (AA): Wiederholte Navigationskomponenten müssen auf allen Seiten konsistent erscheinen.
  • 3.3.1 Fehlererkennung (A): Wenn ein Fehler in einem Formular automatisch erkannt wird, muss er dem Nutzer textlich beschrieben werden.
  • 3.3.2 Labels oder Anweisungen (A): Alle Formularfelder müssen beschriftete Labels oder klare Anweisungen haben.
  • 3.3.3 Fehlervorschlag (AA): Wenn ein Fehler erkannt wird und Korrekturen bekannt sind, müssen Vorschläge gemacht werden.

4. Robust (Robust)

Inhalte müssen robust genug sein, um von aktuellen und zukünftigen Hilfstechnologien (Screenreader, Braille-Displays, Sprachsteuerung) interpretiert werden zu können. Valides, semantisches HTML ist die Grundlage.

Wichtige AA-Kriterien:

  • 4.1.2 Name, Rolle, Wert (A): Für alle Benutzerschnittstellen-Komponenten müssen Name, Rolle und Wert programmatisch bestimmbar sein. Das bedeutet: korrekte ARIA-Attribute und semantische HTML-Elemente.
  • 4.1.3 Statusmeldungen (AA): Statusmeldungen (z.B. "Produkt wurde dem Warenkorb hinzugefügt") müssen programmatisch bestimmbar sein, ohne dass der Fokus darauf gesetzt wird — typischerweise über aria-live.

Level A, AA, AAA: Was ist der Unterschied?

LevelAnzahl KriterienBedeutungGesetzlich gefordert?
A30Mindestanforderungen, kritischste BarrierenJa (Teil von AA)
AA20Mittlere Stufe, für die meisten Nutzer zugänglichJa (EAA/BFSG)
AAA28Höchste Stufe, nicht für alle Inhalte erreichbarNein (empfohlen)

Um WCAG 2.1 Level AA zu erfüllen, müssen alle Level-A- UND Level-AA-Kriterien bestanden werden — insgesamt 50 Kriterien. Level AAA ist für die meisten Websites schwer vollständig zu erreichen (z.B. fordert AAA Gebärdensprach-Dolmetscher für Audioinhalte) und wird deshalb als Ziel-Standard nicht gefordert.

WCAG 2.1 vs. WCAG 2.2: Was hat sich geändert?

WCAG 2.2 wurde im Oktober 2023 vom W3C veröffentlicht. Es ist abwärtskompatibel mit WCAG 2.1: Wer WCAG 2.2 erfüllt, erfüllt auch WCAG 2.1 (mit einer kleinen Ausnahme).

Neue Kriterien in WCAG 2.2:

  • 2.4.11 Fokus nicht verdeckt (AA): Der Tastaturfokus darf nicht vollständig von einer anderen Komponente verdeckt werden (z.B. Cookie-Banner).
  • 2.4.12 Fokus nicht verdeckt (erweitert) (AAA)
  • 2.4.13 Fokus-Erscheinung (AAA): Mindestgröße und Kontrast des Fokus-Indikators.
  • 2.5.7 Ziehbewegungen (AA): Alle Funktionen, die Drag-and-Drop nutzen, müssen auch ohne Ziehbewegung bedienbar sein.
  • 2.5.8 Zielgröße (AA): Klick-/Touch-Ziele müssen mindestens 24×24 CSS-Pixel groß sein (außer bei Inline-Elementen).
  • 3.2.6 Konsistente Hilfe (AA): Hilfemechanismen (Kontakt, FAQ, Chat) müssen konsistent positioniert sein.
  • 3.3.7 Redundante Eingabe (A): Informationen, die bereits eingegeben wurden, müssen nicht erneut eingegeben werden.
  • 3.3.8 Zugängliche Authentifizierung (AA): Authentifizierungsprozesse dürfen keine kognitiven Tests erfordern (kein Lösen von Rätseln, kein Abschreiben von Text aus Bildern).

Entfernt in WCAG 2.2: Kriterium 4.1.1 (Parsing) wurde entfernt, da es mit modernen Browsern und Hilfstechnologien nicht mehr relevant ist.

Die häufigsten WCAG-Verstöße in der Praxis

WebAIM (Web Accessibility in Mind) analysiert jährlich eine Million der meistbesuchten Websites weltweit. Die häufigsten WCAG-Fehler sind jedes Jahr dieselben:

  1. Unzureichender Farbkontrast (über 80% der Seiten)
  2. Fehlende Alt-Texte bei Bildern
  3. Fehlende Formular-Labels
  4. Leere Links oder Buttons
  5. Fehlende Dokumentsprache (lang-Attribut)

Diese fünf Probleme sind technisch einfach zu beheben — und betreffen dennoch die überwiegende Mehrheit aller Websites. Eine Überprüfung mit automatisierten Tools findet diese Fehler sofort. Mehr dazu in unserem Tool-Vergleich.

Wie prüfe ich meine Website gegen WCAG 2.1?

Es gibt zwei Ansätze — und beide sind notwendig für vollständige Konformität:

Automatisierte Tests

Tools wie der EAA Checker prüfen Ihre Website automatisch gegen die maschinenprüfbaren WCAG-Kriterien. Das sind ca. 30–40% aller Kriterien — besonders die häufigsten und schwerwiegendsten Fehler wie fehlende Alt-Texte, schlechte Kontraste und fehlende Formular-Labels werden zuverlässig erkannt.

Manuelle Tests

Die restlichen 60–70% der Kriterien erfordern menschliche Urteilskraft:

  • Tastaturnavigation: Können Sie alle Funktionen mit Tab, Enter und den Pfeiltasten bedienen?
  • Screenreader: Liest NVDA oder VoiceOver alle Inhalte korrekt vor?
  • Zoom: Ist die Seite bei 200% Zoom noch vollständig nutzbar?
  • Struktur: Ist die Überschriften-Hierarchie logisch und konsistent?
  • Sprache: Ist der Inhalt auch für Menschen mit kognitiven Einschränkungen verständlich?

Tipp: Beginnen Sie immer mit automatisierten Tests — sie finden schnell und kostengünstig die häufigsten Probleme. Danach führen Sie gezielte manuelle Prüfungen durch, besonders für Formulare, dynamische Inhalte und die Tastaturnavigation.

Testen Sie Ihre Website jetzt gegen WCAG 2.1 AA

Der EAA Checker prüft Ihre Website automatisch gegen über 50 WCAG-2.1-Kriterien — kostenlos, ohne Anmeldung. Sie erhalten einen Score, eine priorisierte Problemliste und deutsche Fix-Vorschläge.

Jetzt kostenlos prüfen auf eaa-checker.de

Häufige Fragen

Was bedeutet WCAG?
WCAG steht für Web Content Accessibility Guidelines — die Richtlinien des World Wide Web Consortiums (W3C) für barrierefreie Webinhalte. Sie definieren, wie Websites gestaltet werden müssen, damit Menschen mit verschiedenen Behinderungen sie nutzen können. Die aktuelle Version ist WCAG 2.1, veröffentlicht 2018. WCAG 2.2 wurde im Oktober 2023 veröffentlicht.
Was ist der Unterschied zwischen WCAG Level A, AA und AAA?
WCAG definiert drei Konformitätsstufen: Level A (Mindestanforderungen — kritischste Barrieren), Level AA (mittlere Stufe — für die meisten Nutzer zugänglich, gesetzlich gefordert durch den EAA) und Level AAA (höchste Stufe — nicht für alle Inhalte erreichbar, empfohlen für kritische Anwendungen wie Gesundheit oder Recht).
Welches WCAG-Level fordert der European Accessibility Act?
Der EAA und das deutsche BFSG fordern WCAG 2.1 Level AA. Dies ist über die harmonisierte europäische Norm EN 301 549 festgelegt. Empfohlen wird auch die Prüfung gegen WCAG 2.2, da die EU-Kommission eine Aktualisierung der Norm auf WCAG 2.2 plant.
Wie viele Erfolgskriterien hat WCAG 2.1?
WCAG 2.1 enthält insgesamt 78 Erfolgskriterien: 30 auf Level A, 20 auf Level AA und 28 auf Level AAA. WCAG 2.2 fügte 9 neue Kriterien hinzu und entfernte eines. Für eine vollständige AA-Konformität müssen alle Level-A- und Level-AA-Kriterien erfüllt sein — also 50 Kriterien.
Gilt WCAG 2.1 oder WCAG 2.2?
Gesetzlich gefordert wird derzeit WCAG 2.1 Level AA (über EN 301 549). WCAG 2.2 ist seit Oktober 2023 veröffentlicht und wird von W3C empfohlen. Da WCAG 2.2 abwärtskompatibel ist, empfiehlt es sich, bereits jetzt gegen WCAG 2.2 zu prüfen — alle WCAG-2.1-AA-Kriterien sind in WCAG 2.2 enthalten (mit einer Ausnahme: 4.1.1 Parsing wurde entfernt).
Alle ArtikelZur Startseite