BFSG im Onlineshop: 12 häufige Fehler bei Checkout Filter und Bildern

Stand: Oktober 2026. Das Barrierefreiheitsstärkungsgesetz (BFSG) erfasst Dienstleistungen im elektronischen Geschäftsverkehr, die nach dem 28. Juni 2025 für Verbraucher erbracht werden. Für Onlineshops heißt das: Suche, Filter, Warenkorb und Checkout müssen auch mit Tastatur, Screenreader oder starker Vergrößerung funktionieren.

Die meisten Shops scheitern dabei an wiederkehrenden Grundfehlern. Eine eigene Erhebung haben wir nicht durchgeführt; die Häufigkeitsangaben stammen aus öffentlichen Studien, die wir im nächsten Abschnitt nennen.

Für shop-typische Probleme wie Filter oder Variantenauswahl gibt es keine belastbare öffentliche Prozentzahl. Wir beschreiben sie als typische Fehlerbilder und ordnen sie dem passenden WCAG-2.1-Kriterium zu. Verstehen Sie den Text als praktische Hilfe aus Sicht der Webentwicklung; eine Rechtsberatung ersetzt er nicht.

Die Organisation WebAIM prüft jedes Jahr die Startseiten der eine Million meistbesuchten Websites automatisiert mit dem Prüfwerkzeug WAVE. Im Bericht 2026 wiesen 95,9 % der Startseiten erkennbare WCAG-Fehler auf, im Schnitt 56,1 Fehler pro Seite. Beide Werte sind gegenüber 2025 gestiegen.

Sechs Fehlerarten machen 96 % aller erkannten Fehler aus, und es sind seit sieben Jahren dieselben:

• Text mit zu geringem Kontrast: 83,9 % der Startseiten
• Bilder ohne Alternativtext: 53,1 %
• Formularfelder ohne Beschriftung: 51 %
• Leere Links: 46,3 %
• Leere Buttons: 30,6 %
• Fehlende Angabe der Seitensprache: 13,5 %

Die Kategorie „Shopping“ mit 95.039 Startseiten kam auf durchschnittlich 71,0 Fehler, 26,6 % mehr als der Durchschnitt. WebAIM betont, dass automatische Tests nicht alle Konformitätsfehler erkennen. Ob ein Filter per Tastatur funktioniert, zeigt erst ein manueller Test.

Diesen Teil deckt der dritte Testbericht von Aktion Mensch und Google vom Juni 2025 ab. Aus den 500 meistbesuchten Firmen-Websites in Deutschland wurden 65 mit vollständigem Webshop manuell entlang einer typischen „User Journey“ geprüft. Nur 20 ließen sich allein mit der Tastatur bedienen, und die meisten zeigten keinen sichtbaren Tastaturfokus. Das Fazit der Herausgeber: Nur ein Drittel der untersuchten Shops ist barrierefrei.

Ein älterer Benchmark des Baymard Institute aus dem Jahr 2021 mit 33 umsatzstarken E-Commerce-Sites fand Probleme bei Bildern (82 % der Sites), Links (73 %), Tastaturnavigation (64 %) und der Auszeichnung von Formularfeldern (58 %).

§ 1 Abs. 3 Nr. 5 BFSG nennt die Dienstleistungen im elektronischen Geschäftsverkehr ausdrücklich. Nach § 2 Nr. 26 BFSG sind das digitale Dienste, die über Webseiten und Apps angeboten und auf individuelle Anfrage eines Verbrauchers im Hinblick auf einen Verbrauchervertrag erbracht werden. Wer als Kleinstunternehmen Dienstleistungen anbietet, ist von den Anforderungen befreit; die Bundesfachstelle Barrierefreiheit berät solche Betriebe nach § 15 BFSG kostenlos.

Speziell für den Onlinehandel ergänzt § 19 BFSGV drei Punkte:

• Angaben zur Barrierefreiheit der verkauften Produkte und Dienstleistungen gehören in den Shop, sofern der zuständige Wirtschaftsakteur sie liefert.
• Anmeldung, Sicherheitsprüfung und Bezahlung: Stellt der Shop diese Funktionen als Teil seiner Dienstleistung bereit, gelten für sie die vier Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
• Auch angebotene Verfahren zur Identifizierung und Authentifizierung, elektronische Signaturen sowie Zahlungsdienste fallen unter diese Anforderung.

Login und Bezahlschritt sind damit ausdrücklich erfasst. In ihren FAQ zum elektronischen Geschäftsverkehr schreibt die Bundesfachstelle, die Vorgaben legten nahe, dass tatsächlich die gesamte Website oder App die Anforderungen erfüllen muss – nicht nur der Weg zum Vertragsabschluss. Ein Overlay-Tool genügt nach ihrer Darstellung nicht.

Technischer Maßstab ist derzeit die EN 301 549 in Version 3.2.1. Ihr Kapitel 9 für Webinhalte verweist auf die Erfolgskriterien der WCAG 2.1 der Stufen A und AA. Bis die harmonisierten Normen aus dem Normungsauftrag M/587 im Amtsblatt der EU bekanntgemacht sind, nennt die Bundesfachstelle die geltende EN 301 549 und die WCAG als maßgebliche Orientierung für die Praxis. Auf die Vermutung nach § 4 BFSG, die Anforderungen der Verordnung zu erfüllen, kann sich erst stützen, wer solchen veröffentlichten Normen entspricht.

Die ersten Punkte gehören zu den am häufigsten gemessenen Fehlerarten, danach folgen shop-typische Fehlerbilder. Am Ende jedes Punkts steht das passende WCAG-Kriterium.

1. Zu schwache Kontraste bei Preisen, Hinweisen und Buttons

Woran Sie es erkennen: Hellgraue Grundpreise, Streichpreise, Platzhaltertexte oder weiße Schrift auf pastellfarbenen „Sale“-Badges. Ein Kontrastprüfer zeigt für normalen Text weniger als 4,5:1, für Feldrahmen oder Icons weniger als 3:1.

So beheben Sie es: Passen Sie die Farbwerte zentral im Theme an, statt Einzelstellen zu flicken. Großer Text braucht mindestens 3:1. Prüfen Sie auch Zustände wie „ausgewählt“ mit. WCAG 2.1: 1.4.3, 1.4.11

2. Produktbilder ohne passenden Alternativtext

Woran Sie es erkennen: Das alt-Attribut fehlt, enthält einen Dateinamen wie „IMG_4711.jpg“ oder wiederholt bei allen Galeriebildern denselben Produktnamen.

So beheben Sie es: Beschreiben Sie, was das Bild zeigt und der Text noch nicht sagt: Rückansicht, Detail der Naht, Farbe am Modell. Dekorative Bilder erhalten ein leeres alt-Attribut. Ein Pflichtfeld im Shop-Backend verhindert, dass neue Produkte ohne Bildtext live gehen. WCAG 2.1: 1.1.1

3. Icons ohne Namen: Suche, Merkliste, Warenkorb, Mengenauswahl

Woran Sie es erkennen: Der Screenreader sagt nur „Schaltfläche“ oder „Link“, ohne Ziel. Typisch sind Lupe, Herz, Warenkorb-Symbol und die Plus-/Minus-Buttons an der Mengenauswahl.

So beheben Sie es: Jedes Bedienelement braucht einen zugänglichen Namen: sichtbaren Text, visuell versteckten Text oder ein aria-label wie „Menge erhöhen“. Ersetzen Sie Klick-Flächen aus div-Elementen durch echte button-Elemente; dann stimmen auch Rolle und Tastaturbedienung. WCAG 2.1: 4.1.2

4. Checkout-Felder ohne echte Beschriftung

Woran Sie es erkennen: Felder wie „Straße“ oder „PLZ“ sind nur per Platzhalter beschriftet, der beim Tippen verschwindet, oder das Label ist technisch nicht mit dem Feld verknüpft. Der Browser schlägt keine gespeicherte Adresse vor.

So beheben Sie es: Jedes Feld bekommt ein sichtbares, verknüpftes label-Element; Pflichtfelder kennzeichnen Sie im Text. Für Name, Adresse, E-Mail und Telefon setzen Sie das passende autocomplete-Attribut. WCAG 2.1: 3.3.2, 1.3.1, 1.3.5

5. Fehlermeldungen, die niemand findet

Woran Sie es erkennen: Nach dem Absenden färbt sich ein Feld nur rot, oder oben steht „Bitte Eingaben prüfen“, ohne das betroffene Feld zu nennen.

So beheben Sie es: Nennen Sie den Fehler als Text direkt am Feld und verknüpfen Sie ihn damit. Bei langen Formularen hilft eine Fehlerübersicht mit Links zu den Feldern. Wenn das System die Lösung kennt, gehört ein Korrekturvorschlag dazu: „Die PLZ muss fünf Ziffern haben.“ Bereits gemachte Eingaben sollten erhalten bleiben. WCAG 2.1: 3.3.1, 3.3.3

6. Filter, die nur mit der Maus funktionieren

Woran Sie es erkennen: Per Tab-Taste erreichen Sie die Filter nicht, oder Checkboxen und Preis-Schieberegler reagieren nicht auf Leertaste und Pfeiltasten. Oft lädt jeder Klick die Seite neu, der Fokus springt nach oben, und niemand erfährt die neue Trefferzahl.

So beheben Sie es: Nutzen Sie native Checkboxen und Radiobuttons oder statten Sie Eigenbauten mit Rolle, Zustand und Tastaturbedienung aus. Bieten Sie den Preisfilter zusätzlich als zwei Eingabefelder (von/bis) an. Setzen Sie einen Button „Filter anwenden“ ein oder kündigen Sie das Neuladen vorher an, und geben Sie die Trefferzahl als Statusmeldung aus. WCAG 2.1: 2.1.1, 4.1.2, 3.2.2, 4.1.3

7. Unsichtbarer oder springender Fokus

Woran Sie es erkennen: Beim Tabben ist nicht zu sehen, wo Sie sich befinden, oft weil die Fokus-Umrandung per CSS entfernt wurde. Oder der Fokus landet nach dem Öffnen eines Pop-ups hinter dem Dialog.

So beheben Sie es: Definieren Sie einen deutlichen Fokusstil mit mindestens 3:1 Kontrast zur Umgebung. Bei Dialogen, Mini-Warenkorb und Zoom-Ansicht setzen Sie den Fokus hinein, halten ihn dort und geben ihn beim Schließen an den auslösenden Button zurück. WCAG 2.1: 2.4.7, 2.4.3, 1.4.11

8. „In den Warenkorb“ ohne Rückmeldung

Woran Sie es erkennen: Nach dem Klick erscheint kurz ein Häkchen oder die Zahl am Warenkorb-Icon ändert sich – für Screenreader passiert nichts. Dasselbe gilt für „Gutschein eingelöst“ oder „Artikel entfernt“.

So beheben Sie es: Geben Sie solche Meldungen über eine Live-Region aus, etwa mit der ARIA-Rolle „status“. Dann werden sie vorgelesen, ohne dass der Fokus wandert. Für einen Mini-Warenkorb als Dialog gelten die Fokusregeln aus Punkt 7. WCAG 2.1: 4.1.3

9. Variantenauswahl nur über Farbe und Bild

Woran Sie es erkennen: Farben stehen als Farbkreise ohne Text zur Wahl, Größen als Kacheln, deren Auswahl nur farblich markiert ist. Ausverkaufte Größen sind bloß durchgestrichen.

So beheben Sie es: Jede Option braucht einen Textnamen („Farbe: Dunkelblau“), ihren Zustand (ausgewählt, nicht verfügbar) und eine gut sichtbare Auswahlmarkierung. Technisch eignen sich Radiobuttons in einer beschrifteten Gruppe. Ändert sich der Preis, kündigen Sie das per Statusmeldung an. WCAG 2.1: 4.1.2, 1.1.1, 1.4.11

10. Bildergalerien und Slider

Woran Sie es erkennen: Das Startseiten-Karussell dreht sich automatisch und lässt sich nicht anhalten. Die Produktgalerie funktioniert nur per Wischen oder Mausklick, die Pfeile sind leere Buttons, die Zoom-Ansicht lässt sich per Tastatur nicht schließen.

So beheben Sie es: Automatische Bewegung, die länger als fünf Sekunden läuft, muss sich anhalten lassen; einfacher ist der Verzicht auf Autoplay. Pfeile und Vorschaubilder werden beschriftete Buttons, die Zoom-Ansicht verhält sich wie ein Dialog. WCAG 2.1: 2.2.2, 2.1.1, 4.1.2

11. Zoom und schmale Bildschirme

Woran Sie es erkennen: Bei 200 % Browser-Zoom überlappen Texte, der Kaufen-Button rutscht aus dem Bild oder die Seite muss in beide Richtungen gescrollt werden. Sticky-Header verdecken einen großen Teil des Inhalts.

So beheben Sie es: Text muss sich auf 200 % vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen. Bei 320 CSS-Pixeln Breite darf kein Scrollen in zwei Richtungen nötig sein; ausgenommen sind Inhalte, die ein zweidimensionales Layout brauchen, etwa Datentabellen oder Karten. Testen Sie Filter und Checkout gezielt so. WCAG 2.1: 1.4.4, 1.4.10

12. Zeitlimits und Captchas im Checkout

Woran Sie es erkennen: Die Sitzung bricht nach wenigen Minuten Inaktivität ab, eine Reservierung läuft per Countdown aus, oder beim Login erscheint ein Bilderrätsel ohne Alternative. Wer langsamer tippt, verliert den Warenkorb.

So beheben Sie es: Zeitlimits, die der Shop selbst setzt, müssen Nutzer beeinflussen können, etwa abschalten oder anpassen; Ausnahmen gelten etwa für Echtzeit-Vorgänge und Limits über 20 Stunden. Praktisch ist eine Warnung vor Ablauf mit Verlängerung per Klick. Ein Captcha braucht einen Text, der seinen Zweck beschreibt, und eine Variante für einen anderen Sinn, etwa Audio. WCAG 2.1: 2.2.1, 1.1.1

Kriterien stehen in der englischen W3C-Bezeichnung; alle gehören zum Maßstab WCAG 2.1 AA.

Ein pragmatischer Ablauf in vier Schritten:

1. Automatischer Scan der wichtigsten Seitentypen: Startseite, Kategorie mit Filtern, Produktseite, Warenkorb, Checkout. Das deckt Kontraste, Alternativtexte und Beschriftungen ab.
2. Tastaturtest der kompletten Kaufstrecke: vom Filtern bis zur Bestellbestätigung, ohne Maus.
3. Kurztest mit Screenreader und 200 % Zoom an denselben Stellen.
4. Befunde nach Kaufrelevanz ordnen: Was einen Kauf verhindert, kommt zuerst.

Externe Bausteine wie Zahlungsanbieter, Bewertungs-Widgets oder Chat gehören mit in den Test, denn § 19 BFSGV nennt Zahlungsfunktionen ausdrücklich. Hat ein eingebundener Dienst Barrieren, sprechen Sie den Anbieter an oder prüfen Sie Alternativen.

Viele der zwölf Fehler beheben Sie einmal im Theme, und die Korrektur wirkt im ganzen Shop. Unsere Schwerpunkte in Webentwicklung und Onlineshops stehen unter Leistungen. Für eine Einschätzung zu Ihrem Shop nutzen Sie Angebot anfordern.

• WebAIM: The WebAIM Million – The 2026 report on the accessibility of the top 1,000,000 home pages
• Aktion Mensch: Barrierefreiheit Online-Shops – aktueller Test (dritter Testbericht, Juni 2025)
• Aktion Mensch: Dritter Testbericht – So barrierefrei sind Online-Shops in Deutschland 2025 (PDF)
• Baymard Institute: 94% of the Largest E-Commerce Sites Are Not Accessibility Compliant
• Barrierefreiheitsstärkungsgesetz (BFSG) – Volltext, gesetze-im-internet.de
• § 19 BFSGV – Zusätzliche Anforderungen an Dienstleistungen im elektronischen Geschäftsverkehr
• Bundesfachstelle Barrierefreiheit: E-Commerce – Wissen zum BFSG
• Bundesfachstelle Barrierefreiheit: Normen und Standards zum BFSG
• Bundesfachstelle Barrierefreiheit: FAQ Dienstleistungen im elektronischen Geschäftsverkehr (Stand Mai 2025)
• ETSI: EN 301 549 V3.2.1 (2021-03) – Accessibility requirements for ICT products and services (PDF)
• W3C (GitHub): Web Content Accessibility Guidelines (WCAG) 2.1 – Editor's Draft, 25. August 2026
• W3C (GitHub, Editor's Draft): Understanding Success Criterion 1.4.11 Non-text Contrast