Ratgeber

BFSG-Checkliste für Online-Shops: 15 Punkte, die Sie heute prüfen können

Veröffentlicht am 2. Oktober 2026 · Lesezeit ca. 6 Minuten

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Online-Shops, die an Verbraucher verkaufen, müssen ihre Seiten grundsätzlich so gestalten, dass auch Menschen mit Seh-, Hör-, Motorik- oder Kognitionseinschränkungen bestellen können. Die technische Grundlage ist die Norm EN 301 549, die sich an den WCAG (Web Content Accessibility Guidelines) orientiert.

Diese Checkliste hilft Ihnen, Ihren Shop selbst zu prüfen. Sie brauchen dafür eine Stunde, eine Tastatur und die Bereitschaft, die eigene Seite einmal ohne Maus zu benutzen. Sie ersetzt keine vollständige Prüfung und keine Rechtsberatung. Sie zeigt aber, wo die größten Probleme meist liegen.

Vorab: Gilt das BFSG für Sie?

Das BFSG betrifft Dienstleistungen im elektronischen Geschäftsverkehr, also auch Online-Shops für Verbraucher. Shops, die sich ausschließlich an Unternehmer richten (reine B2B-Shops), fallen grundsätzlich nicht darunter, wenn der Ausschluss von Verbrauchern klar erkennbar und tatsächlich umgesetzt ist. Für Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme gibt es für Dienstleistungen eine Ausnahme (§ 3 Abs. 3 BFSG), nicht aber für Produkte. Gemeint ist die Unternehmensgröße, nicht die umsatzsteuerliche Kleinunternehmerregelung nach § 19 UStG: Wer keine Umsatzsteuer berechnet, ist deshalb nicht automatisch vom BFSG ausgenommen. Ob sie in Ihrem Fall greift, sollten Sie prüfen lassen. Mehr dazu in unseren häufigen Fragen.

Inhalte und Bilder

1. Alle informativen Bilder haben einen Alternativtext

Produktfotos, Banner mit Text, Logos mit Link: Jedes Bild, das etwas mitteilt, braucht ein alt-Attribut mit einer kurzen Beschreibung. Rein dekorative Bilder bekommen ein leeres alt="". Fehlende Alternativtexte sind der häufigste Befund in Shops. Ein Beispiel: „Wanderrucksack Alpin 35 Liter, dunkelgrün, Frontansicht“ statt „IMG_4021.jpg“.

2. Text hat ausreichend Kontrast

Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1. Typische Problemstellen sind hellgraue Streichpreise, Platzhaltertexte in Formularen und weiße Schrift auf Produktfotos. Mit dem kostenlosen Colour Contrast Analyser oder den Entwicklerwerkzeugen Ihres Browsers messen Sie das in Sekunden.

3. Information steckt nie nur in der Farbe

„Pflichtfelder sind rot“ oder „ausverkaufte Größen sind grau“ reicht nicht. Ergänzen Sie ein Sternchen mit Erklärung, einen Text wie „nicht verfügbar“ oder ein Symbol mit Textalternative.

4. Der Text lässt sich vergrößern

Zoomen Sie im Browser auf 200 % und dann auf 400 %. Es darf kein Inhalt abgeschnitten werden, und Sie sollten nicht horizontal scrollen müssen. Prüfen Sie außerdem, dass Ihr viewport-Tag das Zoomen nicht sperrt (user-scalable=no ist tabu).

Bedienung und Navigation

5. Alles ist per Tastatur erreichbar

Legen Sie die Maus weg. Mit der Tab-Taste müssen Sie jeden Link, Button und jedes Formularfeld erreichen, mit Enter oder Leertaste auslösen und mit Umschalt+Tab zurückgehen können. Häufige Fehler: Menüs, die nur bei Maus-Hover aufgehen, Filter als <div> statt <button> und Galerien ohne Tastatursteuerung.

6. Der Fokus ist immer sichtbar

Beim Tabben muss klar erkennbar sein, wo Sie sich befinden. Das Entfernen des Fokusrahmens mit outline: none ohne Ersatz ist ein Klassiker. Nach WCAG 2.2 darf der Fokus außerdem nicht von festen Elementen wie Cookie-Bannern oder mitlaufenden Headern verdeckt werden.

7. Es gibt einen Sprunglink zum Inhalt

Der erste Tab-Stopp sollte „Zum Inhalt springen“ sein. Sonst müssen Tastaturnutzer bei jeder Seite das gesamte Menü durchtabben.

8. Die Seitenstruktur stimmt

Jede Seite hat genau eine h1, die Überschriften folgen logisch aufeinander (h2 unter h1, h3 unter h2) und die Bereiche sind mit header, nav, main und footer ausgezeichnet. Screenreader-Nutzer navigieren über diese Struktur.

9. Links und Buttons haben verständliche Namen

„Hier klicken“ und „Mehr“ sind ohne Kontext nutzlos. Ein reines Warenkorb-Icon braucht einen Namen, etwa aria-label="Warenkorb, 2 Artikel". Prüfen Sie vor allem Icons für Suche, Menü, Konto und Social Media.

Formulare und Checkout

10. Jedes Formularfeld hat ein sichtbares Label

Ein Platzhalter ersetzt kein Label, weil er beim Tippen verschwindet. Verknüpfen Sie <label for="..."> mit der id des Felds. Das gilt auch für Suche, Newsletter-Anmeldung und Rabattcode.

11. Fehlermeldungen sind verständlich und werden angekündigt

Wenn eine Eingabe falsch ist, nennen Sie das Feld und den Grund im Text („E-Mail-Adresse fehlt das @-Zeichen“). Zeigen Sie Fehler nicht nur mit einem roten Rand an. Damit Screenreader sie vorlesen, setzen Sie die Meldung in einen Bereich mit role="alert" oder verschieben den Fokus auf die Fehlerübersicht.

12. Der Checkout funktioniert ohne Maus und ohne Zeitdruck

Bestellen Sie einmal komplett mit der Tastatur, inklusive Zahlungsart und Adressfeldern. Nach WCAG 2.2 sollten Nutzer außerdem schon eingegebene Daten nicht erneut eingeben müssen, und Sie sollten Passwortfelder so gestalten, dass Passwortmanager funktionieren (autocomplete-Attribute setzen).

13. Klickflächen sind groß genug

WCAG 2.2 verlangt für Bedienelemente grundsätzlich eine Mindestgröße von 24 × 24 CSS-Pixeln, mit Ausnahmen etwa für Links im Fließtext. Zu kleine Schließen-Kreuze, Mengen-Plus/Minus und eng gesetzte Footer-Links fallen hier auf. Besser sind 44 × 44 Pixel.

Technik und Rechtliches

14. Die Sprache und der Titel sind gesetzt

Im <html>-Tag steht lang="de", jede Seite hat einen eindeutigen <title>. Das klingt banal, ist aber Voraussetzung dafür, dass Screenreader korrekt aussprechen. Bewegte Inhalte wie Karussells müssen sich pausieren lassen.

15. Es gibt eine Barrierefreiheitserklärung

Gilt das BFSG für Ihren Shop, verlangt es, dass Sie Verbraucher informieren, wie Ihre Dienstleistung die Anforderungen erfüllt. Üblich ist eine Seite „Barrierefreiheit“ im Footer. Einen Entwurf erstellen Sie mit unserem kostenlosen Generator. Schreiben Sie nur hinein, was stimmt.

Was Software nicht findet

Automatische Werkzeuge wie axe-core finden etwa 30 bis 50 % der Barrieren. Sie erkennen fehlende Alternativtexte und schlechte Kontraste zuverlässig. Sie erkennen nicht, ob ein Alternativtext sinnvoll ist, ob die Tab-Reihenfolge logisch ist oder ob ein Text verständlich formuliert ist. Deshalb gehören Tastaturtest und Screenreader-Stichprobe immer dazu. Zum Einstieg reichen die kostenlosen Screenreader NVDA (Windows) oder VoiceOver (macOS und iOS).

Nächste Schritte

1. Prüfen Sie die Startseite mit unserem kostenlosen Schnellcheck und sehen Sie die häufigsten Barrieren in 30 Sekunden.
2. Gehen Sie die Punkte 5, 6 und 12 mit der Tastatur durch. Hier entscheidet sich, ob Kunden überhaupt bestellen können.
3. Arbeiten Sie die Befunde nach Schwere ab: kritisch zuerst.
4. Veröffentlichen Sie Ihre Barrierefreiheitserklärung.

Wenn Sie eine priorisierte Liste mit Code-Fixes für Ihr Shopsystem möchten, finden Sie diese im Website-Report für 149 €.

Dieser Ratgeber ist keine Rechtsberatung. Für rechtliche Fragen wenden Sie sich an eine Anwältin oder einen Anwalt.