Barrierefreier Online-Shop: Die komplette Checkliste

Wenn du einen Online-Shop betreibst, musst du seit Juni 2025 BFSG-konform sein. Dieser Artikel ist deine praxisorientierte Checkliste — Schritt für Schritt, sortiert nach Priorität. Hak einfach ab, was bei dir schon stimmt, und arbeite den Rest der Reihe nach ab.

📅 09.04.2026 ✍️ Joshua Kantner ⏱ 9 Min Lesezeit
Hinweis: Diese Checkliste fokussiert sich auf die häufigsten Problem-Bereiche speziell in Online-Shops. Für eine vollständige WCAG 2.1 Level AA Prüfung gibt es 50+ Kriterien — die relevanten davon sind hier zusammengefasst.

🏷️ 1. Produktseiten Hohe Priorität

Alle Produktbilder haben aussagekräftige alt-Texte Nicht "Bild 1", sondern "Blaues Herrenhemd mit Button-Down-Kragen und kurzen Ärmeln, Vorderansicht". Dekorative Deko-Bilder bekommen alt="".
Produkttitel als <h1> ausgezeichnet Jede Produktseite hat genau EINE H1, und das ist der Produktname.
Preis ist semantisch erkennbar Nicht nur visuell groß, sondern auch für Screenreader klar als "Preis" auszeichen-bar. Schema.org-Markup itemprop="price" hilft.
Varianten-Auswahl (Größe, Farbe) ist per Tastatur bedienbar Dropdown-Menus und Radio-Buttons müssen per Pfeiltasten navigierbar sein. Custom-Dropdowns brauchen ARIA-Attribute.
Farbauswahl nicht NUR durch Farbe Farbswatches brauchen auch einen Namen ("Rot", "Marineblau") — für Farbblinde unverzichtbar.
"In den Warenkorb"-Button als echter Button <button> oder <input type="submit">, nicht <div onclick>. Muss per Enter und Leertaste auslösbar sein.
Lagerbestand-Anzeige ist für Screenreader erkennbar "Auf Lager" nicht nur als grünes Häkchen-Icon, sondern auch als Text oder aria-label.

🛒 2. Warenkorb Hohe Priorität

Jede Zeile im Warenkorb ist semantisch als Tabelle oder Liste strukturiert Nicht einfach div-Chaos, sondern <table> mit <thead> und <tbody> ODER <ul> mit klaren Labels.
Mengen-Eingabefelder haben Labels "Menge: 2" statt nur "2". Label per <label for="qty-123"> oder aria-label.
"Entfernen"-Button hat eindeutige Beschriftung Nicht nur ein 🗑 Icon, sondern aria-label="Produkt XY aus Warenkorb entfernen".
Änderungen werden für Screenreader angekündigt Wenn sich die Summe ändert nach Mengenänderung: aria-live="polite" auf der Summen-Anzeige.
Gutschein-Eingabefeld hat Label und Fehlermeldung "Gutscheincode eingeben" als Label, bei Fehler klare Meldung ("Gutscheincode ungültig. Bitte Schreibweise prüfen.").

💳 3. Checkout & Zahlung Hohe Priorität

Alle Formularfelder haben sichtbare Labels NICHT nur Placeholder! Placeholder verschwinden beim Tippen. <label> ist Pflicht.
Pflichtfelder sind markiert Asterisk (*) + aria-required="true". Beides, nicht nur eins.
Eingabefelder haben semantische Types type="email", type="tel", type="number" — hilft bei Autofill und mobilen Tastaturen.
Fehlermeldungen sind klar und konkret "Postleitzahl muss 5 Ziffern haben" statt "Ungültige Eingabe". Fehlermeldung muss aria-describedby mit dem Eingabefeld verknüpfen.
Zahlungsmethoden sind als Gruppe auszeichen <fieldset> mit <legend>Zahlungsmethode wählen</legend>, einzelne Optionen als Radio-Buttons.
"Bestellung absenden"-Button ist klar beschriftet Nicht "Weiter", sondern "Jetzt kaufen" oder "Zahlungspflichtig bestellen" (auch aus rechtlichen Gründen in DE vorgeschrieben).
Bestätigungs-Seite bestätigt den erfolgreichen Kauf auch für Screenreader "Ihre Bestellung wurde erfolgreich aufgegeben. Bestellnummer 12345" — mit role="status" oder aria-live.

🧭 4. Navigation & Suche Mittlere Priorität

Hauptnavigation ist als <nav> ausgezeichnet Nicht <div class="nav">. Mit aria-label="Hauptnavigation".
Skip-Link zum Hauptinhalt Ein versteckter Link am Seitenanfang: "Zum Inhalt springen" — erscheint beim ersten Tab-Druck.
Dropdown-Menüs per Tastatur bedienbar Auch per Pfeiltasten navigierbar. Niemals :hover-only — auch per Fokus.
Suchfeld hat Label "Produkte durchsuchen" als Label, entweder sichtbar oder per aria-label.
Breadcrumbs sind semantisch <nav aria-label="Breadcrumb"><ol>.... Mit aria-current="page" auf dem aktuellen Element.
Filter im Kategorie-Listing sind für Screenreader zugänglich Jeder Filter (Preis, Farbe, Größe) ist eine gelabelte Gruppe. Änderungen werden angekündigt.

🌐 5. Globale Seitenelemente Mittlere Priorität

Sprach-Definition im HTML <html lang="de"> im Opening-Tag. Bei mehrsprachigen Shops entsprechend dynamisch.
Farbkontrast mindestens 4.5:1 Für normalen Text. Für große Texte (ab 18pt) reicht 3:1. Prüfen mit Kontrast-Checker.
Fokus-Indikator sichtbar Wenn Nutzer durch die Seite tabben, muss deutlich sichtbar sein wo der Fokus gerade ist. Kein outline: none ohne Ersatz!
Seite ist responsiv auf mobilen Geräten Bis 320px Breite nutzbar, Zoom auf 200% ohne horizontales Scrollen möglich.
Keine Zeitlimits im Checkout Oder mindestens eine Verlängerungs-Option. Session-Timeouts von 15 Min sind OK wenn vorher gewarnt wird.
Cookie-Banner ist selbst barrierefrei Oft übersehen: Der Cookie-Consent muss selbst WCAG-konform sein — mit korrekter Tastatur-Bedienung und Fokus.

📄 6. Pflichtangaben & Dokumentation Niedrige Priorität (aber Pflicht!)

Erklärung zur Barrierefreiheit veröffentlicht Vom BFSG vorgeschrieben. Mindestens: Stand (konform / teilweise / nicht konform), bekannte Barrieren, Kontakt für Meldungen, Datum der Prüfung.
Link zur Erklärung im Footer sichtbar Neben Impressum und Datenschutz. "Erklärung zur Barrierefreiheit" als Link-Text.
Feedback-Mechanismus für Barrieren E-Mail oder Formular wo Nutzer Barrieren melden können. Muss in der Erklärung genannt werden.
Schlichtungsverfahren-Hinweis Hinweis auf die Schlichtungsstelle nach BFSG (Schlichtungsstelle beim Bundesministerium für Arbeit und Soziales).

Shop-System-spezifische Hinweise

WooCommerce (WordPress)

WooCommerce selbst ist grundsätzlich barrierefrei, ABER: Das hängt stark vom verwendeten Theme ab. Viele kommerzielle Themes haben BFSG-Probleme. Empfehlung:

Shopify

Shopify hat native Accessibility-Features, die Standardthemes sind WCAG-kompatibel. Problempunkte entstehen oft durch:

Magento / Shopware

Komplexere Systeme mit vielen Erweiterungs-Möglichkeiten. Hier sollte eine professionelle Accessibility-Audit durchgeführt werden, bevor der Shop live geht. Die Implementierungsqualität variiert stark je nach Agentur.

Eigenentwickelte Shops

Hier liegt die volle Verantwortung bei dir. Ein Developer ohne Accessibility-Erfahrung produziert fast immer Verstöße. Empfehlung: Developer auf WCAG schulen oder externe Audit.

🎯 Wie steht dein Shop da?

Scanne deine Shop-Startseite oder eine Produktseite kostenlos mit bf-check.de. Das Tool prüft die meisten Punkte dieser Checkliste automatisch und zeigt dir konkrete Probleme.

Jetzt scannen → bf-check.de

Prioritäts-Ranking: Womit solltest du anfangen?

Wenn du nicht alles auf einmal schaffen kannst, hier die Reihenfolge nach Nutzen:

  1. alt-Texte bei allen Produktbildern (30 Min-2h je nach Produktanzahl)
  2. Formular-Labels im Checkout (30 Min)
  3. lang="de" im HTML (30 Sekunden)
  4. Farbkontrast prüfen und fixen (1-2 Stunden)
  5. Skip-Link + Fokus-Indikator (30 Min)
  6. Erklärung zur Barrierefreiheit veröffentlichen (1 Stunde)
  7. Tastatur-Bedienbarkeit testen und fixen (2-4 Stunden)
  8. Alle anderen Punkte der Checkliste (je nach Shop-Größe 4-16 Stunden)

Die ersten 6 Punkte entfernen bereits ~80% des Abmahnrisikos. Das sind 3-5 Stunden Arbeit, die du entweder selbst oder mit einer Webagentur für 300-800 € umsetzen kannst.

📊 Starte deinen Check jetzt

30 Sekunden, kostenlos, keine Anmeldung. Du weißt sofort welche Punkte bei dir schon stimmen und wo du ansetzen musst.

bf-check.de öffnen

Weiterführende Artikel

→ BFSG 2025: Der komplette Leitfaden für Webseitenbetreiber → Die 10 häufigsten BFSG-Verstöße und wie du sie behebst → WCAG 2.1 einfach erklärt — in 5 Minuten → Abmahnrisiko BFSG: Was kostet mich ein Verstoß wirklich?