Barrierefreiheitsstärkungsgesetz (BFSG)

Dieser Ratgeber wurde für dich als Betreiber einer Internetseite mit Onlineshops zusammengestellt. Er gibt dir einen Überblick über die wichtigsten Anforderungen und zeigt dir Schritt für Schritt, wie du das BFSG in WordPress mit deinem OBS Onlineshop umsetzen kannst.

Hinweis: Wir haben alle Informationen sorgfältig recherchiert, um Dich bestmöglich zu unterstützen. Dennoch ersetzt dieser Ratgeber keine rechtliche Beratung. Wir übernehmen keine Haftung für die Vollständigkeit, Richtigkeit oder Aktualität der Inhalte. Bei Unsicherheiten empfehlen wir, einen Experten oder rechtlichen Berater für Barrierefreiheit zu kontaktieren.

Inhaltsverzeichnis

• Was ist das BFSG?
• Ab wann gilt das BFSG?
• Wer ist betroffen?
• Beispiele
• Abmahnrisiko
• Welche Seiten müssen barrierefrei sein?
• Medieninhalte
• Schritt-für-Schritt-Anleitung
• Checkliste
• Fazit
• Prüfung anfragen
• Weitere Links & Tools
• OBS-Plugin Anpassungen zum BFSG

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das Barrierefreiheitsstärkungsgesetz (BFSG) soll Menschen mit Behinderungen helfen, besser am digitalen Leben teilzunehmen. Es legt einheitliche Regeln fest, damit bestimmte Produkte und Dienstleistungen für Verbraucher barrierefrei sind. Das bedeutet, dass Menschen mit Seh-, Hör-, Bewegungs- oder Denkeinschränkungen diese Angebote genauso gut nutzen sollen wie alle anderen Kunden und Nutzer.

Das BFSG basiert auf einer Richtlinie der Europäischen Union, dem European Accessibility Act (EAA). Deutschland hat den EAA mit dem BFSG in deutsches Recht umgesetzt.

Ab wann gilt das BFSG?

Das BFSG tritt am 28. Juni 2025 in Kraft. Ab diesem Zeitpunkt müssen alle betroffenen Produkte und Dienstleistungen barrierefrei verfügbar sein. Für E-Commerce-Shops gibt es keine Übergangsfrist.

Wer ist betroffen?

Grundlegend ist zu klären, ob dein Onlineshop überhaupt betroffen ist:

• Hybride Angebote (B2B und B2C) müssen barrierefrei gestaltet sein.
• Betroffen sind Unternehmen, die:
  • Mehr als 10 Beschäftigte haben UND
  • Mehr als 2 Millionen Euro Jahresumsatz machen
• Nicht betroffen sind:
  • Unternehmen mit weniger als 10 Beschäftigten UND weniger als 2 Millionen Euro Jahresumsatz
  • Reine B2B-Angebote (Online-Shops, die nur an andere Unternehmen verkaufen)

Beispiele

Hier ein paar konkrete Beispiele:

Berechnung der Mitarbeiterzahl: Die Berechnung erfolgt nach der Anzahl der Beschäftigten, wobei Teilzeitbeschäftigte anteilig und Auszubildende gar nicht einbezogen werden (Artikel 5 des Anhangs zur Empfehlung der EU-Kommission 2003/361/EG. Ein Beispiel verdeutlicht dies: Ein Unternehmen mit 9 Mitarbeitern in Vollzeit, einer Kraft in Halbzeit sowie 2 Auszubildenden würde unter die Ausnahmen fallen. Denn die Mitarbeiterzahl im Sinne des BFSG betrüge 9,5 (9 Vollzeitbeschäftigte plus 0,5 für die Halbzeitkraft) und damit nicht mehr als 10 Beschäftigte. Die Auszubildenden werden in dieser Berechnung nicht berücksichtigt.

Obwohl kleinere Unternehmen nicht direkt betroffen sind, empfehlen wir, dass sich alle Onlineshops zumindest mit dem Thema Barrierefreiheit beschäftigen.

Abmahnrisiko

Es besteht ein Abmahnrisiko durch:

• Klagebefugte Organisationen
• Mitbewerber (wegen Verstoßes gegen eine marktregulierende Vorschrift)
• Betroffene Personen (sind berechtigt, eine Beschwerde bei der zuständigen Behörde einzureichen)

Positiv zu vermerken ist, dass Abmahnkosten als Händler nicht erstattet werden müssen. Daher ist es für sogenannte „Abmahnanwälte“ vermutlich kein lukratives Geschäft.

Welche Seiten müssen barrierefrei sein?

Folgende Seiten müssen barrierefrei gestaltet werden:

• Startseite des Onlineshops
• Kategorie-Seiten
• Produktdetail-Seiten
• Registrierungs- und Kontaktformulare
• Warenkorb- und Checkout-Seiten
• Support-Seiten (z.B. FAQ-Bereiche zur Kauffunktion oder zu Services)
• AGB, Datenschutz und Widerrufsbelehrungen, Impressum
• Versandkosten- und Zahlungsmittelseiten
• Blogbeiträge, die Produkte beinhalten oder verlinken

Medieninhalte

• Bilder: Müssen mit Alt-Texten versehen werden
• Videos: Nach dem Stichtag erstellte Videos müssen Untertitel haben
• PDF-Dokumente: Müssen ebenfalls barrierefrei sein, eingebettete Bilder benötigen Alt-Texte

Welche Seiten sind nicht betroffen?

• Blog- und Newsartikel, in denen keine Produkte zum Kauf angeboten werden
• Informationsseiten über das Unternehmen (z.B. „Über uns“)

Wir empfehlen allerdings, auch diese Seiten auf Barrierefreiheit zu prüfen.

Schritt-für-Schritt-Anleitung

Diese Anleitung führt dich durch den Prozess, deine Internetseite mit Onlineshop BFSG-konform zu gestalten. Sie enthält konkrete Maßnahmen und Empfehlungen, die speziell auf das OBS System zugeschnitten sind.

Vorgehensweise im Überblick

1. Automatische Tests durchführen
2. Maßnahmenkatalog erstellen
3. Regelmäßige Prüfungen planen
4. Mitarbeiter schulen

1. Automatische Tests durchführen

1.3 Manuelle Tests durchführen
Neben automatischen Tests solltest du auch manuelle Tests durchführen:

1. Zoome die Seite auf 200% (STRG + Plus) und prüfen Sie, ob alles noch bedienbar ist
2. Navigiere durch deinen Onlineshop nur mit der Tastatur (Tab-Taste)
3. Prüfe ob alle interaktiven Elemente auch ohne Maus bedienbar sind
4. Teste die Farbkontraste, besonders bei Markenfarben wie KTM-Orange oder Harley-Davidson-Orange

2. Typische Probleme bei Onlineshops beheben

2.1 Kopfbereich

• Logo: Füge Alt-Texte für das Shop-Logo hinzu
• Herstellerlogos: Versehe alle Herstellerlogos (Husqvarna, Gasgas, KTM, Harley-Davidson etc.) mit Alt-Tags

2.2 Startseite

• Slider:
  • Deaktiviere das automatische Durchsliden
  • Vermeide Text als Bilddatei in Slidern
  • Wenn Text in Bildern vorkommt, nehme diesen in die Alt-Textbeschreibung auf
  • Langfristig: Ersetze Slider durch statische Boxen
• Farbkontraste:
  • Prüfe besonders Markenfarben wie KTM-Orange oder Harley-Davidson-Orange auf ausreichenden Kontrast
  • Passe die Buttons mit unzureichendem Kontrastverhältnis an
• Bilder mit Text:
  • Vermeide Text als Bilddatei
  • Wenn unvermeidbar, füge den Text in die Alt-Beschreibung ein
• Markenslider:
  • Versehe alle Logos mit Alt-Texten
• Imagevideos:
  • Deaktiviere automatisches Abspielen
  • Stelle sicher, dass Videos nur per aktivem Klick gestartet werden
  • Füge Untertitel für Videos hinzu, die nach dem Stichtag erstellt wurden

2.3 Produktkategorie-Seiten

• Breadcrumb-Navigation:
  • Stelle sicher, dass die Breadcrumb-Navigation ausreichenden Kontrast bietet
• Buttons:
  • Prüfe alle Buttons auf ausreichendes Kontrastverhältnis
• Reduzierungsanzeige:
  • Achte besonders auf Kontrastverhältnisse bei Reduzierungsanzeigen auf Produktbildern
  • Problem bei KTM und Harley-Davidson: Orange mit weißer Schrift bietet oft nicht genügend Kontrast

2.4 Produktdetailseite

• Breadcrumbs:
  • Prüfe den Kontrast der Breadcrumb-Navigation
• Preisangaben:
  • Stelle sicher, dass „inkl. Mehrwertsteuer, zzgl. Versand“ ausreichenden Kontrast hat
• Kaufen-Button:
  • Prüfe den Kontrast, besonders bei Verwendung von Markenfarben wie Orange (KTM, Harley-Davidson)
• Lieferzeit-Anzeige:
  • Die Standardfarben von OBS für Lieferzeiten bieten oft nicht ausreichend Kontrast, neue Default-Werte findest du im Block
• Empfohlene Farben:
  • Grün: #188755 (für „auf Lager“) (ist das gleiche grün wie auf Lager)
  • Orange: #CD4104 (für „mittlere Lieferzeit“) oder normale Textfarbe
  • Rot: #890707 (für „lange Lieferzeit“)

3. Regelmäßige Prüfungen planen

Planen Sie regelmäßige Überprüfungen Ihres Shops:

• Jährliche Prüfung: Setze einen festen Termin für eine jährliche Überprüfung
• Bei großen Änderungen: Prüfe nach Redesigns oder neuen Funktionen
• Bei neuen Webseiten: Prüfe neue Seiten vor der Veröffentlichung
• Schulung der Mitarbeiter: Sensibilisiere deine Mitarbeiter für das Thema Barrierefreiheit

4. Erklärung zur Barrierefreiheit implementieren (Onlineshops müssen das nicht)

Füge eine Erklärung zur Barrierefreiheit auf deiner Internetseite ein. Diese sollte folgende Elemente enthalten:

• Kontaktmöglichkeit für Feedback zur Barrierefreiheit
• Bekenntnis zur Barrierefreiheit
• Aktueller Stand der Barrierefreiheit
• Bekannte Einschränkungen

5. Barrierefreiheits-Level

Aktuell sollte deine Internetseite das Level AA der WCAG 2.2 (Web Content Accessibility Guidelines) erfüllen. Dies umfasst:

5.1 Wahrnehmbarkeit

• Screenreader: Alle Inhalte müssen für Screenreader zugänglich sein
• Anpassbare Schriftgrößen: Texte müssen in ihrer Größe anpassbar sein
• Alternativtexte: Bilder, Grafiken und Icons müssen Alternativtexte haben
• Untertitel: Videos und Audioinhalte müssen Untertitel oder Transkriptionen haben
• Farbkontraste: Optimiert für Menschen mit Sehbehinderung
• Lesbarkeit: Hintergrundbilder oder Farbverläufe dürfen Texte nicht unleserlich machen
• Barrierefreie Captchas: Müssen eingesetzt werden

5.2 Bedienbarkeit

• Tastatursteuerung: Muss vollständig gegeben sein
• Autovervollständigung: Muss implementiert werden
• Zeitlimits: Dürfen nicht für Eingaben gesetzt sein

5.3 Verständlichkeit

• Navigation: Muss konsistent und logisch aufgebaut sein
• Texte: Müssen in einfacher Sprache verfasst sein

Weitere Informationen zu den WCAG-Richtlinien findest du hier: Web Content Accessibility Guidelines (WCAG) 2.2

Checkliste

Diese Checkliste hilft dir, deinen WordPress Internetseite mit OBS Onlineshop auf Konformität mit dem Barrierefreiheitsstärkungsgesetz (BFSG) zu überprüfen. Arbeite die Punkte systematisch ab und dokumentiere die Fortschritte.

Vorbereitende Maßnahmen

• Prüfe ob dein Shop vom BFSG betroffen ist (>10 Mitarbeiter UND >2 Mio. € Jahresumsatz)
• Installiere die Chrome-Erweiterung Silktide Accessibility Checker
• Mache dich mit Google Lighthouse vertraut
• Erstelle einen Maßnahmenkatalog für deinen Internseite
• Plane regelmäßige Überprüfungen (jährlich, bei großen Änderungen)

Allgemeine Anforderungen

• Erklärung zur Barrierefreiheit auf der Webseite implementiert
• Alle Seiten sind bei 200% Zoom bedienbar
• Vollständige Tastatursteuerung ist möglich
• Keine automatisch abspielenden Videos oder Animationen
• Barrierefreie Captchas eingesetzt

Kopfbereich

• Shop-Logo mit Alt-Text versehen
• Herstellerlogos mit Alt-Texten versehen
• Kontrast der Navigationslinks überprüft
• Suchfunktion barrierefrei gestaltet

Startseite

• Slider: Automatisches Durchsliden deaktiviert
• Slider: Text nicht als Bilddatei, sondern als HTML-Text
• Slider: Falls Text in Bildern, in Alt-Text aufgenommen
• Farbkontraste aller Buttons überprüft (besonders bei Markenfarben wie KTM-Orange)
• Bilder mit Text: Text in Alt-Beschreibung aufgenommen
• Markenslider: Alle Logos mit Alt-Texten versehen
• Imagevideos: Kein automatisches Abspielen
• Imagevideos: Mit Untertiteln versehen (für nach Stichtag erstellte)

Produktkategorie-Seiten

• Breadcrumb-Navigation: Ausreichender Kontrast
• Buttons: Ausreichendes Kontrastverhältnis
• Reduzierungsanzeige: Kontrastverhältnis überprüft
• Filter-Optionen barrierefrei bedienbar
• Produktbilder mit aussagekräftigen Alt-Texten versehen

Produktdetailseite

• Breadcrumbs: Kontrast überprüft
• Preisangaben: „inkl. MwSt., zzgl. Versand“ mit ausreichendem Kontrast
• Kaufen-Button: Kontrast überprüft
• Lieferzeit-Anzeige: Kontrast verbessert
• Grün: #006400 (für „auf Lager“)
• Orange: #CD4104(für „mittlere Lieferzeit“)
• Rot: #CC0000 (für „lange Lieferzeit“)
• Produktbilder mit detaillierten Alt-Texten versehen
• Varianten-Auswahl barrierefrei bedienbar
• Tabs (Beschreibung, technische Daten etc.) barrierefrei bedienbar

Formulare, Warenkorb und Checkout

• Alle Formularfelder mit Labels versehen
• Fehlermeldungen klar und verständlich
• Ausreichende Kontraste bei allen Elementen
• Pflichtfelder nicht nur durch Farbe gekennzeichnet
• Autovervollständigung implementiert
• Keine Zeitlimits für Eingaben

Weitere wichtige Seiten

• AGB: Barrierefrei gestaltet
• Datenschutz: Barrierefrei gestaltet
• Widerrufsbelehrung: Barrierefrei gestaltet
• Impressum: Barrierefrei gestaltet
• Versandkosten-Seite: Barrierefrei gestaltet
• Zahlungsarten-Seite: Barrierefrei gestaltet
• Kontaktformular: Barrierefrei gestaltet
• Blogbeiträge mit Produkten: Barrierefrei gestaltet

Medieninhalte

• Alle Bilder mit Alt-Texten versehen
• Videos mit Untertiteln versehen
• PDF-Dokumente barrierefrei gestaltet
• Eingebettete Bilder in PDFs mit Alt-Texten versehen

Technische Tests

• Google Lighthouse Test durchgeführt
• Gefundene Probleme dokumentiert
• Maßnahmen zur Behebung geplant
• Silktide Accessibility Checker Test durchgeführt
• Textkontrast-Probleme behoben
• Fehlende Alt-Attribute ergänzt
• Screenreader-Test durchgeführt
• Manuelle Tests durchgeführt
• 200% Zoom-Test
• Tastatur-Navigation-Test
• Farbkontrast-Test

Dokumentation und Nachverfolgung

• Maßnahmenkatalog erstellt
• Fortschritte dokumentiert
• Regelmäßige Überprüfung im Kalender eingetragen
• Mitarbeiter geschult / sensibilisiert

Abschluss

• Kontaktmöglichkeit für Feedback zur Barrierefreiheit eingerichtet
• Alle kritischen Probleme behoben
• Erklärung zur Barrierefreiheit aktualisiert

Fazit

Da die Internetseiten unserer Kunden teils sehr unterschiedlich gestaltet sind, sollte mindestens eine „einfache“ Erstprüfung durchgeführt werden. Bei vielen WordPress-Seiten mit OBS-Onlineshop treten kleinere Barrierefreiheitsprobleme auf – aber keine Sorge: Mit Tools wie Google Lighthouse und Silktide kannst du diese schnell erkennen und beheben. Wenn du regelmäßig prüfst und das Thema Barrierefreiheit aktiv angehst, stellst du sicher, dass dein Shop nicht nur den Anforderungen des BFSG entspricht, sondern auch für alle Nutzer gut zugänglich ist.

Prüfung anfragen

Du kannst uns ganz einfach über die folgenden Button eine Anfrage auf Prüfung deiner Internetseite schicken. Wir melden uns dann zeitnah bei dir, um alle Details persönlich zu besprechen.

Weitere Links & Tools

• Raidboxes Blog zum EAA
• WordPress Accessibility
• Gehirngerecht Digital
• Datenschutzgenerator BFSG-Ratgeber
• Silktide Chrome Extension
• AI Tool für Alt-Texte

OBS-Plugin Anpassungen zum BFSG

Im Rahmen des Barrierefreiheitsstärkungsgesetzes (BFSG) haben wir folgende Änderungen an den OBS-Plugins vorgenommen. Stand 27.04.2025

• Core: Kategorieseite: Label zu Filter-Checkboxen hinzufügen
• Core: A11y: „In den Warenkorb“-Button auswählbar
• Core: A11y: Tabs auf Produktseite auswählbar (kein <div>-Ersatz für alte OceanWP mehr anbieten). Für alte OceanWP-Versionen hatten wir einen Fix, um die <a> durch <div> zu ersetzen, weil die Tabs sonst nicht auswählbar waren. Falls Kunden noch alte Version haben, müssen sie das Theme aktualisieren
• Core: A11y: Produkt-Features: <th> statt <td> nutzen für die Überschriften
• Core: A11y: Produkt-Matching Products: „Mehr Produkte laden“-Button auswählbar
• Core: A11y: Modell-Tabelle: „Mehr anzeigen“-Button auswählbar
• Core: A11y: Variationen: <th> statt <td> nutzen für die Überschriften
• Core: A11y: Variationen: <label> für die Dropdowns
• Core: A11y: Variationen: Buttons & Bilder auswählbar
• Core: A11y: Produktbilder: Falls keine Media-Description und auch kein Media-Title gesetzt sind, Produkttitel als Ersatz alt-Text
• Core: A11y: Fix: Kein top-Scrollen beim Auswählen von Tabs: href ersetzen durch data-bs-target
• Core: A11y: alte lightslider.min.js anpassen: Pfeile als Buttons (role=“button“ und href)
• Core: A11y: alte lightslider.min.js anpassen: Fix: href mit #
• Core: A11y: Kategorie-Seite: <label> für Sortierung der Artikel
• Core: A11y: Button-Styling auch für <button>, nicht nur <a>
• Core: A11y: Filter: Buttons aus <a> durch <button> ersetzen
• Core: A11y: Filter: mobile-Button ARIA-label besser beschriften
• Core: Kategorie-Seite: Produkte: Swiper: Aktualisieren von 9.2.4 zu 11.2.6 Fixes Loop-Bug
• Core: A11y: Kategorie-Seite: Produkte: „Mehr laden“-Button als <button>
• Core: A11y: Fix: CSS für Buttons auch für diabled <button>s ergänzen
• Core: A11y: Kategorie-Seite: Filter entfernen: <button> statt <a>
• Core: A11y: Standardfarben für Lieferzeit mit höherem Kontrast
• Cart: A11y: Warenkorb-Übersicht: Gutschein-entfernen mit Tastatur auswählbar
• Cart: A11y: Warenkorb-Übersicht: Reservierungshinweis mit Tastatur auswählbar
• Cart: A11y: Warenkorb-Übersicht: Versandhinweis mit Tastatur auswählbar
• Cart: A11y: Warenkorb-Übersicht: Login/ Logout mit Tastatur auswählbar
• Cart: A11y: Warenkorb-Übersicht: Produkt entfernen mit Tastatur auswählbar, neues aria-label
• Cart: A11y: Warenkorb-Übersicht: Versandhinweis mit Tastatur auswählbar, neues aria-label
• Cart: A11y: Warenkorb-Übersicht: Versandland-Toggle mit Tastatur auswählbar, neues aria-label
• Cart: A11y: Warenkorb-Übersicht: Gutschein-Toggle mit Tastatur auswählbar, neues aria-label
• Cart: A11y: Warenkorb-Übersicht: Login: neues aria-label
• Cart: A11y: Warenkorb-Übersicht: „Warenkorb“ als <h1>
• Cart: A11y: Warenkorb-Übersicht: Fix Reservierungshinweis
• Cart: A11y: Warenkorb-Übersicht: Produkte: aria-label für Nachbestellungs-Hinweis & Mengen-Auswahl
• Cart: A11y: Bezahlung: aria-label für Zahlungsart auswählen
• Cart: A11y: Kontakt: aria-label für Nachricht zur Bestellung
• Cart: A11y: Bestellübersicht: aria-label für Ändern der Adresse, Zahlungsart, Kontakt, Nachricht, Produkte & Versand
• Cart: A11y: Bestellübersicht: aria-label für Versandhinweis & Nachbestellhinweis
• Cart: A11y: Bestellabschluss: Logout mit Tastatur auswählbar
• Cart: A11y: Adresse: Google-Autocomplete: Manuell-eingeben-Button mit aria-label
• Core & Cart: A11y: Übersetzungen für neue A11y-Label
• Cart: A11y: Rechnungsadresse: Google-Autocomplete: Manuell-eingeben-Button mit aria-label
• Model-Selection: A11y: Button als <button>, korrekt deaktivieren / aktivieren
• Financing: A11y: <label> für Finanzierungs-Angaben
• Financing: A11y: <button> statt <a>
• Financing: A11y: alt-Text und .visually-hidden statt hidden
• Core: A11y: Offcanvas: <button> statt <a>
• Core: A11y: Kategorie-Seite: Filter: verstecktes Nummern-Filter-<input> hidden, um kein <label> zu benötigen
• Core: A11y: Produkt-Seite: Bilder: aria-label für vor/ zurück-Pfeile
• Core: A11y: Anfrage-Formular: Button als <button> statt <a>
• Core: A11y: Anfrage-Formular: Honeypot-Feld von Screenreader verstecken
• Core: Anfrage-Formular: Buttons nicht entfernen lassen
• Core: A11y: Anfrage-Chat: alt-Text für Händler-Logo
• Core: A11y: Anfrage-Chat: <button>s statt <a>s
• Core: A11y: Anfrage-Chat: Status: <label> und <button>
• Cart: A11y: Checkout: Kontrast bei Nachbestell-Icon
• Cart: A11y: Checkout: Kontrast bei Gutschein einlösen-Button
• Cart, Core, Financing: A11y: Kontrast erhöhen durch Entfernen von .text-muted ersetzt durch .obs-text-muted, um eigene Farbe setzen zu können
• Cart: A11y: Kontrast bei Nachbestell-Icon in Offcanvas
• Core: A11y: Kategorie-Seite: Filter: „Alle Filter laden“-Button Styling
• Core: A11y: Buttons: Farbe und Hintergrundfarben klar definieren, um Kontrast sicherzustellen
• Cart: A11y: Kontrast von Formular-Rahmen erhöhen
• Cart: A11y: Checkout: Änderungs-Links als Button für Screenreader definieren
• Cart: A11y: Bestellstatus: <th>-Ausrichtung definieren
• Core: Übersetzungen aktualisieren
• Core: Composer: Dependencies aktualisieren
• Core: A11y: Produkt-Seite: Beschreibung: Tabs mit Tastatur auswählbar
• Cart: A11y: Bestellbestätigung: Fehlendes aria-label
• Core: Kategorie-Seite: Filter-Überschriften als <span> statt <h4>
• Core: A11y: Produkt-Seite: „In den Warenkorb“ als <button> statt <a>
• Partstream Connector: A11y: <button> statt <a> für „In den Warenkorb“
• Moto Revolution Connector: A11y: <button> statt <a> für „In den Warenkorb“