BFSG-Checkliste für Online-Shops: sofort umsetzbar

bfsg checkliste für online shops: Prioritäten, typische WCAG-Fehler, Dokumentation und Monitoring - damit Sie bis Juni 2026 sicher umsetzen.

Wer im Shop gerade Preise pflegt, Kampagnen baut und den Checkout optimiert, merkt Barrieren oft erst dann, wenn Beschwerden kommen - oder wenn die Rechtsabteilung (oder ein Wettbewerber) unangenehme Fragen stellt. Das BFSG macht Barrierefreiheit für viele Online-Shops nicht zur "Nice-to-have"-Disziplin, sondern zur planbaren Pflicht. Die gute Nachricht: Sie brauchen kein WCAG-Studium. Sie brauchen eine Checkliste, die typische Risiken in eine klare Reihenfolge bringt - und die Umsetzung so dokumentiert, dass sie im Ernstfall belastbar ist.

Was die BFSG-Checkliste leisten muss (und was nicht)

Eine bfsg checkliste für online shops ist keine Sammlung von 80 "Best Practices". Sie ist ein Arbeitsplan: Was prüfen wir zuerst, was bringt schnell Risiko raus, und wo brauchen wir Entwicklungszeit? Entscheidend ist außerdem die Nachweisfähigkeit. Es hängt nicht nur davon ab, ob etwas "irgendwie barrierefrei" ist, sondern ob Sie strukturiert prüfen, priorisieren, fixen und den Fortschritt belegen können.

Die Checkliste unten ist deshalb praxisnah aufgebaut: zuerst die Bereiche mit hoher Nutzerwirkung und hohem Abmahnpotenzial (Startseite, Navigation, Suche, Produktdetail, Warenkorb, Checkout, Kundenkonto), dann Inhalte und Medien, dann organisatorische Punkte wie Erklärung, Feedbackkanal und Prozess.

Schritt 1: Geltungsbereich klären - damit Sie nichts falsch planen

Bevor Sie Tickets schreiben, klären Sie zwei Dinge: Fallen Sie unter das BFSG (und ab wann), und welche Shop-Strecken sind "wesentlich"? Für die Praxis heißt das: Nicht nur die Startseite scannen, sondern den Kaufprozess inklusive Formularen und Bestätigungsseiten.

Wenn Sie mehrere Länder- oder Marken-Shops betreiben, gilt: Es kommt auf das Angebot in Deutschland und die Zielgruppe an. "It depends" ist hier real - aber als Betreiber sollten Sie im Zweifel so planen, als ob die kaufrelevanten Strecken barrierefrei sein müssen. Das ist fast immer der wirtschaftlich sinnvollere Weg als später hektisch nachzubessern.

Schritt 2: Shop-Strecken priorisieren - zuerst Checkout, dann Content

Barrieren im Blog sind ärgerlich. Barrieren im Checkout sind riskant. Ihre Reihenfolge sollte so aussehen: erst alles, was Nutzer zwingend brauchen, um zu kaufen oder zu kontaktieren, dann alles, was "nur" informiert.

BFSG-Checkliste für Online-Shops: diese Seiten zuerst

Prüfen Sie mindestens:

• Startseite (Navigation, Suchfeld, Teaser-Kacheln)
• Kategorie/Listing (Filter, Sortierung, Pagination)
• Produktdetail (Galerie, Varianten, Preisangaben, CTA)
• Warenkorb (Mengenänderung, Entfernen, Hinweise)
• Checkout (Adresse, Versand, Zahlung, Fehlertexte)
• Login/Registrierung und Passwort-Reset
• Kontakt/Service (Formulare, Live-Chat, Telefonnummern)

Wenn Sie nur begrenzte Kapazität haben, starten Sie mit Checkout und Login. Dort entstehen die meisten "harten" Abbrüche.

Schritt 3: Tastaturbedienbarkeit sicherstellen - ohne Maus muss alles gehen

Viele BFSG-Probleme sind keine Designfragen, sondern Bedienfragen. Der schnelle Test: Legen Sie die Maus weg und navigieren Sie nur mit Tab, Shift+Tab, Enter, Leertaste und Pfeiltasten.

Achten Sie auf echte Blocker: Kommt man in Menüs hinein und wieder heraus? Ist ein Filter-Overlay per Tastatur schließbar? Springt der Fokus sichtbar mit? Wenn der Fokus unsichtbar ist, wirkt der Shop "tot" - und ist für Tastaturnutzer faktisch nicht bedienbar.

Trade-off: Manche animierten Mega-Menüs sehen gut aus, sind aber schwer barrierefrei. Dann ist eine vereinfachte, klar fokussierbare Variante häufig die bessere Entscheidung als eine "perfekte" Animation, die Nutzer aussperrt.

Schritt 4: Fokus, Struktur, Semantik - damit Screenreader nicht raten müssen

Barrierefreiheit lebt von Struktur. Screenreader lesen nicht "Design", sie lesen Überschriften, Landmarken, Buttons, Links und Formularfelder.

Prüfen Sie:

• Gibt es genau eine H1 pro Seite und sinnvolle H2/H3-Struktur?
• Sind Buttons echte Buttons und Links echte Links - oder nur klickbare Divs?
• Haben Icon-Buttons (Lupe, Warenkorb, Menü) einen verständlichen Namen?

Ein häufiger Fehler im E-Commerce: "Mehr erfahren"-Links ohne Kontext. Für Screenreader-Nutzer klingt die Seite dann wie ein Dutzend identischer Links. Besser ist "Mehr erfahren: Versandkosten" oder gleich ein konkreter Linktext.

Schritt 5: Formulare und Fehlermeldungen - der Checkout entscheidet

Formulare sind das Herz des Shops - und die häufigste Fehlerquelle. Besonders kritisch sind Pflichtfelder, Fehlermeldungen und Validierung.

Ihre Checkliste:

• Jedes Eingabefeld hat ein sichtbares Label (nicht nur Placeholder).
• Pflichtfelder sind eindeutig gekennzeichnet.
• Fehlermeldungen sind verständlich, nahe am Feld, und sagen, wie man es löst.
• Der Fokus springt bei Fehlern dorthin, wo gehandelt werden muss.

"Bitte prüfen Sie Ihre Eingaben" ist praktisch wertlos. "Postleitzahl muss 5 Ziffern haben" ist umsetzbar. Und: Wenn Fehlermeldungen nur farblich markiert sind, fällt das bei Farbsehschwäche durch.

Schritt 6: Kontraste und Farbe - Design bleibt möglich, aber nicht beliebig

Kontrast ist kein Stilpolizei-Thema, sondern Lesbarkeit. Prüfen Sie Text auf Hintergründen, Buttons, Preis- und Rabatt-Badges, sowie Zustände wie Hover/Active/Disabled.

Achten Sie auf die Klassiker:

• Hellgrauer Text auf weißem Hintergrund in Produktlisten
• „Disabled“-Buttons, die kaum erkennbar sind
• Fehlermeldungen nur in Rot ohne zusätzliche Kennzeichnung

Es hängt vom Designsystem ab, wie schnell Sie das lösen. Wenn Sie ein zentrales Design-Token-System haben, sind Kontrastfixes oft in Stunden machbar. Wenn jede Seite eigene CSS-Sonderfälle hat, dauert es länger - dann lohnt sich zuerst das Fixen der häufigsten Komponenten (Button, Input, Hinweisbox).

Schritt 7: Bilder, Produktgalerien und Alternativtexte - pragmatisch statt perfekt

Im Shop gibt es viele Bilder. Nicht jedes braucht einen Roman als Alt-Text. Entscheidend ist die Funktion: Was muss der Nutzer verstehen, um zu kaufen?

• Produktbilder: Alt-Text kurz und beschreibend (Produkt + wichtiges Merkmal).
• Dekorative Bilder: leeres Alt (damit Screenreader sie überspringen).
• Icons: Wenn sie Bedeutung tragen, brauchen sie einen Namen.

Für Produktgalerien gilt zusätzlich: Sind Zoom, Slider und Thumbnails per Tastatur bedienbar? Und wird der Bildwechsel Screenreadern verständlich angekündigt?

Schritt 8: Dynamische Inhalte, Pop-ups, Consent - hier verstecken sich harte Verstöße

Cookie-Banner, Newsletter-Pop-ups, Chat-Widgets und Quick-View-Overlays sind typische BFSG-Risikoquellen. Der Kern ist immer derselbe: Fokus-Management und verständliche Beschriftung.

Prüfen Sie:

• Öffnet ein Modal und bleibt der Fokus darin (Fokusfalle)?
• Kann man es per Tastatur schließen?
• Wird der Hintergrund für Screenreader korrekt "ausgeblendet"?

Wenn Ihr Consent-Tool diese Basics nicht kann, wird es schnell teuer. Dann ist ein Toolwechsel manchmal günstiger als Workarounds - auch wenn das unbequem ist.

Schritt 9: PDFs, Rechnungen, E-Mails - nicht alles ist "Webseite", aber trotzdem relevant

Viele Shops senden PDFs (Rechnungen, Retourenscheine) oder nutzen Helpcenter-PDFs. Auch E-Mails (Bestellbestätigung, Passwort-Reset) müssen verständlich und nutzbar sein.

Pragmatische Priorität:

• Transaktionale E-Mails: klare Betreffzeilen, sinnvolle Linktexte, keine rein grafischen Buttons.
• PDFs: Wenn sie zwingend sind, sollten sie barrierearm sein. Wenn nicht zwingend, bieten Sie Alternativen (HTML-Ansicht im Konto).

Schritt 10: Erklärung zur Barrierefreiheit und Feedbackkanal - Compliance braucht Kommunikation

Eine technische Umsetzung ohne Kommunikationspunkt ist selten genug. Planen Sie eine gut auffindbare Erklärung zur Barrierefreiheit und einen Feedbackkanal ein, der wirklich funktioniert.

Wichtig ist weniger die perfekte Formulierung, sondern die Verlässlichkeit: Wer meldet Probleme? Wie schnell reagieren Sie? Wie dokumentieren Sie den Eingang und die Bearbeitung? Das reduziert Risiko, weil Sie zeigen können, dass Barrierefreiheit als Prozess betrieben wird.

Schritt 11: Dokumentation und Nachweise - das unterschätzte Sicherheitsnetz

Viele Teams fixen Dinge, aber niemand hält fest, was geprüft wurde. Im Ernstfall ist das verschenktes Geld.

Halten Sie fest:

• Prüfdatum und Umfang (welche Seiten/Strecken)
• gefundene Issues mit Priorität und Verantwortlichen
• Umsetzungsdatum und Re-Test-Ergebnis
• bekannte Einschränkungen und geplante Fix-Termine

Das ist nicht Bürokratie um der Bürokratie willen. Es ist Ihr Nachweis, dass Sie systematisch handeln.

Schritt 12: Kontinuierliches Monitoring - weil Shops sich ständig ändern

E-Commerce ist Release-getrieben. Neue Zahlungsart, neue Filterlogik, neues Theme-Update - und plötzlich ist ein Button nicht mehr fokussierbar. Deshalb ist Barrierefreiheit kein einmaliges Projekt.

Für die Praxis heißt das: Planen Sie wiederkehrende Checks nach Deployments und regelmäßige Scans über die wichtigsten URLs. Wenn Sie schnell einen Status-Check brauchen, kann ein automatisierter Scan in unter einer Minute schon die häufigsten technischen Baustellen sichtbar machen. CheckBarriere ist genau dafür gebaut: deutschsprachige, handlungsorientierte Reports mit Ampel-Logik, gekoppelt an WCAG 2.1 AA und BFSG - als Einstieg auch ohne Login für erste Klarheit.

Typische BFSG-Fallen im Shop-Alltag (die fast jeder übersieht)

Viele Probleme entstehen nicht im Kernshop, sondern in "Rand"-Features, die aber kaufentscheidend sind: Gutschein-Felder ohne Label, Captchas ohne Alternative, Produktbewertungen als unlesbare Sterne ohne Text, oder Filterchips, die nur per Maus entfernbar sind. Auch A/B-Testing kann Barrieren unbemerkt wieder einführen, weil Varianten nicht den gleichen Komponentenstandard nutzen.

Wenn Sie nur eine Regel mitnehmen: Alles, was Nutzer zum Kaufen zwingend anklicken, lesen oder ausfüllen müssen, bekommt zuerst Ihre Aufmerksamkeit - und danach einen festen Platz in Ihrem Release-Prozess.

Der praktische Ablauf: so wird aus der Checkliste ein Projekt

Setzen Sie sich ein kurzes Ziel: In 14 Tagen die Top-Strecken auf "grün/gelb" bekommen, nicht alles sofort perfekt machen. Starten Sie mit einem Ist-Check, priorisieren Sie Blocker (nicht bedienbar, nicht lesbar, Formular scheitert), fixen Sie komponentenbasiert, und testen Sie erneut.

Wenn Sie intern diskutieren, ob etwas "wirklich zählt": Entscheiden Sie aus Nutzerperspektive. Wenn ein Nutzer mit Tastatur oder Screenreader nicht kaufen kann, ist es kein Randthema. Es ist Umsatz und Risiko.

Am Ende fühlt sich BFSG-Umsetzung dann nicht wie ein unkalkulierbares Großprojekt an, sondern wie das, was gut geführte Shops ohnehin tun: systematisch prüfen, sauber dokumentieren, regelmäßig nachziehen - und damit nachts besser schlafen.