Barrierefreiheit im Onlineshop: Was das BFSG verlangt — und wie du es umsetzt

Das Barrierefreiheitsstärkungsgesetz setzt den European Accessibility Act in deutsches Recht um und gilt seit dem 28. Juni 2025. Es erfasst bestimmte Produkte (Computer, Smartphones, Geldautomaten, Router) und bestimmte Dienstleistungen. Für Shopbetreiber ist nur die zweite Kategorie relevant — und dort die Nummer, die fast alle trifft: Dienstleistungen im elektronischen Geschäftsverkehr.

Warum jeder B2C-Shop darunterfällt

Gemeint sind Dienste, die über eine Website oder App angeboten und elektronisch auf individuelle Anfrage eines Verbrauchers erbracht werden, mit dem Ziel, einen Verbrauchervertrag abzuschließen. Entscheidend ist also nicht, was du verkaufst, sondern dass auf einen Vertragsschluss mit einem Verbraucher hingewirkt wird. Die FAQ der Bundesfachstelle Barrierefreiheit stellt zwei oft missverstandene Punkte klar: Ein Shop fällt auch dann unter das Gesetz, wenn die verkauften Produkte selbst gar nicht vom BFSG erfasst sind — ein Shop für Metallzuschnitte genauso wie einer für Laptops. Und die Anforderungen gelten für den gesamten Auftritt, nicht nur für die Checkout-Strecke: Startseite, Kategorien, Produktdetailseiten, Suche, Kundenkonto, Rechtstexte.

Die zwei echten Ausnahmen

Erstens der reine B2B-Handel: Angebote ausschließlich an Unternehmen zielen nicht auf einen Verbrauchervertrag. Der Haken liegt im Wort „ausschließlich“ — das muss tatsächlich umgesetzt sein, etwa über eine geschlossene Registrierung mit Gewerbenachweis. Ein Shop mit Netto-Preisen, bei dem trotzdem jeder bestellen kann, ist kein B2B-Shop im Sinne des Gesetzes.

Zweitens die Kleinstunternehmen-Regel in § 3 Absatz 3 BFSG: Die Barrierefreiheitspflicht gilt nicht für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen. Als Kleinstunternehmen gilt, wer weniger als zehn Personen beschäftigt und einen Jahresumsatz von höchstens 2 Millionen Euro oder eine Jahresbilanzsumme von höchstens 2 Millionen Euro hat. Zwei Details werden dabei regelmäßig übersehen:

• Die Ausnahme greift nur für Dienstleistungen. Wer Produkte herstellt, importiert oder vertreibt, die selbst unter das BFSG fallen, kann sich nicht darauf berufen — die Unternehmensgröße spielt dort keine Rolle.
• Die Schwellen sind eine Momentaufnahme. Wer die zehnte Person einstellt oder die Umsatzgrenze reißt, verliert die Ausnahme und muss dann liefern — ohne Schonfrist im Gesetz. Ein von Anfang an sauber gebauter Shop kostet an dieser Stelle nichts extra, ein nachträglicher Umbau schon.

Die Frist 2030 ist nicht das, wofür sie gehalten wird

Die vielzitierte „Übergangsfrist bis 2030“ ist keine Gnadenfrist für die eigene Website. § 38 BFSG erlaubt Dienstleistungserbringern lediglich, bis zum 27. Juni 2030 weiterhin Produkte einzusetzen, die sie schon vor dem 28. Juni 2025 rechtmäßig für die Leistungserbringung genutzt haben — gedacht ist das vor allem an Hardware wie Terminals und Automaten. Zusätzlich dürfen vor dem 28. Juni 2025 geschlossene Dienstleistungsverträge unverändert weiterlaufen, längstens ebenfalls bis zum 27. Juni 2030. Für die Barrierefreiheit deines Onlineshops gilt schlicht: fällig seit dem 28. Juni 2025.

Wer kontrolliert, und was es kostet

Für die Durchsetzung haben die Bundesländer eine gemeinsame Behörde geschaffen: die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg, die ihre Arbeit im September 2025 aufgenommen hat. Verbraucher und anerkannte Verbände können Barrieren dort melden; die Behörde prüft, fordert zur Nachbesserung auf und setzt Fristen. Der Bußgeldrahmen in § 37 BFSG ist zweistufig: bis zu 10.000 Euro für die meisten Verstöße und bis zu 100.000 Euro für die schwereren Fälle — darunter der Verstoß gegen § 14 Absatz 1, also das Anbieten einer Dienstleistung ohne die vorgeschriebenen Informationen zur Barrierefreiheit. Am Anfang steht in der Praxis fast nie ein Bußgeld, sondern eine Aufforderung mit Frist.

Der Gesetzestext selbst ist erstaunlich unkonkret. § 3 BFSG definiert barrierefrei als „auffindbar, zugänglich und nutzbar in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe“. Die technischen Details stehen in der Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV): Websites, zugehörige Online-Anwendungen und mobile Apps müssen wahrnehmbar, bedienbar, verständlich und robust gestaltet sein. Für den elektronischen Geschäftsverkehr kommen drei Punkte hinzu — Informationen zur Barrierefreiheit der angebotenen Produkte und Dienstleistungen sowie barrierefreie Identifizierungs-, Sicherheits-, Authentifizierungs- und Zahlungsfunktionen.

Vier Prinzipien, ein konkreter Maßstab

Diese vier Begriffe sind kein Behördendeutsch, sondern die vier Prinzipien der Web Content Accessibility Guidelines (WCAG) 2.1 des W3C: perceivable, operable, understandable, robust. Die WCAG kennen drei Konformitätsstufen — A, AA und AAA. Über die harmonisierte europäische Norm EN 301 549, die für Webinhalte die WCAG-Erfolgskriterien der Stufen A und AA übernimmt, wird daraus der praktische Prüfmaßstab. Wer diese Norm anwendet, bewegt sich im Bereich der Konformitätsvermutung; wer eigene Wege geht, muss selbst begründen, dass das Ergebnis gleichwertig ist.

Ein Hinweis zur Version: Rechtlich maßgeblich ist die Fassung der EN 301 549, die im Amtsblatt der EU zitiert ist; eine neuere Fassung mit WCAG 2.2 ist in Arbeit. Für die Praxis ändert das wenig — die Zusatzkriterien von 2.2 (sichtbarer Fokus mit Mindestgröße, ausreichend große Klickziele, keine unnötigen Mehrfacheingaben) sind ohnehin sinnvolle Ziele, und wer 2.1 AA sauber erfüllt, hat den Großteil des Wegs hinter sich.

Die Informationspflicht, die am schnellsten Ärger macht

Der am leichtesten prüfbare Punkt ist zugleich der bußgeldbewehrte: Nach § 14 BFSG in Verbindung mit Anlage 3 Nummer 1 darf eine Dienstleistung nur angeboten werden, wenn der Anbieter die vorgeschriebenen Informationen erstellt und der Öffentlichkeit in barrierefreier Form zugänglich gemacht hat. Diese Angaben gehören in die AGB oder an eine andere klar wahrnehmbare Stelle und müssen erklären, wie die Dienstleistung die Anforderungen erfüllt — inklusive einer Beschreibung der Umsetzung, des Verweises auf angewandte Normen und der Nennung der zuständigen Marktüberwachungsbehörde.

Umgangssprachlich heißt das Dokument oft „Erklärung zur Barrierefreiheit“. Achte auf den Unterschied: Die formal geregelte Erklärung mit Feedback-Mechanismus stammt aus dem Recht für öffentliche Stellen (BGG/BITV). Für private Shops schreibt das BFSG keine Vorlage vor — nur den Inhalt. Kopiere deshalb keine Behörden-Muster blind — und schreibe vor allem nichts hinein, was nicht stimmt: Eine Erklärung, die vollständige Konformität behauptet, während der Checkout mit der Tastatur nicht bedienbar ist, ist eine schriftliche Selbstanzeige. Robuster ist die Kombination aus Ist-Stand, bekannten Einschränkungen, Zeitplan und einem Kontaktweg für Rückmeldungen. Für die konkrete Formulierung gehört ein Fachanwalt an den Tisch — das hier ist keine Rechtsberatung.

Barrierefreiheit klingt nach einem Fass ohne Boden. Die Daten sagen etwas anderes. Die jährliche Auswertung WebAIM Million analysiert automatisiert eine Million Startseiten; im Februar 2026 wiesen 95,9 Prozent davon erkennbare WCAG-Verstöße auf, im Schnitt 56,1 Fehler pro Seite. Der entscheidende Befund für deine Planung: Rund 96 Prozent aller gefundenen Fehler entfallen auf nur sechs Kategorien.

1. Zu geringer Textkontrast (83,9 Prozent der Seiten)

Mit Abstand der häufigste Fehler — und der billigste Fix, weil er meist nur ein paar Design-Tokens betrifft. Die Anforderung: mindestens 4,5:1 für normalen Text, 3:1 für großen Text ab etwa 24 Pixeln oder 19 Pixeln fett, ebenfalls 3:1 für Bedienelemente und ihre Zustände. Die Klassiker im Shop: hellgraue Fließtexte auf Weiß, Platzhaltertexte in Formularen, deaktivierte Buttons, Preise in Sekundärfarbe, weiße Schrift auf Bildern ohne Overlay.

2. Fehlende Alternativtexte für Bilder (53,1 Prozent)

Im Shop ist das Kernfunktion, nicht Randnotiz: Produktbilder sind der Inhalt. Ein Alt-Text beschreibt, was für die Kaufentscheidung zählt — Farbe, Material, Ausführung, Blickwinkel. Rein dekorative Bilder bekommen ein leeres alt="", damit Screenreader sie überspringen. Bilder, die als Link oder Button funktionieren (Warenkorb-Icon, Wunschliste), brauchen einen Alt-Text, der die Aktion benennt, nicht das Symbol. Und Text, der auf einem Bild steht — Rabattstörer, Versandhinweise —, muss in der Alternative auftauchen, sonst ist die Information für einen Teil der Kundschaft nicht vorhanden.

3. Formularfelder ohne Beschriftung (51 Prozent)

Der teuerste Fehler, weil er genau dort sitzt, wo Umsatz entsteht: im Checkout. Jedes Eingabefeld braucht ein programmatisch verknüpftes <label>. Ein Platzhaltertext ist kein Ersatz — er verschwindet beim Tippen, hat meist zu wenig Kontrast und wird nicht zuverlässig vorgelesen. Dazu kommen drei Dinge, die im Checkout regelmäßig fehlen: Fehlermeldungen, die dem Feld zugeordnet und für Screenreader angekündigt werden statt nur rot zu leuchten; Pflichtfeld-Kennzeichnung, die nicht allein über Farbe läuft; und korrekte autocomplete-Attribute. Der letzte Punkt hilft allen — und senkt nebenbei die Abbruchquote.

4. Links ohne erkennbaren Text (46,3 Prozent) und 5. leere Buttons (30,6 Prozent)

Beide entstehen aus demselben Muster: ein Icon ohne Beschriftung. Lupe, Herz, Hamburger-Menü, Einkaufswagen — visuell verständlich, für einen Screenreader ein leeres Element. Abhilfe schafft ein visuell versteckter, aber vorlesbarer Text oder ein aria-label. Genauso schädlich sind mehrdeutige Linktexte: Wer sich per Screenreader alle Links vorlesen lässt, hört bei zwanzig Produktkacheln zwanzigmal „Mehr erfahren“.

6. Fehlende Sprachauszeichnung (13,5 Prozent)

Ein einzelnes Attribut: <html lang="de">. Ohne diese Angabe liest eine Sprachausgabe deutschen Text mit englischer Aussprache vor — praktisch unverständlich. Bei mehrsprachigen Shops muss es pro Sprachversion stimmen.

Was Automaten nicht finden: Tastatur und Fokus

Diese sechs Punkte findet jedes Testwerkzeug. Die zwei Barrieren, die im Shop am meisten wehtun, findet keines davon zuverlässig. Die erste ist die Tastaturbedienbarkeit: Jede Funktion muss ohne Maus erreichbar sein — Menüs, Filter, Größenauswahl, Bildergalerie, Modals, Cookie-Banner, Bezahlschritt. Typische Fallen sind Dropdowns, die nur auf hover reagieren, Klick-Handler auf <div>-Elementen statt auf Buttons, und Overlays, die den Fokus nicht einfangen, sodass man „hinter“ dem Dialog weitertabbt. Die zweite ist die Fokus-Reihenfolge: Der Tabulator muss der visuellen Leserichtung folgen, der Fokus deutlich sichtbar sein (nie outline: none ohne Ersatz), und beim Öffnen eines Dialogs dorthin wandern — beim Schließen zurück zum auslösenden Element. Ein Skip-Link kostet zehn Minuten und spart Tastaturnutzern auf jeder Seite dutzende Tastendrücke.

Der Reflex, ein Tool laufen zu lassen und den grünen Haken als Nachweis zu speichern, ist verständlich — und gefährlich. Deque, der Hersteller der Prüf-Engine axe-core, hat rund 13.000 geprüfte Seitenzustände ausgewertet und kommt darauf, dass automatisierte Tests im Schnitt gut die Hälfte der real gefundenen Verstöße abdecken. Diese Zahl ist stark von Kontrastfehlern getrieben, die Maschinen nahezu perfekt erkennen. Bezogen auf die Erfolgskriterien selbst ist der Anteil deutlich kleiner: Vieles lässt sich gar nicht automatisiert prüfen, weil dafür Bedeutung beurteilt werden muss — ob ein Alt-Text das Bild wirklich beschreibt, ob die Überschriftenstruktur logisch ist, ob eine Fehlermeldung weiterhilft.

Die Werkzeuge und wofür sie taugen

• axe DevTools (Browser-Erweiterung, Engine axe-core): der Standard für Entwicklerinnen und Entwickler. Wenige Falschmeldungen, präzise Verweise auf das betroffene Element und das verletzte Kriterium. Lässt sich als Bibliothek in automatisierte Tests einbinden — damit fängst du Regressionen ab, bevor sie live gehen.
• WAVE (WebAIM): visualisiert Fehler direkt auf der Seite. Die stärkste Funktion ist der Struktur- und Überschriften-Überblick — ideal, um Nicht-Entwicklern zu zeigen, warum etwas ein Problem ist.
• Lighthouse (in Chrome integriert): der schnellste Einstieg, aber der Accessibility-Score ist kein Konformitätsnachweis. 100 Punkte bedeuten nur, dass die automatisiert prüfbaren Regeln erfüllt sind. Wie du denselben Report für Performance nutzt, steht im Ratgeber zur Core-Web-Vitals-Optimierung.
• Kontrast-Prüfer in den Browser-DevTools: zeigt beim Inspizieren das Kontrastverhältnis und schlägt konforme Farbwerte vor.

Die manuelle Prüfung, die du wirklich brauchst

Vier Durchgänge auf den kritischen Seiten — Startseite, Kategorie, Produktdetail, Warenkorb, Checkout, Kundenkonto — decken mehr auf als jeder Scan:

1. Nur Tastatur. Maus weglegen, kompletten Kauf durchspielen: Suche, Filter, Variantenauswahl, Warenkorb, Adresse, Zahlart, Bestellung. Achte auf jeden Moment, in dem du nicht siehst, wo der Fokus steht, oder hängen bleibst.
2. Auf 200 Prozent zoomen, zusätzlich 400 Prozent auf schmalem Viewport. Verschwindet Text hinter anderen Elementen? Entsteht horizontales Scrollen? Werden Bedienelemente unerreichbar?
3. Mit Screenreader durchgehen. NVDA (Windows, kostenlos) oder VoiceOver (macOS/iOS, vorinstalliert). Die erste halbe Stunde ist unangenehm, danach hörst du sofort, wo Struktur und Beschriftungen fehlen.
4. Ohne Farbe lesen. Seite in Graustufen: Sind Pflichtfelder, Fehler, Verfügbarkeiten und Rabatte noch erkennbar, wenn Rot und Grün wegfallen?

Vorsicht bei Overlay-Werkzeugen, die per JavaScript-Zeile „Barrierefreiheit in einer Minute“ versprechen. Sie beheben die zugrunde liegenden Fehler nicht, sondern legen eine Bedienleiste darüber, und von Betroffenenverbänden werden sie überwiegend abgelehnt. Es gibt keine Abkürzung um sauberes, semantisches HTML herum.

Wer Barrierefreiheit nur als Pflicht behandelt, macht sie zum Kostenblock. Durchgerechnet ist sie eine der wenigen Maßnahmen, die gleichzeitig Rechtsrisiko senken, Zielgruppe vergrößern und technische Qualität verbessern.

Die Zielgruppe ist größer als gedacht

Ende 2025 lebten laut Statistischem Bundesamt rund 7,8 Millionen Menschen mit einer amtlich anerkannten Schwerbehinderung in Deutschland — 9,4 Prozent der Bevölkerung. Das ist die Untergrenze: Nicht erfasst sind leichtere Sehschwächen, Rot-Grün-Sehschwäche (etwa acht Prozent der Männer), motorische Einschränkungen ohne Anerkennung und altersbedingter Nachlass. Wirtschaftlich am wichtigsten ist die Altersverteilung: 45 Prozent der schwerbehinderten Menschen sind zwischen 55 und 74 Jahre alt, weitere 34 Prozent 75 oder älter. Das ist keine Randgruppe, sondern eine kaufkräftige Kohorte, die im E-Commerce seit Jahren am stärksten wächst. Dazu kommen situative Einschränkungen, die jeden treffen: Sonnenlicht auf dem Display, ein Arm voller Einkaufstüten, laute Umgebung ohne Kopfhörer.

Der SEO-Effekt ist ein echter Nebeneffekt, keine Behauptung

Barrierefreiheit ist kein Rankingfaktor. Aber die Arbeit überschneidet sich fast deckungsgleich mit technischer Suchmaschinenoptimierung — weil Crawler und Screenreader dieselbe Ausgangslage haben: Beide sehen kein Layout, sondern nur Struktur und Text.

• Semantisches HTML mit sauberer Überschriftenhierarchie liefert Screenreadern eine Navigationsstruktur und Suchmaschinen ein klares Themengerüst.
• Alt-Texte sind zugleich die einzige Textinformation, die Suchmaschinen zu einem Produktbild haben — und damit die Grundlage für die Bildersuche.
• Aussagekräftige Linktexte statt „hier klicken“ verbessern die interne Verlinkung.
• Klare Sprache und kurze Sätze erhöhen die Verständlichkeit — und die Wahrscheinlichkeit, dass Passagen von KI-Suchsystemen zitiert werden.
• Korrekte lang-Attribute und Strukturdaten helfen beiden Seiten bei der Zuordnung.

Wie sich diese Bausteine plattformspezifisch umsetzen lassen, vertiefen wir in den Ratgebern zu Shopify SEO und WooCommerce SEO. Und weil bessere Formulare, klarere Fehlermeldungen und eine verlässliche Tastaturbedienung direkt auf die Abschlussquote wirken, zahlt dieselbe Arbeit auf die Conversion-Rate-Optimierung ein.

Die Reihenfolge, die sich in Projekten bewährt hat

1. Ist-Stand feststellen. Automatisierter Scan der kritischen Seitentypen plus Tastatur-Durchlauf durch den kompletten Kauf. Ergebnis: eine priorisierte Liste, kein Bauchgefühl.
2. Checkout zuerst. Formulare, Labels, Fehlermeldungen, Fokus, Zahlungs- und Authentifizierungsschritte. Höchstes Risiko, höchster Umsatzhebel, ausdrücklich in der Verordnung genannt.
3. Kontraste global im Design-System. Einmal an den Tokens gelöst statt hundertmal pro Komponente.
4. Struktur und Semantik. Überschriften, Landmarks, Skip-Link, lang-Attribut, Icon-Buttons beschriften.
5. Alt-Texte redaktionell aufräumen — inklusive Pflegeprozess, sonst ist der nächste Produktimport wieder ohne.
6. Informationen zur Barrierefreiheit veröffentlichen, mit Ist-Stand, bekannten Lücken, Zeitplan und Kontaktweg.
7. Absichern. axe in die Testpipeline, Kontrastregeln ins Linting, Barrierefreiheit in die Definition of Done — sonst kommt alles mit dem nächsten Feature zurück.

Wenn die Plattform gegen dich arbeitet

Manchmal liegt das Problem nicht im eigenen Code: Wenn jedes Theme-Update die Fokus-Styles überschreibt, Plugins eigene Formularfelder ohne Labels einschleusen oder der Checkout aus einem Framework stammt, dessen Markup du nicht anfassen kannst, kämpfst du gegen eine Basis statt gegen einen Bug. Dann lohnt die ehrliche Frage, ob der Umbau auf ein wartbares Fundament nicht der günstigere Weg ist. Bei Airbag24 haben wir aus genau diesem Grund von einem veralteten Shopsystem auf Shopify migriert und im Projektverlauf rund 400 Prozent ROI erreicht — nicht durch den Systemwechsel allein, sondern weil Frontend, Checkout und Tracking danach überhaupt erst gezielt steuerbar waren. Bei Kiwabo lief dieselbe Logik: Migration von WooCommerce zu Shopify, anschließend Growth-Arbeit aus SEO, SEA und Customer-Journey-Optimierung, in Summe über 210 Prozent mehr organischer Traffic. Barrierefreiheit ist in solchen Projekten kein Zusatzposten am Ende, sondern eine Anforderung im Komponenten-Set — dort kostet sie wenig, nachträglich viel.