Ratgeber · Shopify & BFSG
Shopify barrierefrei machen: Der Guide für Shop-Betreiber
Shopify ist die meistgenutzte Shop-Plattform in Deutschland – und genau deshalb hören wir oft die Frage, ob Shopify Barrierefreiheit nicht einfach mitliefert. Die kurze Antwort: nein. Shopify barrierefrei machen ist eine aktive Aufgabe, die an vier Stellen ansetzt: dem Theme, dem Checkout, den Produktdaten und den installierten Apps. Jede dieser vier Stellen funktioniert in Shopify technisch anders als in WooCommerce, Shopware oder einem Baukasten wie Wix – deshalb lohnt sich ein Blick, der wirklich Shopify-spezifisch ist, statt allgemeine WCAG-Grundsätze zu wiederholen.
Die rechtlichen Grundlagen – seit wann das Barrierefreiheitsstärkungsgesetz gilt, was WCAG 2.1 AA konkret verlangt und wann die Kleinstunternehmen-Ausnahme greift – haben wir im Grundlagenartikel „Onlineshop barrierefrei machen“ ausführlich erklärt. Hier geht es direkt in die Shopify-Praxis: Theme-Editor versus Code-Editor, der abgeschaltete checkout.liquid, Alt-Text-Pflege im großen Katalog und warum ausgerechnet Ihre Lieblings-Apps oft die größte Fehlerquelle sind.
Dieser Ratgeber vertieft die Umsetzung. Die allgemeinen BFSG-Grundlagen – wer betroffen ist, welche Ausnahme gilt, was es kostet – finden Sie im Leitfaden „Onlineshop barrierefrei machen".
Ist mein Shopify-Shop automatisch barrierefrei?
Nein – und das gilt selbst für den Checkout, den viele Händler als „von Shopify erledigt“ betrachten. Shopify hat den unveränderten Standard-Checkout tatsächlich einem WCAG-2.1-AA-Audit unterzogen und veröffentlicht dazu einen offiziellen Accessibility Conformance Report (VPAT). Sobald Sie diesen Checkout aber über Checkout UI Extensions individuell erweitern – zusätzliche Felder, Upsells, eigenes Branding, ein Plus-Feature – liegt die Barrierefreiheit dieser Erweiterungen wieder vollständig in Ihrer eigenen Verantwortung. Shopifys Audit deckt nur den Standardzustand ab.
Ihr Theme, Ihre Produktdaten und jede installierte App unterliegen ohnehin keinerlei Prüfung durch Shopify. Genau hier setzt die eigentliche Arbeit an.
Wie ist ein Shopify-Theme aufgebaut – und wo mache ich Fixes?
Seit Online Store 2.0 (Standard seit 2021) bestehen Shopify-Themes aus Sections – größeren Bereichen wie Header, Produkt-Grid oder Footer – und Blocks, kleineren Elementen innerhalb einer Section wie Bild oder Überschrift. Pro Template sind maximal 25 Sections und 1.250 Blocks möglich. Für die meisten Merchants ist das relevant, weil es zwei völlig unterschiedliche Bearbeitungsebenen gibt.
Layout, Reihenfolge und einfache Inhalte ändern Sie unter Online Store > Themes > Anpassen im visuellen Theme-Editor – kein Code nötig. Für echte Markup- und ARIA-Fixes, etwa Fokus-Ringe, Live-Regions oder korrekte Menü-Semantik, brauchen Sie dagegen den Code-Editor (Online Store > Themes > „…“ > Code bearbeiten), der Liquid-Templates, CSS, JavaScript und Snippets offenlegt. Eine Zwischenstufe bietet der neuere „Liquid“-Einstellungstyp im Theme-Editor: Damit lassen sich kleine Liquid-Snippets direkt in einer Section einfügen, ohne den vollen Theme-Code zu öffnen – nützlich für punktuelle Korrekturen, ersetzt aber keine strukturelle Sanierung.
Bevor Sie im Code-Editor etwas ändern: Legen Sie immer zuerst ein Duplikat des Live-Themes an. Shopify kennt kein separates Staging-System, sondern verwaltet mehrere Theme-Versionen parallel im Adminbereich „Themes“ – Änderungen testen Sie im Vorschaumodus, bevor Sie sie live schalten.
Welche Barrieren tauchen in Shopify-Shops am häufigsten auf?
Über mehrere Audits hinweg wiederholen sich bestimmte Muster, die typisch für die Shopify-Theme-Architektur und die verbreiteten App-Kombinationen sind:
- Farbkontrast: In unseren Audits gehört mangelnder Kontrast durchgehend zu den häufigsten Befunden bei Shopify-Stores (WCAG verlangt 4,5:1 für Normaltext, 3:1 für Großtext/UI) – meist wegen nicht kontrastgeprüfter Farbschema-Presets im Theme-Editor.
- Mega-Menüs und Dropdown-Navigation, die nur per Hover aufklappen und ohne Tastatur nicht erreichbar sind.
- Cart-Drawer, Suchmodal und Quick-View mit fehlerhaftem Fokus-Management – der Tastaturfokus bleibt gefangen oder springt nach dem Schließen nicht zurück.
- Produktbild-Karussells ohne Tastatursteuerung, ohne Pause-Button bei Autoplay und ohne Ankündigung des Bildwechsels für Screenreader.
- Farb- und Größen-Swatches ohne zugänglichen Namen – ein Screenreader liest nur „Button“ statt „Rot auswählen“.
- Formularfehler bei Newsletter- oder Rabattcode-Feldern, die nur farblich markiert sind, ohne aria-live oder aria-describedby.
- Ausverkaufte Varianten, die nur optisch ausgegraut, aber nicht korrekt als disabled ausgezeichnet sind.
Ist der Shopify-Checkout automatisch barrierefrei?
Für die meisten Shops: weitgehend ja, solange Sie ihn unverändert lassen. Für Shopify-Plus-Shops mit individuellem Checkout wird es komplizierter. Die alte Vollanpassung über checkout.liquid war ohnehin nur Plus vorbehalten, und der Sunset ist inzwischen vollzogen: Seit dem 28. August 2025 sind zusätzliche Skripte und Script-Tags auf Thank-you- und Order-Status-Seiten abgeschaltet, die eigentlichen Checkout-Schritte ließen sich schon vorher nicht mehr darüber anpassen. Individuelle Anpassungen laufen jetzt über Checkout Extensibility (Checkout UI Extensions plus Shopify Functions). Shopify Scripts für Rabatt- und Preislogik sind zum 30. Juni 2026 abgeschaltet worden (die Bearbeitung war bereits seit April 2026 gesperrt) und laufen seitdem über Shopify Functions.
Für Bestandskunden mit altem Custom-Checkout-Code heißt das konkret: Beim Zwangs-Umzug auf Checkout Extensibility sollte jede neue Extension gezielt auf WCAG geprüft werden – der offizielle Shopify-VPAT gilt ausdrücklich nur für den unveränderten Standard-Checkout, nicht für Ihre eigenen Erweiterungen.
Wie pflege ich Alt-Texte für Produktbilder richtig?
Alt-Texte für Produktbilder werden nicht im Theme-Editor gepflegt, sondern im Admin unter Products > [Produkt] > Bild anklicken > „Alt-Text bearbeiten“. Für Theme-eigene Bilder wie Banner oder Hero-Grafiken setzen Sie den Alt-Text dagegen direkt im Theme-Editor am jeweiligen Block.
Bei größeren Katalogen wird es mühsamer, als man denkt: Der native Admin-Bulk-Editor (Produkte auswählen > „Produkte bearbeiten“ > Spalte Alt-Text hinzufügen) zeigt und bearbeitet nur das jeweils erste Bild pro Produkt. Alle weiteren Bilder müssen Sie einzeln oder per CSV-Export mit der Spalte „Image Alt Text“, Bearbeitung in Excel oder Sheets und anschließendem Re-Import pflegen. Gerade weil fehlende Produktbild-Alt-Texte in der Mehrheit der bekannten E-Commerce-Abmahnfälle eine Rolle spielen, lohnt sich hier ein einmaliger, sauberer Durchlauf.
Warum werden Shopify-Apps oft zum Problem?
Shopify prüft Apps aus dem App Store nicht auf Barrierefreiheit. Jede installierte App injiziert eigenes HTML, CSS und JavaScript direkt ins Theme – und kann damit bestehende Fixes überschreiben oder neue Barrieren einführen, ohne dass Sie es bemerken. Typische Kandidaten sind Cookie-Banner, Bewertungs-Widgets mit Sternen, Upsell-Popups, Countdown-Timer und Chat-Widgets.
Weil praktisch jeder Shop mehrere Drittanbieter-Apps gleichzeitig einsetzt, ist das eine der häufigsten Ursachen dafür, dass ein eigentlich sanierter Shop nach einem App-Update wieder neue Barrieren aufweist. Deshalb gehört ein manueller Tastatur- und Screenreader-Test jeder neuen oder aktualisierten App fest in ein laufendes Monatsmonitoring, nicht nur in den einmaligen Sanierungs-Audit.
Reichen Accessibility-Overlay-Apps wie AccessiBe oder UserWay?
Im Shopify App Store sind Overlay-Apps auffällig präsent und oft als Ein-Klick-Installation beworben – genau das macht sie verlockend, aber nicht wirksam. Diese Tools verändern das UI nachträglich per JavaScript, greifen aber nicht in den DOM ein, den ein Screenreader beim Seitenaufbau bereits eingelesen hat. Strukturelle Probleme wie fehlendes Fokus-Management im Cart-Drawer oder fehlende ARIA-Labels an Varianten-Swatches bleiben bestehen.
Dass das kein theoretisches Risiko ist, zeigt die US-Handelsaufsicht FTC: Sie hat AccessiBe im April 2025 mit einer Strafe von 1 Million US-Dollar belegt – wegen irreführender Behauptungen zur Compliance-Wirkung des Widgets. Für einen BFSG-konformen Shopify-Shop führt an echten Fixes im Theme-Code kein Weg vorbei.
Checkliste: Shopify barrierefrei machen in der Praxis
Diese Punkte lassen sich Schritt für Schritt abarbeiten, unabhängig davon, ob Sie selbst Hand anlegen oder ein Audit beauftragen:
- Farbschema im Theme-Editor auf Kontrastwerte prüfen (4,5:1 Text, 3:1 UI-Elemente), nicht nur die Presets übernehmen.
- Mega-Menü und Dropdown-Navigation per Tastatur durchtabben und Hover-only-Trigger im Code-Editor ergänzen.
- Cart-Drawer, Suchmodal und Quick-View auf Keyboard-Traps testen – Fokus muss beim Schließen zum Auslöser zurückspringen.
- Produktbild-Karussells: Tastatursteuerung, Pause-Button und Ankündigung des Bildwechsels für Screenreader nachrüsten.
- Alle Produktbild-Alt-Texte über Admin oder CSV-Export/Import pflegen, nicht nur das jeweils erste Bild.
- Farb- und Größen-Swatches mit aria-label versehen, ausverkaufte Varianten korrekt als disabled auszeichnen.
- Jede neue oder aktualisierte App nach der Installation manuell mit Tastatur und Screenreader gegentesten.
- Bei Shopify Markets: korrektes lang-Attribut je Locale-URL und tastaturbedienbaren Sprachumschalter statt reinem JS-Overlay sicherstellen.
- Vor jeder Code-Änderung ein Theme-Duplikat anlegen und im Vorschaumodus testen.
- Lighthouse- oder axe-Scan als Groblauf nutzen, aber nicht als alleinigen Nachweis werten – automatisierte Scanner finden nur etwa 30 bis 40 Prozent der Barrieren.
Was kostet es, einen Shopify-Shop barrierefrei zu machen?
Wie viel Aufwand nötig ist, hängt stark davon ab, wie viele Custom-Sections Ihr Theme hat und wie viele Apps aktiv sind – pauschale Aussagen ohne Blick in den Shop sind wenig seriös. Ein guter Einstieg ist unser kostenlosen Kurzcheck, der eine erste Einschätzung liefert, ohne dass Sie etwas investieren müssen. Für eine belastbare Analyse mit priorisierten Fixes für Theme, Checkout, Produktdaten und Apps steht das Audit für 490 € zur Verfügung, die eigentliche Sanierung bewegt sich je nach Umfang zwischen 1.490 und 2.490 Euro. Wer ohnehin einen Relaunch plant, kann direkt barrierefrei neu starten – ab 990 Euro. Weil Apps regelmäßig neue Barrieren einschleppen können, ist ein laufendes Monatsmonitoring der sinnvollste Weg, den einmal erreichten Stand auch zu halten.
Wo steht Ihr Shop? Finden Sie es kostenlos heraus.
Der kostenlose Kurzcheck zeigt Ihnen in unter 24 Stunden, wo Ihr Shop grob steht – unverbindlich und ohne Software-Installation.
Jetzt kostenlosen Kurzcheck startenHäufige Fragen
- Ist Shopify Plus automatisch barrierefreier als Shopify Basic oder Grow?
- Nein, der Shopify-Plan hat selbst keinen direkten Einfluss auf BFSG-Pflichten. Plus-Kunden haben aber mehr Möglichkeiten, den Checkout über Checkout UI Extensions individuell zu erweitern – und tragen damit auch mehr Verantwortung: Shopifys eigener Accessibility-Audit deckt nur den unveränderten Standard-Checkout ab, nicht Ihre eigenen Erweiterungen.
- Muss ich als kleiner Shopify-Händler das BFSG überhaupt umsetzen?
- Die Kleinstunternehmen-Ausnahme (unter 10 Beschäftigte und Umsatz oder Bilanzsumme bis 2 Mio. Euro) gilt unabhängig vom Shopify-Plan, und gilt für den Shop-Betrieb selbst, weil ein Onlineshop rechtlich als E-Commerce-Dienstleistung zählt. Nur wenn Sie zusätzlich ein in der BFSG-Anlage gelistetes Produkt (etwa E-Reader, Computer oder Selbstbedienungsterminals) selbst herstellen oder in Verkehr bringen, bleibt dieser Produktanteil auch für Kleinstunternehmen pflichtig. Die genauen Voraussetzungen erklären wir im Grundlagen-Artikel Onlineshop barrierefrei machen; im Zweifel klärt das ein kostenloser Kurzcheck für Ihren konkreten Shop.
- Funktioniert checkout.liquid bei Shopify noch?
- checkout.liquid gab es ohnehin nur für Shopify Plus, und die eigentlichen Checkout-Schritte lassen sich schon länger nicht mehr darüber anpassen. Seit dem 28. August 2025 sind zusätzlich Skripte und Script-Tags auf Thank-you- und Order-Status-Seiten deaktiviert. Individuelle Checkout-Anpassungen laufen inzwischen ausschließlich über Checkout Extensibility; Shopify Scripts für Rabattlogik wurden zum 30. Juni 2026 abgeschaltet und durch Shopify Functions ersetzt.
- Sind Themes aus dem Shopify Theme Store automatisch barrierefrei?
- Nur teilweise. Shopify verlangt für neu eingereichte oder aktualisierte Theme-Store-Themes einen durchschnittlichen Lighthouse-Accessibility-Score von mindestens 90 auf Start-, Kategorie- und Produktseite. Das gilt aber nicht rückwirkend für bereits gekaufte Themes, und selbst das offizielle Referenz-Theme Dawn hat dokumentierte Lücken, etwa beim Fokus-Management in Cart-Drawer und Suchmodal.
- Wie teste ich meinen Shopify-Shop selbst auf Barrierefreiheit?
- Ein Lighthouse- oder axe-Scan gibt einen ersten groben Eindruck, deckt aber laut übereinstimmenden Analysen nur etwa 30 bis 40 Prozent der tatsächlichen Barrieren ab. Ergänzen Sie das um eine manuelle Tastaturprüfung von Mega-Menü, Cart-Drawer und Suchmodal sowie einen Screenreader-Test der Produktseite und des Checkouts. Unser kostenloser Kurzcheck liefert dafür eine erste Einschätzung ohne Aufwand für Sie.
- Kann ich Alt-Texte für alle Produktbilder in Shopify auf einmal setzen?
- Nur eingeschränkt. Der native Bulk-Editor im Admin bearbeitet pro Produkt lediglich das erste Bild. Für vollständige Kataloge mit mehreren Bildern pro Produkt führt kein Weg an einem CSV-Export mit der Spalte „Image Alt Text“, der Bearbeitung in Excel oder Sheets und einem CSV-Re-Import vorbei.
- Wie lange dauert eine Barrierefreiheits-Sanierung bei Shopify?
- Das hängt vom Theme-Umfang und der Zahl der installierten Apps ab. Kleinere Themes mit wenigen Custom-Sections lassen sich oft innerhalb weniger Tage sanieren, komplexere Setups mit individuellem Checkout oder vielen Drittanbieter-Apps brauchen mehr Testzyklen. Nach einem Audit für 490 Euro erhalten Sie eine konkrete Einschätzung für Ihren Shop.
Dieser Ratgeber ist allgemeine Information zum Stand Juli 2026 und ersetzt keine Rechtsberatung. Im Zweifel wenden Sie sich an eine auf IT-Recht spezialisierte Kanzlei.