Barrierefreier Onlineshop: BFSG-Pflicht, typische Barrieren und Checkliste

Ein barrierefreier Onlineshop lässt sich von allen bedienen: mit Tastatur, Screenreader oder Vergrößerung und auch mit wenig Erfahrung im Internet. Seit dem 28. Juni 2025 ist das für viele Shops außerdem Pflicht nach dem Barrierefreiheitsstärkungsgesetz (BFSG). Hier lesen Sie, wo Kundinnen und Kunden im Bestellprozess am häufigsten scheitern, wie Sie das beheben und wie Sie Ihren Shop mit einer Checkliste prüfen.

Rund 9 % der Menschen in Deutschland haben eine anerkannte Schwerbehinderung (Statistisches Bundesamt, Stand Ende 2025). Dazu kommen noch Menschen, die bei der Nutzung von Onlineshops Probleme durch mangelnde Computerkenntnisse, Sprachbarrieren oder altersbedingte Sehschwäche haben. Ist Ihr Shop nicht barrierefrei, verlieren Sie einen Teil dieser Kundinnen und Kunden, oft ohne es zu bemerken. Stellen Sie sich vor, was es für Ihr Unternehmen bedeuten würde, wenn diese Nutzer bei Ihnen kaufen und zu Stammkunden werden könnten. Ihren Onlineshop barrierefrei zu gestalten ist also keine Wohltätigkeitsaktion, sondern ein Wettbewerbsvorteil.

BFSG: Muss mein Onlineshop barrierefrei sein?

In den meisten Fällen ja. Onlineshops, in denen Verbraucherinnen und Verbraucher einkaufen, gelten als Dienstleistungen im elektronischen Geschäftsverkehr. Seit dem 28. Juni 2025 müssen sie die Anforderungen des BFSG erfüllen. Das betrifft den ganzen Weg zum Kauf: Startseite, Navigation, Suche, Produktseiten, Warenkorb, Bestellung und Bezahlung.

Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten, also Unternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Reine B2B-Shops fallen nicht unter das Gesetz. Wer betroffen ist, muss außerdem Informationen zur Barrierefreiheit veröffentlichen. Bei Verstößen drohen Bußgelder von bis zu 100.000 Euro (§ 37 BFSG). Alle Details lesen Sie auf unserer Seite BFSG-Pflicht für Websites.

Typische Barrieren im Bestellprozess

Die folgenden Barrieren gehen wir in der Reihenfolge durch, in der man einkauft: von der Suche bis zur Zahlung.

Suche

Das Suchfeld ist für viele der schnellste Weg zum Produkt. Barrieren entstehen, wenn das Feld keine Beschriftung hat, die Lupe als Schaltfläche keinen vorlesbaren Namen trägt oder Suchvorschläge nur mit der Maus auswählbar sind. Wer einen Screenreader nutzt, erfährt dann nicht, dass Vorschläge erschienen sind.
So wird es gelöst: Suchfeld und Schaltfläche beschriften, Vorschläge mit den Pfeiltasten bedienbar machen und die Zahl der Treffer als Statusmeldung ausgeben (WCAG-Kriterium 4.1.3).

Filter und Sortierung

Filter für Größe, Farbe oder Preis sind oft als gestaltete Kästchen oder Schieberegler umgesetzt, die sich nicht mit der Tastatur bedienen lassen. Lädt die Seite nach jedem Klick neu, springt der Fokus an den Seitenanfang, und man muss sich erneut durch die Navigation arbeiten.
So wird es gelöst: echte Kontrollkästchen und Auswahlfelder verwenden, den gewählten Zustand vorlesbar machen und nach dem Filtern ansagen, wie viele Produkte übrig sind.

Produktfotos

Produktfotos enthalten viele wichtige Informationen für die Kaufentscheidung. Sie zeigen je nach Produktart den Stil, die Farbe, die Größe, Funktionen und weitere Eigenschaften. Blinden Nutzern wird bei Produktfotos oft nur „Bild“ oder „Grafik“ vorgelesen. Nutzer mit sehr schwacher Internetverbindung bekommen die Bilder sehr verzögert angezeigt oder sie haben große Grafiken ganz deaktiviert, damit die Seite überhaupt zeitnah lädt. Diesen Menschen fehlen dann die Informationen für die Kaufentscheidung, wenn es keine detaillierte Produktbeschreibung gibt oder sie nur eine Übersichtsseite mit Bildern verschiedener Produkte durchstöbern. Diese potenziellen Kunden sind dadurch verunsichert und neigen eher dazu, den Kaufprozess abzubrechen.
So wird es gelöst: Man fügt einfach einen sogenannten Alternativtext zum Bild hinzu. Dieser wird von Vorleseprogrammen blinder Nutzer erkannt und wird auch als Platzhalter für Bilder angezeigt, wenn diese aus technischen Gründen nicht geladen werden. Die Alternativtext-Funktion gibt es in vielen Onlineshop-Systemen, ist aber oft versteckt oder Ihren Mitarbeitern nicht bekannt. Gerne schulen wir Ihr Team darin, barrierefreie Bildbeschreibungen in Ihrem Shopsystem einzupflegen.

Wie gute Alternativtexte für Produktbilder aussehen, zeigt unser Ratgeber Alternativtexte richtig schreiben.

Produktvideos

Bei einem meiner Vorträge habe ich das Produktvideo eines großen internationalen Projektmanagement-Tools abgespielt und das Publikum gebeten, nicht auf die Leinwand zu schauen oder die Augen zu schließen. Sie nahmen nur Hintergrundmusik wahr und wussten nicht, welches Produkt hier beworben werden sollte. Genau so geht es Menschen, die entweder schlecht sehen oder die das Video im Hintergrund anhören. Ein anderes Problem sind fehlende Untertitel für Menschen, die schlecht hören. Sie sehen, wenn jemand spricht, aber können die gesprochenen Informationen nicht oder nur bruchstückhaft erfassen. Der Werbe-Effekt eines teuer produzierten Produktvideos verpufft.
Die Lösung: Video-Hoster wie YouTube oder Vimeo bieten automatische Untertitel an. Schalten Sie diese auf jeden Fall ein. Diese Untertitel sind nicht immer 100 % genau, aber für Menschen mit Hörproblemen (oder Geräten mit abgeschaltetem Sound) ist es eine große Hilfe. Prüfen und korrigieren Sie die automatischen Untertitel, denn nur korrekte Untertitel erfüllen die Anforderungen. Sorgen Sie für genug gesprochenen Inhalt, damit blinde und sehbehinderte Menschen (oder alle, die das Video nur hören statt schauen) wissen, worum es geht.

Symbol-Schaltflächen

Ist bei Ihnen der Warenkorb nur ein Einkaufswagen-Symbol? Blinde Nutzer hören nur „anklickbare Schaltfläche“ und unerfahrene Nutzer wissen vielleicht nicht, welche Funktion sich dahinter verbirgt. Diese Nutzer legen also Dinge in den Warenkorb, können ihn aber nicht aufrufen und den Kauf so nicht abschließen. Das Gleiche gilt für Symbole wie ein + für „zum Warenkorb hinzufügen“ oder ähnliche Schaltflächen. Dieses Barrierefreiheits-Problem ist ein stiller Umsatz-Stopper für Onlineshops.
So wird es behoben: Lassen Sie diese Symbole mit einem zugänglichen Namen versehen, etwa einem für Screenreader hinterlegten Text (aria-label) oder, noch besser, einer sichtbaren Beschriftung wie „Warenkorb“. Das übernimmt ein Programmier-Dienstleister wie wir. Das Ergebnis: Mehr erfolgreiche Kaufabschlüsse in Ihrem Onlineshop.

Warenkorb

Im Warenkorb scheitern viele an unbeschrifteten Mengenfeldern und an Schaltflächen wie einem Papierkorb-Symbol ohne Namen. Ändert sich der Gesamtpreis, ohne dass das angesagt wird, bemerkt man es mit Screenreader nicht.
So wird es gelöst: Mengenfelder und Schaltflächen eindeutig benennen, etwa „Blaue Tasse aus dem Warenkorb entfernen“, und Änderungen als Statusmeldung ausgeben.

Checkout und Formulare

Im Bestellprozess entscheidet sich, ob aus dem Interesse ein Kauf wird. Typische Barrieren sind Felder ohne sichtbare Beschriftung, Fehlermeldungen, die ein Feld nur rot markieren, ohne zu sagen, was falsch ist, Zeitlimits und Captchas mit Bilderrätseln.
So wird es gelöst: Felder beschriften und für das automatische Ausfüllen kennzeichnen, Fehler im Text erklären und Korrekturen vorschlagen, Angaben wie die Lieferadresse nicht doppelt verlangen (WCAG-Kriterium 3.3.7) und auf Rätsel-Captchas verzichten. Mehr Praxistipps finden Sie in unserem Beitrag Barrierefreie Formulare.

Zahlung

Zahlungsarten werden oft über Dienste von Drittanbietern eingebunden, als eingebettetes Fenster oder per Weiterleitung. Auch dieser Schritt gehört zum Bestellprozess und muss bedienbar sein.
So wird es gelöst: Testen Sie jede Zahlungsart mit der Tastatur und mit Vergrößerung, fragen Sie Ihren Zahlungsdienstleister nach Informationen zur Barrierefreiheit und bieten Sie mehrere Zahlungsarten an, damit es eine Alternative gibt.

Checkliste: Ist Ihr Onlineshop barrierefrei?

• Alle Produktbilder haben Alternativtexte, die Farbe, Form oder Besonderheiten nennen.
• Suchfeld, Filter und Sortierung lassen sich mit der Tastatur bedienen.
• Symbol-Schaltflächen wie Warenkorb, Merkliste oder Lupe haben einen vorlesbaren Namen.
• Der Tastaturfokus ist auf jeder Seite sichtbar, auch im Checkout.
• Texte, Preise und Schaltflächen haben ausreichend Kontrast, für normalen Text mindestens 4,5 : 1 (Farbkontrast prüfen).
• Der Shop lässt sich auf 400 % vergrößern, ohne dass Inhalte abgeschnitten werden.
• Alle Formularfelder sind sichtbar beschriftet, Fehlermeldungen erklären die Korrektur.
• Der Bestellprozess hat keine Zeitlimits, oder man kann sie verlängern.
• Es gibt keine Bilderrätsel-Captchas ohne barrierefreie Alternative.
• Produktvideos haben geprüfte Untertitel.
• Jede Zahlungsart lässt sich ohne Maus abschließen.
• Die Informationen zur Barrierefreiheit nach BFSG sind veröffentlicht (Muster).

Wie Sie diese Punkte selbst testen, zeigt unsere Checkliste zum Selbsttest in zehn Schritten.

Sie wollen einen barrierefreien Onlineshop? Sprechen Sie mit uns

Wir überprüfen den für Endkunden zugänglichen Bereich (das sogenannte Frontend) Ihres Shops auf verschiedene Aspekte der digitalen Barrierefreiheit und lösen die gefundenen Barrieren für Sie oder schulen Ihr Team im Erstellen barrierefreier Produkt-Listings.

Wir arbeiten in Ihrem bestehenden Shopsystem und setzen keine Overlay-Werkzeuge ein. Mehr zu unseren Leistungen: Barrierefreiheit prüfen lassen und Website barrierefrei machen.

Häufige Fragen zum barrierefreien Onlineshop

Gilt das BFSG auch für kleine Onlineshops?

Ein Onlineshop gilt als Dienstleistung. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind deshalb ausgenommen. Wer über diesen Grenzen liegt, muss die Anforderungen erfüllen. Auch ausgenommene Shops können mit Barrierefreiheit Kundschaft halten, die sonst abspringt.

Reicht ein Barrierefreiheits-Plugin für meinen Shop?

Nein. Plugins, die eine Toolbar über den Shop legen, beheben die Ursachen im Code nicht. Unbeschriftete Schaltflächen oder ein Checkout ohne Tastaturbedienung bleiben bestehen. Mehr dazu in unserem Beitrag Warum Toolbars nicht reichen.

Was kostet es, einen Onlineshop barrierefrei zu machen?

Das hängt vor allem vom Shopsystem, vom Theme und von der Zahl der Barrieren ab. Barrieren in Vorlagen wie Produktseite oder Checkout beheben wir einmal für alle Produkte. Fehlende Alternativtexte stecken dagegen in jedem einzelnen Produkt, hier kann Ihr Team nach einer Schulung selbst nacharbeiten. Nach einem kostenlosen Erstgespräch und einer Prüfung erhalten Sie ein Angebot.