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

Shopify-Theme auf Barrierefreiheit prüfen: Anleitung in 6 Schritten

Hinweis: Dieser Ratgeber ist eine technische Orientierung, keine Rechtsberatung und keine Garantie für BFSG-Konformität. Ob das BFSG für ein Unternehmen gilt, klärt verbindlich nur eine Rechtsanwältin oder ein Rechtsanwalt (Orientierung: Gilt das BFSG für meinen Shop?).

Laut Shopify-Partnerblog verlangt Shopify für Themes im offiziellen Theme Store einen durchschnittlichen Lighthouse-Barrierefreiheitswert von mindestens 90 über Startseite, Produkt-, Kollektions- und Warenkorbseite. Das ist eine gute Basis – aber Ihr Shop besteht aus mehr als dem Theme: Inhalte, Farben, Apps und Anpassungen entscheiden mit. Diese Anleitung zeigt, wie Sie Ihren Shopify-Shop selbst vorprüfen. Als Beispiel nutzen wir unsere eigene Stichprobe des öffentlichen Dawn-Demo-Shops (29./30.10.2026).

1. Seiten des kritischen Pfads auswählen

Startseite, eine Kollektion, eine Produktseite mit Varianten, Warenkorb, Suche und der Einstieg in den Checkout. Den Checkout selbst stellt Shopify bereit; prüfen Sie trotzdem, ob Sie ihn ohne Maus erreichen.

2. Lighthouse und axe laufen lassen – und Ergebnisse hinterfragen

Lighthouse ist in Chrome eingebaut (Entwicklertools › Lighthouse › Barrierefreiheit). Die Browser-Erweiterung axe DevTools zeigt Details je Element. Wichtig: Automatische Tests melden auch Fehlalarme. Im Dawn-Demo meldete axe auf der Startseite 14 Kontrastfehler mit 1,01:1 – manuell geprüft waren das Fehlalarme, weil Abschnitte per Scroll-Animation zunächst unsichtbar sind. Echte Befunde waren dagegen eine doppelte ID und ein ungültiger ARIA-Wert in der Suche.

3. Nur mit der Tastatur bedienen

Mit Tab, Umschalt+Tab, Enter, Leertaste und Escape: Kommen Sie zu jedem Link, Button und Feld? Ist der Fokus immer sichtbar? Lassen sich Menü-Drawer, Warenkorb-Drawer und Pop-ups öffnen und wieder schließen? Im Dawn-Demo funktionierten Skip-Link, Tab-Reihenfolge und Fokus in 40 Schritten ohne Tastaturfalle.

4. Den Barrierefreiheitsbaum ansehen

In den Chrome-Entwicklertools (Elemente › Barrierefreiheit) sehen Sie, was ein Screenreader vorlesen würde: Name, Rolle und Zustand. Im Dawn-Demo enthielt der Name der Video-Schaltfläche Rohcode („'“), und die einzige Hauptüberschrift (h1) war das Logo. Beides findet man nur so.

5. Inhalte und Apps prüfen

• Haben Produktbilder sinnvolle Alternativtexte (in Shopify im Medien-Editor)?
• Ist lang="de" gesetzt, und sind Bezeichnungen wie „Skip to content“ übersetzt?
• Bewertungs-, Chat-, Cookie- und Pop-up-Apps einzeln mit Tastatur testen – sie stammen von Drittanbietern.
• Respektieren Animationen die Systemeinstellung „Bewegung reduzieren“ (prefers-reduced-motion)?

6. Zoom und Screenreader

Browser-Zoom auf 200 % und Smartphone-Ansicht: Bleibt alles lesbar, ohne horizontal zu scrollen? Zum Schluss ein Durchlauf mit einem echten Screenreader, etwa NVDA (Windows, kostenlos) oder VoiceOver (macOS/iOS, eingebaut).

Was Sie damit nicht erreichen

Diese Vorprüfung ersetzt kein vollständiges Audit aller WCAG-2.2-Kriterien und ist keine rechtliche Bewertung. Sie zeigt aber schnell, wo Handlungsbedarf besteht.

Quellen

• Shopify: Accessibility Requirements im Theme Store
• Shopify.dev: Accessibility best practices für Themes
• Chrome: Lighthouse Accessibility Scoring
• W3C: WCAG 2.2
• NV Access: NVDA Screenreader

Häufige Fragen

Ist das Shopify-Theme Dawn barrierefrei?

Dawn ist nach unserer Stichprobe vom 29./30.10.2026 eine vergleichsweise gute Basis (Lighthouse 96 auf der Startseite), mit einzelnen echten Befunden wie einer doppelten ID und einem ungültigen ARIA-Wert. Ob Ihr Shop barrierefrei ist, hängt zusätzlich von Inhalten, Einstellungen und Apps ab.

Reicht ein Lighthouse-Wert von 100?

Nein. Lighthouse prüft nur einen Teil der WCAG-Kriterien automatisch. Tastaturbedienung, Fehlermeldungen, Screenreader-Ausgabe und vieles mehr muss ein Mensch prüfen.

Kann ich meinen Shopify-Shop kostenlos prüfen?

Ja, eine Vorprüfung ist mit Lighthouse, axe DevTools, der Tastatur und NVDA oder VoiceOver kostenlos möglich. Für ein vollständiges Bild braucht es eine manuelle Prüfung aller relevanten Seitentypen.

Machen Barrierefreiheits-Apps meinen Shop BFSG-konform?

Als technische Einschätzung: Apps, die ein Overlay einblenden, beheben die Barrieren im Theme-Code nicht. Eine rechtliche Bewertung geben wir nicht.

Weiterlesen

• BFSG-Checkliste für Shopify und WooCommerce: 21 Prüfpunkte
• Beispielbericht zum 490-€-Check
• Beispiel: Stichprobe des Shopify-Themes Dawn
• WooCommerce barrierefrei: Leitfaden für Agenturen
• Shopify-Theme auf Barrierefreiheit prüfen