WCAG 2.1 & BFSG in der Praxis

Website Barrierefreiheit testen

Die WCAG 2.1 Checkliste 2026 — alle Prüfpunkte, Tools und BFSG-Anforderungen. So prüfen Sie Schritt für Schritt, ob Ihre Website tatsächlich barrierefrei ist.

Lupe prüft eine Website-Checkliste auf Barrierefreiheit mit Barrierefreiheits-Symbol
15 PrüfpunkteAA WCAG 2.1 Level8 Min. Lesezeit

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft — und damit die Pflicht zur digitalen Barrierefreiheit für Online-Shops und Dienstleistungswebsites. Eine Website testen Sie auf zwei Ebenen: automatisiert mit Tools wie Lighthouse, WAVE oder axe (erkennt ca. 30–40 % der Barrieren) und manuell für Tastaturnavigation, Alternativtexte und Lesereihenfolge. Maßstab ist die WCAG 2.1 Level AA. In diesem Ratgeber finden Sie eine vollständige Checkliste mit 15 Prüfpunkten, empfohlene kostenfreie Tools und die häufigsten Fehler.

1. Warum Barrierefreiheit testen?

In Deutschland leben rund 10 Millionen Menschen mit einer Behinderung — viele davon nutzen das Internet täglich. Dazu kommen Millionen älterer Menschen mit nachlassender Sehkraft, motorischen Einschränkungen oder kognitiven Herausforderungen. Eine barrierefreie Website erreicht diese Zielgruppe — und verbessert nebenbei die Nutzererfahrung für alle.

Rechtliche Pflicht seit Juni 2025

Das BFSG (Barrierefreiheitsstärkungsgesetz) verpflichtet Online-Shops und Dienstleistungswebsites zur digitalen Barrierefreiheit. Bei Verstößen drohen Bußgelder bis zu 100.000 € und Abmahnungen. Die EN 301 549 verweist in der Fassung V3.2.1 auf WCAG 2.1 Level AA als Mindeststandard.

Gegenüberstellung zweier Test-Panels: links ein automatisierter Scanner, der nur einen Teil der Barrieren findet, rechts die manuelle Prüfung mit Tastatur, Auge und Ohr für volle Abdeckung
Barrierefreiheit testen Sie auf zwei Ebenen: Automatisierte Tools finden nur etwa 30–40 % der Barrieren — Tastaturnavigation, Alternativtexte und Lesereihenfolge prüfen Sie ergänzend manuell.

2. WCAG 2.1 kurz erklärt

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte. Sie basieren auf vier Prinzipien:

Wahrnehmbar

Inhalte müssen für alle Sinne verfügbar sein (Alternativtexte, Untertitel, Kontraste).

Bedienbar

Navigation muss per Tastatur und assistiven Technologien möglich sein.

Verständlich

Inhalte und Bedienung müssen logisch und vorhersehbar sein.

Robust

Inhalte müssen mit verschiedenen Browsern und Hilfsmitteln funktionieren.

Die WCAG kennt drei Konformitätsstufen. Welches Level für Sie Pflicht ist, regelt das BFSG:

Level Anforderung Pflicht (BFSG)?
A (Minimum) Grundlegende Barrierefreiheit Ja
AA (Standard) Erweiterte Barrierefreiheit — der gesetzliche Standard Ja
AAA (Optimal) Höchste Barrierefreiheit — optional Nein (empfohlen)

Stand 11. Oktober 2026: Die europäische Norm EN 301 549 liegt seit September 2026 in der Fassung V4.1.1 vor. Ihr Web-Teil folgt jetzt den WCAG 2.2 statt den WCAG 2.1 (Quelle: ETSI, EN 301 549 V4.1.1). Die Vermutungswirkung nach § 4 BFSG entsteht aber erst, wenn die Fundstelle einer Norm im Amtsblatt der EU steht. Für die neue Fassung haben wir sie bis zu diesem Datum nicht gefunden. Die 15 Prüfpunkte unten beruhen weiter auf WCAG 2.1. Planen Sie einen Test, lohnt es sich, die neuen Kriterien der WCAG 2.2 gleich mitzuprüfen. Was sich ändert, steht in unserem Beitrag zur EN 301 549 V4.1.1 und was sie für Ihren Shop ändert.

3. Die Checkliste: 15 Prüfpunkte für Ihre Website

Arbeiten Sie diese 15 Punkte der Reihe nach ab. Jeder verweist auf das zugehörige WCAG-Erfolgskriterium — so können Sie gezielt nachschlagen.

01

Kontraste prüfen (WCAG 1.4.3)

Text muss mindestens 4.5:1 Kontrastverhältnis zum Hintergrund haben. Großer Text (ab 18pt / 14pt bold): 3:1. Prüfen Sie besonders Buttons, Links und Text auf farbigen Hintergründen.

02

Alternativtexte für Bilder (WCAG 1.1.1)

Jedes Bild braucht ein alt-Attribut. Dekorative Bilder: alt="". Informative Bilder: beschreibender Text. Keine Dateinamen als Alt-Text.

03

Tastaturnavigation (WCAG 2.1.1)

Alle interaktiven Elemente müssen per Tab-Taste erreichbar und per Enter/Space aktivierbar sein. Testen Sie: Können Sie das Menü, Formulare und Buttons ohne Maus bedienen?

04

Fokus-Indikatoren (WCAG 2.4.7)

Fokussierte Elemente müssen sichtbar hervorgehoben sein (Outline, Rahmen). Entfernen Sie niemals outline: none ohne Ersatz.

05

Semantisches HTML (WCAG 1.3.1)

Verwenden Sie semantische Tags: <nav>, <main>, <header>, <footer>, <article>. Überschriften-Hierarchie: H1 → H2 → H3 ohne Lücken.

06

Formulare mit Labels (WCAG 1.3.1)

Jedes Eingabefeld braucht ein zugeordnetes <label>. Fehlermeldungen müssen klar beschreiben, was falsch ist und wie es korrigiert wird.

07

Sprache definiert (WCAG 3.1.1)

<html lang="de"> muss gesetzt sein. Bei fremdsprachigen Abschnitten: lang-Attribut am Element.

08

Responsive und zoombar (WCAG 1.4.4)

Die Seite muss bei 200 % Zoom nutzbar bleiben. Kein maximum-scale=1 im Viewport-Meta-Tag.

09

Links sinnvoll beschriftet (WCAG 2.4.4)

Keine Links mit „Hier klicken" oder „Mehr". Der Linktext muss das Ziel beschreiben: „WCAG-Richtlinien herunterladen" statt „Hier klicken".

10

Skip-to-Content-Link (WCAG 2.4.1)

Ein „Zum Inhalt springen"-Link am Seitenanfang ermöglicht Tastaturnutzern, die Navigation zu überspringen.

11

Keine reinen Farb-Informationen (WCAG 1.4.1)

Informationen dürfen nicht ausschließlich über Farbe vermittelt werden. Ergänzen Sie Symbole, Text oder Muster.

12

Videos mit Untertiteln (WCAG 1.2.2)

Alle Videos müssen Untertitel haben. Audiodeskription für visuelle Informationen, die nicht im Ton vorkommen.

13

Keine Auto-Play-Medien (WCAG 1.4.2)

Audio und Video dürfen nicht automatisch starten. Falls doch: Pause/Stopp-Button und Lautstärkeregler bereitstellen.

14

Fehlervermeidung bei Formularen (WCAG 3.3.4)

Bei rechtlich bindenden Aktionen (Bestellung, Zahlung): Eingaben prüfbar, korrigierbar und bestätigbar machen.

15

ARIA-Attribute korrekt (WCAG 4.1.2)

Wenn Sie ARIA-Attribute verwenden, müssen sie korrekt sein. Falsches ARIA ist schlimmer als kein ARIA. Testen Sie mit einem Screenreader.

4. Kostenfreie Tools zum Testen

Mit diesen Werkzeugen starten Sie ohne Budget. Kombinieren Sie automatische Scanner mit einem echten Screenreader-Test:

Tool Typ Stärken
Lighthouse (Chrome) Automatisch Schneller Überblick, Score 0–100
WAVE Browser-Extension Visuelle Fehlermarkierung
axe DevTools Browser-Extension Detaillierte WCAG-Referenzen
Colour Contrast Analyser Desktop-App Exakte Kontrast-Messung
NVDA / VoiceOver Screenreader Realer Screenreader-Test

Hinweis: Automatisierte Tools wie Lighthouse oder axe erkennen nur ca. 30–40 % der Barrieren. Tastaturnavigation, sinnvolle Alternativtexte, logische Lesereihenfolge und kognitive Barrierefreiheit erfordern immer eine manuelle Prüfung.

5. Die 5 häufigsten Barrierefreiheits-Fehler

Diese fünf Probleme sehen wir in der Praxis am häufigsten — und sie lassen sich fast immer ohne großen Aufwand beheben:

01

Zu geringer Kontrast

Hellgrauer Text auf weißem Hintergrund, weiße Schrift auf hellen Buttons — besonders bei Tabellen-Headings und CTAs häufig. Minimum: 4.5:1 für normalen Text.

02

Fehlende Alt-Texte

Bilder ohne alt-Attribut sind für Screenreader-Nutzer unsichtbar. Jedes informative Bild braucht einen beschreibenden Alternativtext.

03

Fehlende Fokus-Indikatoren

CSS-Resets entfernen oft die Standard-Outlines. Ohne sichtbaren Fokus können Tastaturnutzer nicht erkennen, wo sie sich befinden.

04

Formulare ohne Labels

Placeholder-Text ist kein Ersatz für Labels. Screenreader lesen Placeholder oft nicht vor — verwenden Sie immer ein zugeordnetes label-Element.

05

Überschriften-Chaos

H1 → H3 → H2 — eine falsche Hierarchie verwirrt Screenreader-Nutzer. Überschriften müssen logisch aufgebaut sein: H1 → H2 → H3, ohne Lücken.

6. BFSG 2025: Was müssen Sie beachten?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie European Accessibility Act (EAA) in deutsches Recht um. Seit dem 28. Juni 2025 gilt: Wer online Produkte oder Dienstleistungen an Verbraucher verkauft, muss barrierefrei sein.

Das gilt für Sie:

  • Online-Shops müssen WCAG 2.1 Level AA erfüllen
  • Eine Erklärung zur Barrierefreiheit muss auf der Website veröffentlicht werden
  • Ein Feedback-Mechanismus für Nutzer muss vorhanden sein
  • Ausnahme nur für Kleinstunternehmen (< 10 MA, < 2 Mio. € Umsatz)

Das droht bei Verstößen:

  • Bußgeldrahmen bis 100.000 € (§ 37 BFSG), erst nach dem Verfahren nach § 30

7. Fazit: Testen ist nur der erste Schritt

Ein Test zeigt Ihnen, wo Ihre Website steht — die eigentliche Arbeit beginnt bei der Umsetzung. Starten Sie mit einem automatisierten Scan, ergänzen Sie eine manuelle Prüfung der 15 Checkpunkte und priorisieren Sie nach Schweregrad. So erreichen Sie Schritt für Schritt WCAG 2.1 Level AA.

Ein Testergebnis hat außerdem eine zweite Verwendung, die leicht untergeht: Es ist die Vorarbeit für die Informationen nach § 14 Absatz 1 Nummer 2 BFSG. Dort geben Sie an, an welchem Standard Sie gemessen haben und wann — ohne eine dokumentierte Prüfung ist dieser Satz nicht belegbar. Halten Sie deshalb Prüfdatum, Standard und Methode fest, sobald Sie testen, statt sie später zu rekonstruieren. Was diese Auskunft im Einzelnen enthalten muss und welche Formulierung dabei zu weit ginge, steht im Beitrag zur Erklärung zur Barrierefreiheit nach BFSG.

Denken Sie beim Priorisieren auch an das, was ein Website-Scanner gar nicht erst anfasst: verlinkte PDFs. Automatisierte Werkzeuge prüfen die HTML-Seite, nicht das Dokument dahinter — ein nicht getaggtes PDF fällt deshalb durch jeden grünen Scan hindurch. Wie Sie Dokumente von Anfang an richtig aufbauen, steht in unserem Artikel barrierefreie PDFs erstellen.

Sie möchten Ihre Website nicht selbst prüfen oder brauchen ein belastbares Ergebnis? Wir unterstützen Sie bei der WCAG-Analyse und -Umsetzung, richten mit Eye-Able die BFSG-konforme Lösung ein und erstellen Ihre rechtssichere Erklärung zur Barrierefreiheit. Die Erstberatung ist kostenfrei.

8. Häufige Fragen zur Website-Barrierefreiheit

Was kostet ein Barrierefreiheits-Audit?

Automatisierte Audits mit Lighthouse oder WAVE sind kostenfrei. Ein professionelles manuelles Audit kostet je nach Umfang zwischen 2.000 und 10.000 €. In einem kostenfreien Erstgespräch schätzen wir den Aufwand für Ihre Website ein.

Ist mein Online-Shop vom BFSG betroffen?

Ja, seit Juni 2025 müssen alle Online-Shops barrierefrei sein. Ausgenommen sind nur Kleinstunternehmen, die Dienstleistungen erbringen: weniger als zehn Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme.

Welches WCAG-Level muss ich erreichen?

Das BFSG fordert WCAG 2.1 Level AA. Level A ist das Minimum, Level AA der gesetzliche Standard. Level AAA ist optional und in der Praxis selten vollständig umsetzbar.

Reicht ein automatischer Test?

Nein. Automatisierte Tools erkennen nur ca. 30–40 % der Barrieren. Tastaturnavigation, sinnvolle Alternativtexte und kognitive Barrierefreiheit erfordern manuelle Prüfung.

Was passiert bei Verstößen?

Das BFSG sieht in § 30 zuerst ein gestuftes Behördenverfahren vor; der Bußgeldrahmen nach § 37 Absatz 2 reicht in bestimmten Fällen bis 100.000 Euro, sonst bis 10.000 Euro. Dazu kommen Abmahnungen und Unterlassungsklagen. Aber der wichtigste Grund: Sie schließen sonst ca. 15 % der Bevölkerung von Ihrem Angebot aus.

Weiterlesen

Mehr zur digitalen Barrierefreiheit