Ratgeber · Stand: 29.10.2026 · Mit KI-Unterstützung erstellt und von Hafenklick geprüft

BFSG-Checkliste für Shopify und WooCommerce: 21 Prüfpunkte nach WCAG 2.2

Hinweis: Dieser Ratgeber ist eine unverbindliche, technische Orientierung und keine Rechtsberatung. Ob und wie das BFSG für Ihr Unternehmen gilt, kann verbindlich nur eine Rechtsanwältin oder ein Rechtsanwalt klären.

Shopify und WooCommerce liefern solide Grundlagen, doch Barrieren entstehen meist durch Theme-Anpassungen, Apps, Plugins und Inhalte. Die folgende Checkliste orientiert sich an den Erfolgskriterien der WCAG 2.2 Stufe AA, auf die die europäische Norm EN 301 549 verweist. Sie ersetzt keine vollständige Prüfung, hilft Ihnen aber, die häufigsten Probleme selbst zu finden. Allgemeines zum Gesetz lesen Sie im Ratgeber Gilt das BFSG für meinen Shop?

So nutzen Sie die Liste: Gehen Sie die Punkte zuerst auf den Seiten durch, die für den Kauf entscheidend sind – Startseite, Kategorie, Produkt, Warenkorb und Checkout. Notieren Sie zu jedem Befund die Seite, das betroffene Element und wie stark er den Einkauf behindert. So entsteht schnell eine Prioritätenliste, die Sie oder Ihre Agentur abarbeiten können. Viele Punkte lassen sich direkt im Theme-Editor oder in den Plugin-Einstellungen beheben, ohne dass der Shop neu gebaut werden muss.

1. Bilder und Medien

  • Jedes Produktbild hat einen aussagekräftigen Alternativtext (Shopify: Medien → Alt-Text bearbeiten; WordPress: Mediathek → Alternativtext). Rein dekorative Bilder erhalten einen leeren Alternativtext.
  • Das Logo hat einen Alternativtext mit dem Shopnamen.
  • Videos haben Untertitel; Autoplay-Videos lassen sich anhalten (WCAG 1.2.2, 2.2.2).

2. Kontrast und Darstellung

  • Fließtext hat ein Kontrastverhältnis von mindestens 4,5:1, große Schrift mindestens 3:1 (WCAG 1.4.3). Achten Sie besonders auf graue Preise, Lieferhinweise und Text auf Bildern.
  • Buttons, Eingabefelder und Fokusrahmen heben sich mit mindestens 3:1 vom Hintergrund ab (WCAG 1.4.11).
  • Der Zoom auf dem Smartphone ist nicht gesperrt: Im Theme-Code darf im Meta-Tag „viewport“ weder „maximum-scale=1“ noch „user-scalable=no“ stehen (WCAG 1.4.4).
  • Bei 200 % Zoom und 320 Pixel Breite bleibt alles lesbar, ohne seitlich scrollen zu müssen (WCAG 1.4.10).

3. Tastatur und Fokus

  • Sie können den gesamten Kaufprozess nur mit Tab, Umschalt+Tab, Enter und Leertaste durchlaufen: Menü, Suche, Filter, Variantenauswahl, Warenkorb und Checkout (WCAG 2.1.1).
  • Der Fokus ist jederzeit sichtbar und wird nicht von Sticky-Headern oder Cookie-Bannern verdeckt (WCAG 2.4.7, 2.4.11).
  • Ein Link „Zum Inhalt springen“ steht am Seitenanfang (WCAG 2.4.1). Viele aktuelle Shopify-Themes bringen ihn bereits mit.
  • Pop-ups und Menü-Drawer lassen sich per Escape schließen, und der Fokus springt danach sinnvoll zurück.

4. Buttons, Links und Bedienelemente

  • Icon-Buttons (Warenkorb, Wunschliste, Slider-Pfeile, Schnellkauf) haben einen zugänglichen Namen, zum Beispiel per aria-label (WCAG 4.1.2). In unseren Stichproben war das eine der häufigsten Lücken.
  • Farbauswahl-Punkte für Varianten sind beschriftet („Silber“, „Blau“), nicht nur farbig.
  • Klickflächen sind mindestens 24 × 24 Pixel groß oder haben ausreichend Abstand (WCAG 2.5.8, neu in WCAG 2.2). Achten Sie auf Slider-Punkte und Footer-Links.

5. Formulare und Checkout

  • Jedes Feld hat eine sichtbare Beschriftung, nicht nur einen Platzhaltertext (WCAG 1.3.1, 3.3.2).
  • Fehlermeldungen nennen das Feld und die Lösung in Textform, nicht nur durch rote Farbe (WCAG 3.3.1, 3.3.3).
  • Bekannte Angaben müssen nicht doppelt eingegeben werden, etwa die Lieferadresse als Rechnungsadresse (WCAG 3.3.7).
  • Anmeldung und Bezahlung funktionieren ohne kognitive Rätsel wie schwer lesbare CAPTCHAs (WCAG 3.3.8).

6. Struktur und Sprache

  • Die Seite ist als Deutsch ausgezeichnet (lang="de"). Bei übersetzten Themes prüfen Sie auch englische Reste wie „Skip to content“ (WCAG 3.1.1).
  • Jede Seite hat genau eine aussagekräftige Hauptüberschrift (h1); Abschnitte folgen logisch mit h2 und h3.
  • Animationen respektieren die Systemeinstellung „Bewegung reduzieren“.

7. Apps, Plugins und Overlays

Prüfen Sie Bewertungs-Widgets, Chat-Fenster, Cookie-Banner und Newsletter-Pop-ups gesondert – sie stammen oft von Drittanbietern. Sogenannte Overlay-Plugins, die per Knopfdruck Barrierefreiheit versprechen, ersetzen keine Korrektur im Code; die zugrunde liegenden Probleme bleiben bestehen.

8. Dokumentation

Halten Sie fest, was Sie geprüft und behoben haben, und veröffentlichen Sie Informationen zur Barrierefreiheit Ihres Angebots (§ 14 BFSG mit Anlage 3). Wie ein priorisierter Befundbericht aussehen kann, zeigt unser Beispielbericht.

So testen Sie selbst

  1. Startseite, eine Kategorie- und eine Produktseite nur mit der Tastatur bedienen.
  2. Browser-Zoom auf 200 % stellen und auf dem Smartphone vergrößern.
  3. Einen automatischen Test laufen lassen, zum Beispiel unseren kostenlosen Scan.
  4. Gefundene Punkte nach Auswirkung auf den Kaufprozess priorisieren.

Offizielle Quellen

Wie steht Ihr Shop technisch da?

Der kostenlose Scan zeigt automatisch erkennbare Barrieren Ihrer Startseite nach WCAG 2.2 AA.

Kostenlos scannen

Der Bericht ist eine technische Einschätzung, keine Rechtsberatung und keine Garantie für BFSG-Konformität.