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. Doch wie testen Sie, ob Ihre Website tatsächlich barrierefrei ist? In diesem Ratgeber geben wir Ihnen eine vollständige WCAG 2.1 Checkliste mit allen wichtigen Prüfpunkten, empfehlen kostenfreie Tools und zeigen 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 auf WCAG 2.1 Level AA als Mindeststandard.
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
| 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) |
3. Die Checkliste: 15 Prüfpunkte für Ihre Website
1. ✅ 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.
2. ✅ 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.
3. ✅ 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?
4. ✅ Fokus-Indikatoren (WCAG 2.4.7)
Fokussierte Elemente müssen sichtbar hervorgehoben sein (Outline, Rahmen). Entfernen Sie niemals outline: none ohne Ersatz.
5. ✅ Semantisches HTML (WCAG 1.3.1)
Verwenden Sie semantische Tags: <nav>, <main>, <header>, <footer>, <article>. Überschriften-Hierarchie: H1 → H2 → H3 ohne Lücken.
6. ✅ 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.
7. ✅ Sprache definiert (WCAG 3.1.1)
<html lang="de"> muss gesetzt sein. Bei fremdsprachigen Abschnitten: lang-Attribut am Element.
8. ✅ Responsive und zoombar (WCAG 1.4.4)
Die Seite muss bei 200 % Zoom nutzbar bleiben. Kein maximum-scale=1 im Viewport-Meta-Tag.
9. ✅ 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
| 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 |
5. Die 5 häufigsten Barrierefreiheits-Fehler
❌ 1. 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.
❌ 2. Fehlende Alt-Texte
Bilder ohne alt-Attribut sind für Screenreader-Nutzer unsichtbar. Jedes informative Bild braucht einen beschreibenden Alternativtext.
❌ 3. Fehlende Fokus-Indikatoren
CSS-Resets entfernen oft die Standard-Outlines. Ohne sichtbaren Fokus können Tastaturnutzer nicht erkennen, wo sie sich befinden.
❌ 4. Formulare ohne Labels
Placeholder-Text ist kein Ersatz für Labels. Screenreader lesen Placeholder oft nicht vor — verwenden Sie immer ein zugeordnetes label-Element.
❌ 5. Ü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.
📋 BFSG-Pflichten im Überblick
- ✅ 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)
- ⚠️ Bußgelder bis zu 100.000 € bei Verstößen
7. 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. Ausnahmen gelten nur für Kleinstunternehmen mit weniger als 10 Mitarbeitern und unter 2 Millionen Euro Jahresumsatz.
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?▼
Mit dem BFSG drohen Bußgelder bis zu 100.000 €, Abmahnungen und Unterlassungsklagen. Aber der wichtigste Grund: Sie schließen sonst ca. 15 % der Bevölkerung von Ihrem Angebot aus.