Barrierefreiheit für Online-Shops: BFSG-Compliance-Leitfaden (Frist Juni 2025)

Das Barrierefreiheitsstärkungsgesetz (BFSG) – Deutschlands Gesetz zur digitalen Barrierefreiheit – hatte eine Compliance-Frist am 28. Juni 2025. Diese Frist ist abgelaufen. Deutsche Unternehmen, die E-Commerce-Websites, digitale Dienstleistungen oder Online-Inhalte betreiben, riskieren jetzt Bußgelder bis zu 100.000 Euro für Nichtkonformität.

Was ist BFSG und warum es wichtig ist

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist ein deutsches Gesetz, das die EU-Web-Zugänglichkeitsrichtlinie (2016/2102) umsetzt. Sie verpflichtet öffentliche und private Organisationen, ihre Websites und digitalen Dienstleistungen für Menschen mit Behinderungen zugänglich zu machen. Nichtkonformität führt zu Geldstrafen, Imageschäden und dem Ausschluss eines beachtlichen Teils des Marktes (15-20 % der Bevölkerung hat eine Behinderung).

1. Wer muss BFSG einhalten?

Betroffene Einrichtungen

Das BFSG gilt für alle kommerziellen Websites und digitalen Dienstleistungen. Allerdings gibt es einige Ausnahmen.

• Websites des öffentlichen Sektors (Regierung, öffentliche Institutionen)
• B2C-E-Commerce (Online-Shops, die an Verbraucher verkaufen)
• Digitale Dienstleistungen (Software, Apps, Web-Anwendungen)
• Websites von Organisationen, die digitale Dienstleistungen anbieten
• Digitale Dienstleistungen im Zusammenhang mit Zahlungssystemen oder Telekommunikation

Ausnahmen: Wer muss NICHT konform sein (noch nicht)

Mikrounternehmen mit weniger als 10 Mitarbeitern sind bis 28. Dezember 2030 ausgenommen. Diese Ausnahmeregelung gilt jedoch nur für Barrierefreiheitsanforderungen; andere Vorschriften können noch gelten.

• Mikrounternehmen: <10 Mitarbeiter (bis 2030 ausgenommen)
• Einzelunternehmer: Können ausgenommen sein, wenn <10 Mitarbeiter
• KMU mit 10-49 Mitarbeitern: Müssen konform sein (keine Ausnahme)
• Größere Organisationen: Müssen unabhängig von der Größe konform sein

2. WCAG 2.1 Level AA: Der Standard

Das BFSG erfordert die Einhaltung von WCAG 2.1 Level AA (Web Content Accessibility Guidelines). WCAG ist der internationale Standard für Barrierefreiheit im Web, entwickelt vom W3C.

Was ist WCAG 2.1 Level AA?

WCAG 2.1 besteht aus 78 Erfolgskriterien, organisiert in 4 Prinzipien: Wahrnehmbar, Bedienbar, Verständlich und Robust (POUR).

• Level A: Grundlegende Konformität, minimale Zugangsmöglichkeiten
• Level AA: Empfohlener Standard, deckt die meisten häufigen Behinderungen ab
• Level AAA: Höchster Standard, schwieriger/kostenaufwändiger zu erreichen
• Das BFSG erfordert Level AA, das ist die globale Best Practice für die meisten Organisationen

3. Schlüsselanforderungen von WCAG 2.1 AA

1. Textalternativen (Alt-Text)

Alle Bilder, Symbole und visuellen Inhalte müssen beschreibenden Alt-Text haben, der Inhalt und Funktion beschreibt. Screenreader-Benutzer verlassen sich vollständig auf Alt-Text.

• Produktbilder: 'Blaue Keramik-Kaffeetasse, 12 oz, Premium-Qualität' (nicht 'tasse.jpg')
• Dekorative Bilder: Alt-Text leer lassen (alt='')
• Symbole: Funktion beschreiben, nicht Aussehen ('Suche' nicht 'Lupe')
• Diagramme/Graphen: Datenzusammenfassung in Alt-Text oder zugängliche Beschreibung bereitstellen

2. Tastaturnavigation

Alle Funktionen müssen mit der Tastatur allein bedienbar sein. Benutzer mit motorischen Behinderungen oder Sehstörungen verwenden Tastaturen statt Mäusen.

• Tab-Reihenfolge: Logisch, sequenziell (von oben nach unten, von links nach rechts)
• Skip-Links: Ermögliche Benutzern, wiederholte Navigation zu überspringen (zum Hauptinhalt springen)
• Fokus-Indikatoren: Sichtbarer Fokus-Umriss auf Buttons/Links (nie outline: none setzen)
• Keine Tastatur-Fallen: Benutzer müssen von jedem interaktiven Element wegnavigieren können
• Dropdown-Menüs: Bedienbar mit Pfeiltasten, nicht nur Mausbewegung

3. Farbkontrast

Text- und Hintergrundfarben müssen ausreichenden Kontrast für Menschen mit Farbenblindheit und niedriger Sehschärfe haben. WCAG AA erfordert ein 4,5:1-Kontrastverhältnis für normalen Text, 3:1 für großen Text.

Tools wie WebAIM Contrast Checker oder Color Contrast Analyzer helfen bei der Überprüfung von Verhältnissen. Teste alle Farbkombinationen auf deiner Website.

4. Formularbeschriftungen und Anweisungen

Alle Formulareingaben müssen zugeordnete Beschriftungen haben. Screenreader-Benutzer müssen wissen, wozu jedes Feld dient.

• Verwende HTML-<label>-Elemente, die mit Eingaben über das 'for'-Attribut verknüpft sind: <label for='email'>E-Mail</label><input id='email'>
• Nur Platzhaltertext ist NICHT ausreichend (verschwindet, wenn der Benutzer tippt)
• Fehlermeldungen müssen mit Feldern verbunden und für Screenreader angekündigt werden
• Anweisungen sollten vor Formularfeldern stehen, nicht in Tooltips versteckt
• Erforderliche Felder müssen mit (*) markiert und in der Bezeichnung angekündigt werden

5. Überschriften und Inhaltsstruktur

Verwende eine ordnungsgemäße HTML-Überschriftenhierarchie (H1, H2, H3, usw.). Screenreader-Benutzer navigieren nach Überschriften.

• Eine H1 pro Seite (Haupttitel)
• Logische Hierarchie: H1 → H2 → H3 (keine übersprungenen Ebenen)
• Verwende Überschriften nicht zum Stylen; verwende stattdessen CSS
• Tabellenkopfzeilen (<th>) für Datentabellen
• Listen: Verwende <ul>, <ol>, <li> statt <div>-Elementen

6. Zugängliche PDFs und Dokumente

Herunterladbare PDFs und Dokumente müssen zugänglich sein. Dazu gehören Markierung, ordnungsgemäße Struktur, Alt-Text für Bilder und durchsuchbarer Text (nicht gescannte Bilder).

• PDFs sollten mit ordnungsgemäßen Strukturelementen markiert sein
• Vermeide gescannte Bilder ohne OCR (verwende durchsuchbare PDFs)
• Bilder in PDFs benötigen Alt-Text
• Links sollten beschreibenden Text haben (nicht 'hier klicken')
• Erwäge alternative Formate: HTML, Word, usw.

7. Video- und Audio-Untertitel

Multimediainhalte müssen Untertitel (für Videos) und Abschriften (für Audio) enthalten. Taube und schwerhörige Benutzer verlassen sich auf Untertitel.

• Videos: Geschlossene Untertitel oder Untertitel (nicht nur von YouTube automatisch generiert)
• Audio: Vollständige Abschrift bereitgestellt oder verlinkt
• Vermeide automatisch abgespielte Medien ohne Benutzerkontrolle
• Stelle Lautstärkeregler und Schaltflächen zum Anhalten bereit

8. ARIA-Markierungen und -Bereiche

Verwende semantisches HTML und ARIA-Markierungen zur Definition von Seitenbereichen. Dies hilft Screenreader-Benutzern, komplexe Layouts zu navigieren.

• <nav> für Navigation
• <main> für Hauptinhalt
• <aside> für Seitenleisten
• <footer> für Fußzeile
• role='search' für Suchfunktionalität
• role='contentinfo' für Fußzeileninformationen

4. Technische Standards: EN 301 549

EN 301 549 ist der europäische Standard für IKT-Barrierefreiheit, auf den das BFSG verweist. Er schließt WCAG 2.1 ein und fügt zusätzliche Anforderungen für Nicht-Web-Dienstleistungen hinzu (Mobile Apps, Software, usw.).

• Bezieht WCAG 2.1 Level AA ein
• Ergänzt die Anforderungen für Mobile Apps und Software
• Anforderungen für Authoring-Tools und Content-Management-Systeme
• PDF/Dokumentstandards
• Echtzeitkommunikation (Zugang zu Videokonferenzen, Chat)

5. Häufige BFSG-Verstöße im deutschen E-Commerce

6. Test- und Audit-Tools

Automatisierte Test-Tools

• WAVE (WebAIM): Browser-Erweiterung, hebt Barrierefreiheitsprobleme auf jeder Seite hervor
• axe DevTools: Erweiterung für Entwicklertools, detaillierte Berichte zu Verstöße
• Lighthouse: In Chrome integriert, Registerkarte für Barrierefreiheits-Audits
• NVDA (Bildschirmlesesoftware): Kostenlose Bildschirmlesesoftware für Windows-Tests
• JAWS: Premium-Bildschirmlesesoftware, Marktstandard

Diese Tools sind gut für grundlegende Tests, erfassen aber nicht alle Probleme. Manuelle Tests und echte Benutzertests mit Benutzern von Hilfstechnik sind unerlässlich.

Manuelle Test-Checkliste

• Navigiere auf der Website nur mit der Tab-Taste (ohne Maus)
• Browser auf 200 % zoomen und das Layout überprüfen
• Teste mit aktiviertem Windows-Hochkontrast-Modus
• Verwende eine Bildschirmlesesoftware, um zu überprüfen, ob Inhalte sinnvoll sind
• Ändere die Größe des Browserfensters; überprüfe das responsive Design
• Teste alle Formularübermittlungsabläufe
• Teste, ob Tastaturkürzel erkennbar sind

7. BFSG-Durchsetzung: Strafen

Wer setzt BFSG durch?

Marktüberwachungsbehörden (Marktüberwachungsbehörden) auf Landesebene setzen BFSG durch. Beschwerden können von Verbrauchern, Behindertenvertretern oder proaktiver Marktüberwachung eingereicht werden.

Strafen für Nichtkonformität

BFSG-Verstöße ziehen erhebliche Strafen nach sich:

• Erster Verstoß: Verwaltungsgeldbusse bis zu 100.000 Euro
• Wiederholte Verstöße: Geldbußen können eskalieren
• Dauerhafte Verstöße: Wiederholte Geldbußen für fortgesetzte Nichtkonformität
• Alternative Durchsetzung: Gerichtliche Anordnungen zum Entfernen einer nicht konformen Website oder Dienstleistung

8. Kostenvoranschläge für BFSG-Konformität

Die Konformitätskosten hängen von der Komplexität der Website, dem aktuellen Stand und davon ab, ob du Berater beauftragst oder interne Ressourcen nutzt.

9. Implementierungs-Roadmap (2025-2026)

Wenn deine Website noch nicht konform ist, findest du hier eine praktische Zeitleiste:

• Monat 1: Führe ein Barrierefreiheits-Audit durch (WAVE, axe, manuelle Überprüfung)
• Monat 1-2: Priorisiere Korrekturen: kritische Probleme zuerst (Alt-Text, Kontrast, Tastaturnavigation)
• Monat 2-4: Setze kritische und größere Korrekturen um
• Monat 4: Führe einen umfassenden Test durch (automatisiert + manuell + Bildschirmlesesoftware)
• Monat 4-5: Behebe verbleibende kleinere Probleme
• Monat 5: Abschließendes Audit und Vorbereitung der Konformitätserklärung
• Fortlaufend: Monatliche Wartung, Überprüfung neuer Inhalte, vierteljährliche Audits

10. Übergangsfrist: Bestehende Produkte (2025-2030)

Für Produkte, die vor dem 28. Juni 2025 existierten, gibt es eine Übergangsfrist bis zum 28. Dezember 2030 für physische oder Software-Produkte. Dies gilt jedoch NICHT für Websites oder digitale Dienstleistungen – diese müssen sofort konform sein.

• Websites und Online-Shops: Müssen sofort konform sein (Frist abgelaufen)
• Physische Produkte: Übergangsfrist bis 2030 (nicht dein Anliegen)
• Software/Apps: Müssen sofort konform sein
• Digitale Dokumente: Müssen sofort konform sein

11. Konformitäts-Dokumentation und Zugangserklärung

Das BFSG erfordert, dass Websites eine Barrierefreiheitserklärung bereitstellen, die Konformitätsbemühungen dokumentiert und Kontaktinformationen für Barrierefreiheitsprobleme bereitstellt.

Was in deine Barrierefreiheitserklärung gehört

• Erklärung der Konformität mit WCAG 2.1 Level AA
• Erklärung, wie Barrierefreiheit erreicht wurde
• Liste der bekannten nicht konformen Elemente (falls vorhanden)
• Kontakt-E-Mail für Barrierefreiheitsprobleme
• Verfahren zum Umgang mit Beschwerden zur Barrierefreiheit
• Link zur Marktüberwachungsbehörde (wenn Beschwerde ungelöst)

Deine Barrierefreiheitserklärung sollte leicht zugänglich sein (z. B. Fußzeilen-Link). Überprüfe sie jährlich.

12. Business Case für Barrierefreiheit

Über die Rechtskonformität hinaus ist Barrierefreiheit gutes Geschäft:

• Marktexpansion: ~15-20 % der Bevölkerung haben eine Behinderung; inklusives Design erfasst diesen Markt
• Bessere Benutzererfahrung: Verbesserungen der Barrierefreiheit nutzen allen Benutzern (Untertitel helfen in lauten Umgebungen, klare Navigation hilft allen)
• SEO-Verbesserung: Ordnungsgemäße Überschriften, Alt-Text, semantisches HTML verbessern die Suchrangfolge
• Rechtliches Risikomanagement: Proaktive Konformität vermeidet Geldbußen und Klagen
• Markenreputation: Zeigt Engagement für Inklusion
• Mobile-Optimierung: Zugängliche Sites funktionieren oft besser auf Mobilgeräten

13. Praktische Umsetzungs-Checkliste

Zusammenfassung

Die BFSG-Konformitätsfrist ist am 28. Juni 2025 abgelaufen. Wenn du noch nicht angefangen hast, ist sofortiges Handeln erforderlich, um Geldbußen bis zu 100.000 Euro zu vermeiden. Beginne mit einem Barrierefreiheits-Audit, priorisiere kritische Probleme (Alt-Text, Kontrast, Tastaturnavigation) und plane eine umfassende Konformität innerhalb von 2-3 Monaten ein. Über die rechtlichen Anforderungen hinaus ist Barrierefreiheit gutes Geschäft – sie erweitert deinen Markt, verbessert die Benutzererfahrung und schafft Markentreue.