Barrierefreiheit in Onlineshops

Onlineshops gehören zu den Angeboten, die das BFSG ausdrücklich erfasst: Der Onlinehandel ist als Dienstleistung im elektronischen Geschäftsverkehr namentlich genannt. Wer einen Shop für Verbraucher betreibt und nicht unter die Kleinstunternehmen-Ausnahme fällt, muss ihn seit dem 28. Juni 2025 barrierefrei anbieten – technisch auf dem Niveau der WCAG in Stufe AA. Das ist auch sachlich gut so: Ein Shop, den man nicht bedienen kann, ist ein Shop, in dem man nicht kauft.

Ich habe über die Jahre einige Shops begleitet und dabei gelernt, dass sich die Probleme fast immer an denselben Stellen ballen – entlang des Weges von der Produktsuche bis zum „Kaufen“. Genau diesen Weg gehe ich hier ab, bevor ich am Ende die rechtliche Einordnung und die Quellen nachreiche.

Kein Rechtsrat. Ob und in welchem Umfang dein Shop unter das BFSG fällt, hängt von Unternehmensgröße und Angebot ab. Das kläre im Zweifel rechtlich – ich beschreibe hier die technische Umsetzung, nicht die juristische Pflichtenlage.

Warum gerade Shops im Fokus stehen

Das BFSG knüpft an bestimmte Dienstleistungen für Verbraucher an, und der „Dienstleistungen im elektronischen Geschäftsverkehr“ – also der Onlinehandel – ist eine davon. Anders als bei einer reinen Info-Website gibt es hier kaum Interpretations­spielraum: Ein Shop verkauft an Verbraucher, und damit ist er erfasst, sofern nicht die Ausnahme für Kleinstunternehmen greift (weniger als 10 Beschäftigte und höchstens 2 Mio. Euro Umsatz oder Bilanzsumme). Wichtig: Diese Ausnahme gilt für die Dienstleistung Shop – wer zusätzlich eigene Produkte im Sinne des Gesetzes herstellt oder importiert, wird dafür gesondert bewertet.

Cookie-Banner & Consent – die erste Hürde

Bevor jemand überhaupt zum Produkt kommt, steht oft ein Consent-Banner im Weg. Genau das macht ihn zur ersten und wichtigsten Barriere: Lässt er sich nicht mit der Tastatur bedienen, fängt er den Fokus ein oder ist „Ablehnen“ nur als kontrastarmer Link versteckt, ist der Shop für manche Menschen schon an der Tür zu Ende. Ein barrierefreier Cookie-Banner ist fokussierbar, klar beschriftet und behandelt Zustimmung und Ablehnung gleichwertig – das ist zugleich datenschutzrechtlich der saubere Weg.

Produktsuche & Filter

Filter und Sortierung sind oft die ersten Hürden. Worauf ich achte:

• Filter sind mit der Tastatur vollständig bedienbar, nicht nur per Maus-Hover.
• Wird das Ergebnis ohne Neuladen aktualisiert, kündigt eine dezente Live-Region die neue Trefferzahl an („24 Ergebnisse“).
• Aufklappbare Filtergruppen folgen dem Disclosure-Muster, nicht einer menubar.
• Aktive Filter sind als Text erkennbar und einzeln entfernbar – nicht nur als farbige Markierung, die ein Screenreader nicht mitbekommt.

Der häufigste Fehler hier ist ein Filter, der nur auf :hover reagiert oder dessen Ergebnis sich lautlos ändert. Wer die Trefferzahl nicht sieht, weiß nicht, ob der Klick etwas bewirkt hat.

Produktseite

• Produktbilder haben aussagekräftige Alt-Texte; reine Deko-Bilder ein leeres alt.
• Variantenauswahl (Größe, Farbe) ist tastaturbedienbar und beschriftet – Farbfelder brauchen einen Namen, nicht nur einen Farbpunkt.
• Wichtige Hinweise (Verfügbarkeit, Lieferzeit) stehen als Text, nicht nur als farbiges Symbol – siehe Farbkontraste.
• „In den Warenkorb“ ist ein echter Button mit klarer Rückmeldung.
• Bewertungssterne tragen eine Textangabe („4,2 von 5“), damit die Information nicht allein an einer Grafik hängt.

Warenkorb & Mini-Cart

• Öffnet sich der Warenkorb als Overlay, muss er den Fokus korrekt führen – hinein beim Öffnen, Esc zum Schließen, zurück zum Auslöser. Das ist der Stoff der Dialoge & Modals.
• Mengenänderungen sind per Tastatur möglich und werden bestätigt.
• Der Weg vom Mini-Cart zur vollen Warenkorbseite ist eindeutig beschriftet – „Zur Kasse“ ist ein klarer Aufruf, kein bloßes Pfeil-Icon.

Checkout – die kritischste Strecke

Hier entscheidet sich der Verkauf, und hier sammeln sich die meisten Barrieren, weil der Checkout fast nur aus Formularen besteht:

• Jedes Feld hat ein Label, Pflichtfelder sind gekennzeichnet, autocomplete ist gesetzt – siehe Validierung & Pflichtfelder.
• Fehlermeldungen sind verständlich, dem Feld zugeordnet und werden angekündigt – nicht nur ein roter Rahmen.
• Zeitlimits (etwa reservierte Tickets oder Sessions) sind verlängerbar oder abschaltbar; eine Vorwarnung gehört dazu (WCAG 2.2.1).
• Anmeldung ohne Gedächtnis-Test: Logins dürfen nicht allein an einem kniffligen CAPTCHA oder dem Merken eines Codes hängen (WCAG 2.2, „Accessible Authentication“). Einfügen aus dem Passwortmanager nie blockieren.
• Bedienelemente sind groß genug (Zielgröße mind. 24 × 24 px, WCAG 2.5.8) – gerade auf dem Smartphone wichtig.

Wenn ich einen Shop nur an einer Stelle testen dürfte, wäre es der Checkout. Ein Hänger hier kostet bare Conversion – bei allen Nutzenden, nicht nur bei jenen mit Behinderung.

Gast-Checkout und Fortschritt

Ein Kaufabschluss, der einen Account erzwingt, ist nicht nur eine Conversion-Bremse, sondern auch eine unnötige Barriere. Ein Gast-Checkout senkt die Hürde für alle. Läuft der Checkout über mehrere Schritte, gehört ein klar ausgezeichneter Fortschritt dazu (siehe mehrstufige Formulare) – mit einer sichtbaren, vorlesbaren Angabe, in welchem Schritt man sich befindet.

Zahlung: der oft vergessene Schritt

Die Zahlung wird gern übersehen, weil sie teils in fremden Widgets oder iFrames stattfindet. Trotzdem gilt: Auch das Zahlungsformular muss beschriftet und tastaturbedienbar sein. Kritisch sind 3-D-Secure-Abfragen und Weiterleitungen zur Bank – bricht dort die Fokusreihenfolge oder erscheint ein reines Bild-CAPTCHA, ist der Kauf für manche Menschen zu Ende. Prüfe die Zahlungsstrecke mit denselben Maßstäben wie den Rest, auch wenn ein Dienstleister sie stellt: Verantwortlich für das Gesamterlebnis bleibst du.

Konto & Bestellverlauf

• Tabellen im Bestellverlauf sind echte Datentabellen mit Kopfzellen.
• Statusangaben („versandt“, „storniert“) sind als Text erkennbar, nicht nur über Farbe.
• Aktionen wie „Erneut bestellen“ oder „Stornieren“ sind eindeutig benannt – nicht drei gleich aussehende Icons nebeneinander.

Mobile und Touch

Ein Großteil der Bestellungen läuft über das Smartphone, und dort verschärfen sich einige Anforderungen. Der Shop muss bei 200 % Zoom und in schmaler Reflow-Ansicht ohne horizontales Scrollen nutzbar bleiben, Touch-Ziele müssen groß genug und weit genug auseinander liegen, und Gesten (Wischen im Karussell) brauchen eine bedienbare Alternative. Was auf dem Desktop funktioniert, ist auf dem Handy noch nicht automatisch barrierefrei.

Nicht vergessen: Erklärung & PDFs

Zum Pflichtteil gehört eine Barrierefreiheitserklärung bzw. – im privatwirtschaftlichen BFSG-Kontext – die Information über die Barrierefreiheit deiner Dienstleistung. Und: Rechnungen oder Datenblätter als PDF müssen ebenfalls zugänglich sein – ein getaggtes, lesbares Dokument, kein eingescanntes Bild.

Fallbeispiel: der typische Mittelstands-Shop

Ein Modehändler mit 30 Mitarbeitenden und einem Shop auf Standard-Basis: kein Kleinstunternehmen, also voll betroffen. In der Praxis fällt bei solchen Shops fast immer dasselbe auf – ein Checkout, dessen Fehlermeldungen nur rot umrandet sind, ein Filter-Overlay ohne Fokusführung, Farbvarianten ohne Namen und PDFs als Scan. Nichts davon ist ein Grundproblem des Shopsystems; es sind Theme- und Umsetzungsdetails, die sich gezielt beheben lassen. Der Aufwand liegt fast vollständig im Checkout und in den Formularen – genau da, wo er sich am schnellsten in weniger Kaufabbrüchen auszahlt.

Der wirtschaftliche Fall

Barrierefreiheit im Shop ist nicht nur Pflichterfüllung, sondern zahlt direkt auf den Umsatz ein. Jede Barriere im Checkout ist ein Kaufabbruch – und zwar nicht nur bei Menschen mit dauerhafter Behinderung, sondern auch bei allen mit situativen Einschränkungen: grelles Sonnenlicht auf dem Display, eine Hand am Kinderwagen, eine laute Umgebung ohne Ton. Dieselben Maßnahmen, die einen Screenreader zufriedenstellen – klare Beschriftungen, saubere Fokusführung, verständliche Fehlermeldungen –, senken die Abbruchquote für die gesamte Kundschaft. Der Curb-Cut-Effekt im Onlinehandel: gebaut für einige, nützlich für alle. Dazu kommt die Auffindbarkeit – dieselbe saubere Struktur hilft auch Suchmaschinen, die Produktseiten zu verstehen.

Prioritäten: wo anfangen

Wenn Zeit und Budget begrenzt sind, gehe ich in dieser Reihenfolge vor:

1. Checkout und Formulare – der direkteste Hebel auf Conversion und Pflicht.
2. Consent-Banner und globale Navigation – betreffen jede einzelne Sitzung.
3. Filter, Warenkorb-Overlay und Produktoptionen – hohe Nutzungsfrequenz.
4. Konto, Bestellverlauf und PDFs – wichtig, aber seltener im Kaufweg.

So landen die Ressourcen zuerst dort, wo sie am meisten Barrieren pro investierter Stunde beseitigen – und wo ein Fehler am teuersten wäre.

Typische Schwachstellen nach Shopsystem

Unabhängig vom System sind es meist dieselben Stellen, aber die Ausprägung unterscheidet sich. Bei WooCommerce und ähnlichen Theme-basierten Shops hängt viel am gewählten Theme und an Plugins – der Checkout ist oft solide, Slider, Mega-Menüs und Filter-Plugins reißen dagegen Lücken. Shopware und Magento bringen viel Eigen-JavaScript mit; hier lohnt der genaue Blick auf Off-Canvas-Warenkörbe und AJAX-Filter. Gehostete Systeme wie Shopify liefern eine ordentliche Basis, aber Apps aus dem Store und angepasste Themes können sie wieder untergraben. Die Lehre ist überall dieselbe: Entscheidend ist nicht das Logo des Systems, sondern der real gebaute, mit Erweiterungen bestückte Shop.

Wie du deinen Shop testest

Ein belastbarer erster Check kommt ohne teures Werkzeug aus und dauert nicht lange:

1. Nur mit der Tastatur durch die Kaufstrecke: Tab, Shift+Tab, Enter, Leertaste – von der Startseite über Filter und Warenkorb bis zum Absenden. Bleibt der Fokus sichtbar? Kommst du überall hin und wieder heraus?
2. Mit einem Screenreader (kostenlos: NVDA unter Windows, VoiceOver auf dem Mac) den Checkout durchsprechen lassen: Werden Labels, Fehler und Statusänderungen angesagt?
3. Zoom und Reflow: Bei 200 % und in schmaler Ansicht darf nichts abgeschnitten sein oder horizontal scrollen.
4. Automatisiert plus manuell: Werkzeuge finden einen Teil der Probleme; die Selbst-testen-Seite zeigt, wo automatische Prüfung endet und der Mensch übernehmen muss.

Diese vier Durchgänge decken erfahrungsgemäß den Großteil der praxisrelevanten Barrieren auf – lange bevor eine Beschwerde bei der Marktüberwachung landet.

Häufige Fragen

Mein Shop läuft auf einem Standard-System – ist er automatisch barrierefrei?

Leider nein. Gängige Shopsysteme und Themes sind unterschiedlich gut, und gerade Checkout, Filter und Overlays sind oft Schwachstellen. Prüfen musst du den echten, gebauten Shop, nicht das Marketingversprechen des Themes.

Reicht es, ein Accessibility-Overlay-Tool einzubauen?

Davon halte ich wenig. Diese Einblend-Widgets versprechen viel, beheben die eigentlichen Probleme im Markup aber nicht – und ersetzen weder echte Umsetzung noch ein Audit. Die Arbeit steckt im Code, nicht in einem Knopf.

Bin ich als kleiner Shop überhaupt betroffen?

Nur, wenn du kein Kleinstunternehmen bist – also 10 oder mehr Beschäftigte hast oder über 2 Mio. Euro Umsatz bzw. Bilanzsumme kommst. Die genaue Einordnung klärt der BFSG-Check; im Zweifel juristisch prüfen.

Wo fange ich an?

Beim Checkout und den Formularen – dort ist der Hebel am größten. Danach Filter, Overlays und Produktseiten. Die BFSG-Checkliste hilft, nichts zu übersehen.

BFSG-Check durchführen Standortbestimmung für deinen Shop: 16 Fragen, klare Bewertung, priorisierte Handlungsfelder – kostenlos und in rund drei Minuten.

Fazit

Ein barrierefreier Onlineshop entscheidet sich entlang der Kaufstrecke: bedienbare Filter, beschriftete Produktoptionen, fokus-saubere Overlays, ein Gast-Checkout mit zugänglichen Formularen, fairen Zeitlimits und barrierearmer Anmeldung – und eine Zahlungsstrecke, die bis zur Bank hält. Das BFSG macht das für viele Shops zur Pflicht; wirtschaftlich war es das, ehrlich gesagt, schon immer.

Quellen

• BFSG – Gesetzestext (nennt den Onlinehandel als erfasste Dienstleistung)
• BFSGV – konkrete Anforderungen an Dienstleistungen
• Richtlinie (EU) 2019/882 (European Accessibility Act)
• WCAG 2.2 (W3C-Empfehlung)
• Bundesfachstelle für Barrierefreiheit