WCAG 2.1 Checkliste für BFSG — Deutsch 2026 (Vollständige Prüfliste)

Die WCAG 2.1 Checkliste ist das wichtigste Werkzeug für die BFSG-Konformität. Das Barrierefreiheitsstärkungsgesetz (BFSG) verweist auf EN 301 549 und damit auf WCAG 2.1 Level AA. Diese vollständige Checkliste hilft Ihnen, Ihre Website systematisch auf BFSG-Konformität zu prüfen.

Diese WCAG 2.1 Checkliste auf Deutsch enthält alle Erfolgskriterien der Level A und AA — mit Erklärungen, Beispielen und Prüfmethoden für jedes Kriterium.

Was ist die WCAG 2.1 Checkliste?

Die WCAG 2.1 (Web Content Accessibility Guidelines) sind der internationale Standard für barrierefreie Webinhalte. Sie werden vom W3C (World Wide Web Consortium) entwickelt und sind die Grundlage für fast alle Barrierefreiheitsgesetze weltweit — einschließlich des BFSG in Deutschland.

Die WCAG 2.1 Checkliste enthält 50 Erfolgskriterien in den Konformitätsstufen A (minimal), AA (Standard, BFSG-relevant) und AAA (erweitert). Für das BFSG ist Level AA verbindlich.

Die Kriterien sind in vier Prinzipien unterteilt:

• Wahrnehmbar — Inhalte müssen für alle Nutzer wahrnehmbar sein
• Bedienbar — Inhalte müssen für alle Nutzer bedienbar sein
• Verständlich — Inhalte müssen für alle Nutzer verständlich sein
• Robust — Inhalte müssen mit assistiven Technologien kompatibel sein

Prinzip 1: Wahrnehmbar — Checkliste

1.1.1 — Nicht-Text-Inhalte (Level A)

Anforderung: Alle nicht-textuellen Inhalte (Bilder, Grafiken, Icons) müssen einen alternativen Text haben.

Prüfmethode: Überprüfen Sie jedes Bild auf Alt-Text. Verwenden Sie alt="" für dekorative Bilder.

Beispiel: <img src="produkt.jpg" alt="Rote Handtasche mit goldenem Verschluss">

Häufiger Fehler: Fehlender oder leerer Alt-Text bei wichtigen Bildern.

✅ Alle wichtigen Bilder haben beschreibenden Alt-Text

✅ Dekorative Bilder haben alt=""

1.2.1 — Audio only und Video only (Level A)

Anforderung: Für reine Audio- oder Videoinhalte muss ein alternatives Äquivalent (Transkript) bereitgestellt werden.

✅ Reine Audioinhalte haben ein Transkript

✅ Reine Videoinhalte haben ein Transkript oder eine Audiodeskription

1.2.2 — Untertitel (Level A)

Anforderung: Alle synchronisierten Medien (Videos mit Ton) müssen Untertitel haben.

✅ Alle Videos haben Untertitel

1.2.3 — Audiodeskription (Level A)

Anforderung: Videos mit wichtigen visuellen Informationen benötigen eine Audiodeskription oder ein vollständiges Transkript.

✅ Videos haben Audiodeskription oder Transkript

1.3.1 — Informationen und Beziehungen (Level A)

Anforderung: Informationen, die visuell dargestellt werden, müssen auch programmatisch (für Screenreader) erkennbar sein. Dazu gehören Überschriften, Listen und Tabellen.

Prüfmethode: Überprüfen Sie die HTML-Struktur auf semantische Elemente.

✅ Überschriften sind mit <h1> bis <h6> ausgezeichnet

✅ Listen sind mit <ul> oder <ol> ausgezeichnet

✅ Tabellen haben <th> für Kopfzeilen

1.3.2 — Sinnvolle Reihenfolge (Level A)

Anforderung: Die Lesereihenfolge muss der visuellen Reihenfolge entsprechen.

✅ Die Tab-Reihenfolge entspricht der visuellen Anordnung

1.4.1 — Verwendung von Farbe (Level A)

Anforderung: Farbe darf nicht die einzige Möglichkeit sein, Informationen zu vermitteln.

Prüfmethode: Sind Fehlermeldungen nur durch rote Farbe gekennzeichnet? Gibt es zusätzliche Symbole oder Text?

✅ Informationen werden nicht nur durch Farbe vermittelt

1.4.2 — Steuerung der Audiowiedergabe (Level A)

Anforderung: Automatisch abgespielte Audioinhalte (länger als 3 Sekunden) müssen pausierbar sein.

✅ Automatische Audioinhalte können pausiert werden

1.4.3 — Kontrast (Minimum) (Level AA)

Anforderung: Der Farbkontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen (für normalen Text) oder 3:1 (für großen Text).

Prüfmethode: Verwenden Sie unseren Farbkontrast-Checker.

✅ Normaler Text hat 4.5:1 Kontrast

✅ Großer Text (18pt+) hat 3:1 Kontrast

1.4.4 — Textgröße ändern (Level AA)

Anforderung: Text muss bis zu 200% vergrößert werden können, ohne dass Inhalte verloren gehen.

✅ Text ist bis 200% vergrößerbar

1.4.5 — Text in Grafiken (Level AA)

Anforderung: Text sollte nicht in Grafiken verwendet werden, es sei denn, es ist notwendig (Logo).

✅ Text in Grafiken wird vermieden

Prinzip 2: Bedienbar — Checkliste

2.1.1 — Tastatur (Level A)

Anforderung: Alle Funktionen müssen nur mit der Tastatur bedienbar sein.

Prüfmethode: Navigieren Sie durch Ihre Website, ohne die Maus zu benutzen. Verwenden Sie nur Tab, Enter, Leertaste und Pfeiltasten.

✅ Alle interaktiven Elemente sind per Tastatur erreichbar

✅ Alle Funktionen sind per Tastatur bedienbar

2.1.2 — Keine Tastaturfalle (Level A)

Anforderung: Nutzer dürfen nicht in Elementen gefangen werden (z.B. in Modals). Mit Tab muss man wieder hinauskommen.

✅ Es gibt keine Tastaturfallen

✅ Modals können mit Escape geschlossen werden

2.1.4 — Tastenkombinationen (Level A — WCAG 2.1)

Anforderung: Tastenkombinationen können deaktiviert oder umbelegt werden.

✅ Tastenkombinationen sind deaktivierbar

2.3.1 — Drei Blitze (Level A)

Anforderung: Inhalte dürfen nicht mehr als drei Mal pro Sekunde blinken.

✅ Inhalte blinken nicht mehr als 3x pro Sekunde

2.4.1 — Blöcke überspringen (Level A)

Anforderung: Es muss einen "Zum Hauptinhalt springen" Link geben.

Prüfmethode: Drücken Sie Tab — der Skip-Link sollte das erste fokussierbare Element sein.

✅ Skip-Link ist vorhanden

✅ Skip-Link ist der erste fokussierbare Link

2.4.2 — Seitentitel (Level A)

Anforderung: Jede Seite muss einen aussagekräftigen Titel haben.

✅ Jede Seite hat einen beschreibenden <title>

2.4.3 — Fokus-Reihenfolge (Level A)

Anforderung: Die Tab-Reihenfolge muss logisch sein und der visuellen Anordnung folgen.

✅ Die Tab-Reihenfolge ist logisch (oben → unten, links → rechts)

2.4.4 — Link-Zweck (Level A)

Anforderung: Der Zweck eines Links muss aus dem Linktext allein oder im Kontext erkennbar sein.

Beispiel: ❌ "Hier klicken" → ✅ "Mehr über unsere Produkte erfahren"

✅ Linktexte sind beschreibend

✅ "Hier klicken" wird vermieden

2.4.6 — Überschriften und Beschriftungen (Level AA)

Anforderung: Überschriften und Beschriftungen müssen aussagekräftig sein.

✅ Überschriften beschreiben den Inhalt

2.4.7 — Fokus sichtbar (Level AA)

Anforderung: Jedes fokussierte Element muss einen sichtbaren Fokusindikator haben.

Prüfmethode: Drücken Sie Tab — ist immer sichtbar, wo Sie sich befinden?

✅ Fokusindikatoren sind sichtbar

✅ outline: none wurde nicht ohne Ersatz verwendet

2.5.1 — Zeigergesten (Level A — WCAG 2.1)

Anforderung: Multipoint- oder pfadbasierte Gesten (Wischen, Pinch) müssen auch per Einzelklick bedienbar sein.

✅ Gesten haben Alternativen (Buttons)

2.5.3 — Bezeichnung im Namen (Level A — WCAG 2.1)

Anforderung: Die zugängliche Bezeichnung muss den sichtbaren Text enthalten.

✅ aria-label entspricht dem sichtbaren Text

Prinzip 3: Verständlich — Checkliste

3.1.1 — Sprache der Seite (Level A)

Anforderung: Die Sprache der Seite muss im lang-Attribut angegeben sein.

✅ Das lang-Attribut ist gesetzt (z.B. lang="de")

3.2.1 — Bei Fokus (Level A)

Anforderung: Der Fokus darf keinen Kontextwechsel auslösen (z.B. automatisches Absenden eines Formulars).

✅ Fokus löst keinen Kontextwechsel aus

3.2.2 — Bei Eingabe (Level A)

Anforderung: Die Eingabe in Formularfelder darf keinen Kontextwechsel auslösen.

✅ Eingabe löst keinen Kontextwechsel aus

3.3.1 — Fehleridentifikation (Level A)

Anforderung: Fehler müssen klar identifiziert und beschrieben werden.

✅ Fehlermeldungen sind klar und beschreibend

3.3.2 — Beschriftungen oder Anweisungen (Level A)

Anforderung: Alle Formularfelder müssen Beschriftungen haben.

Beispiel: <label for="email">E-Mail-Adresse</label>

✅ Alle Formularfelder haben <label>

3.3.3 — Fehlervorschläge (Level AA)

Anforderung: Bei Fehlern sollten Korrekturvorschläge angezeigt werden.

✅ Fehlermeldungen enthalten Korrekturvorschläge

Prinzip 4: Robust — Checkliste

4.1.1 — Parsen (Level A)

Anforderung: Der HTML-Code muss valide sein (vollständige Tags, eindeutige IDs).

✅ HTML ist valide (keine Fehler im Markup)

4.1.2 — Name, Rolle, Wert (Level A)

Anforderung: Alle UI-Komponenten müssen programmatisch bestimmbar sein (ARIA-Attribute).

Beispiel: <button aria-label="Menü schließen">✕</button>

✅ ARIA-Rollen und -Attribute sind korrekt

✅ Alle interaktiven Elemente haben zugängliche Namen

BFSG-Checkliste — Zusammenfassung

Häufig gestellte Fragen — WCAG 2.1 Checkliste

Interne Links — BFSG-Ressourcen