Shopify barrierefrei machen: Theme, Apps und Checkout

Ein Shopify-Shop wird barrierefrei, wenn du drei Ebenen getrennt angehst: das Theme, das du vollständig bearbeiten kannst, die Apps, die Code in dein Frontend schreiben, und den Checkout, den Shopify selbst rendert. Shopify belegt den Stand des Checkouts in einem eigenen Konformitätsbericht, der Stand März 2026 noch 13 Kriterien als nur teilweise erfüllt führt. Verpflichtet bleibt nach dem BFSG trotzdem der Händler. Deine Barrierefreiheitserklärung benennt deshalb, was du geprüft hast und was von der Plattform stammt.

Das Wichtigste in Kürze

• Ein Shop ist als Dienstleistung im elektronischen Geschäftsverkehr vom BFSG erfasst. Verpflichtet ist der Händler, auch für Teile, die von Shopify stammen.
• Das Theme ist dein Haupthebel. Der Liquid-Code ist vollständig bearbeitbar. Der Lighthouse-Wert von 90, den der Theme Store verlangt, ist kein Konformitätsnachweis.
• Den Checkout rendert Shopify. Laut Bericht vom März 2026 erfüllt er 13 Kriterien der WCAG 2.2 nur teilweise.
• Apps sind die häufigste Fehlerquelle, weil jede App eigenes Markup und JavaScript in dein Frontend schreibt.
• Barrierefreiheits-Plugins aus dem App Store sind meist Overlays. Sie erfüllen keine gesetzliche Anforderung.
• Die Erklärung legst du im Admin unter Onlineshop → Seiten an und verlinkst sie über Inhalte → Menüs im Footer.

Kein Rechtsrat. Ob dein Shop erfasst ist, klärt der BFSG-Schnelltest und im Zweifel eine juristische Prüfung. Kleinstunternehmen beschäftigen weniger als zehn Personen und haben entweder höchstens 2 Mio. Euro Jahresumsatz oder höchstens 2 Mio. Euro Jahresbilanzsumme (§ 2 Nr. 17 BFSG). Für ihre Dienstleistungen gilt die Ausnahme nach § 3 Abs. 3 BFSG. Hier geht es um die technische Umsetzung. Neue Entwicklungen zur Marktüberwachung sammelt Aktuelles zum BFSG.

Wo dein Einfluss endet und was das bedeutet

Der wichtigste Unterschied zu selbst gehosteten Systemen wie Shopware oder WordPress: Der Kaufabschluss läuft auf Shopify-Infrastruktur. Du kannst dort Branding, Felder und teilweise Erweiterungen steuern. Das ausgelieferte Markup bestimmst du dort nicht.

Daraus folgen drei praktische Konsequenzen:

Prüfe trotzdem und dokumentiere. Ein Tastaturdurchlauf durch den Checkout ist auch dann sinnvoll, wenn du ihn nicht selbst reparieren kannst. Was du findest, gehört in ein Ticket beim Anbieter und in deine Barrierefreiheitserklärung.

Nutze die Berichte der Plattform. Shopify veröffentlicht eine eigene Barrierefreiheitserklärung (Stand 7. Juli 2025) und dazu Konformitätsberichte im VPAT-Format für Checkout, Admin und das Theme Dawn. Lege die für dich relevanten Berichte mit Datum ab. Sie sind das Gegenstück zu deinem eigenen Test.

Konzentriere die eigene Arbeit auf das, was dir gehört. Startseite, Kategorie, Produktseite, Warenkorb und Apps: Dort liegen erfahrungsgemäß die meisten Befunde und dein voller Handlungsspielraum.

Was Shopify selbst belegt

Die Konformitätsberichte sind Herstellerangaben und kein unabhängiges Prüfzeugnis. Sie zeigen aber genau, wo die Plattform selbst Lücken einräumt.

Checkout (Bericht März 2026, WCAG 2.2 A/AA). Shopify führt 13 Kriterien als „Partially Supports“: 1.3.1 Info und Beziehungen, 1.3.2 Bedeutungstragende Reihenfolge, 1.4.3 Kontrast, 1.4.4 Textgröße ändern, 1.4.11 Nicht-Text-Kontrast, 2.4.3 Fokus-Reihenfolge, 2.4.7 Fokus sichtbar, 2.5.2 Zeigergesten-Abbruch, 2.5.8 Zielgröße, 3.2.2 Bei Eingabe, 3.3.1 Fehlererkennung, 4.1.2 Name, Rolle, Wert und 4.1.3 Statusmeldungen. Die neuen WCAG-2.2-Kriterien zu verdecktem Fokus, redundanten Eingaben und barrierefreier Anmeldung gelten laut Bericht als erfüllt. Getestet wird nach Angabe von Shopify automatisiert bei jeder Code-Änderung, manuell einmal im Jahr und quartalsweise mit Menschen mit Behinderung.

Theme Dawn (Bericht November 2021, Version 2.4.0, WCAG 2.1). Der Bericht führt 14 Kriterien als teilweise erfüllt. Er bezieht sich auf eine Dawn-Version von 2021 und auf WCAG 2.1. Für ein aktuelles Dawn oder Horizon mit deinen Anpassungen sagt er wenig aus.

Theme Store. Ein Theme muss laut den Theme-Store-Anforderungen über Startseite, Produkt- und Kollektionsseite, jeweils am Desktop und mobil, im Schnitt mindestens 90 Punkte im Lighthouse-Barrierefreiheitstest erreichen. Lighthouse prüft automatisch einzelne Seiten. Abläufe wie der Weg vom Produkt bis zur Bestellung erfasst es nicht.

Das Theme: Liquid, und du darfst ran

Shopify-Themes bestehen aus Liquid-Templates, Sections und Blocks. Der Code-Editor im Backend gibt dir Zugriff auf jede Datei. Das ist mehr Freiheit, als viele Händler nutzen. Die Stellen, an denen ich zuerst nachsehe:

• Der Fokusring. Viele gekaufte Themes setzen outline: none für ein „ruhigeres“ Erscheinungsbild. Das ist der schnellste Weg, Tastaturbedienung unbrauchbar zu machen (2.4.7).
• Icon-Buttons. Suche, Warenkorb, Konto und Menü brauchen einen zugänglichen Namen (4.1.2).
• Die Überschriftenkette. Auf Kategorieseiten konkurrieren Kategoriename, Filterüberschriften und Produkttitel um Ebenen. Produkttitel in einer Kachel sind typischerweise h3 unter einer h2-Sektion.
• Die Farbpalette des Theme-Editors. Kontraste ändern sich mit deinen Farben. Das am besten geprüfte Theme fällt durch, sobald ein helles Grau auf Weiß landet. Nachmessen lässt sich das mit dem Kontrast-Check.
• Varianten-Auswahl. Farbfelder brauchen Textnamen, ausverkaufte Varianten eine Kennzeichnung, die über Ausgrauen hinausgeht (1.4.1).
• Warenkorb-Schublade. Sie ist technisch ein Dialog: Der Fokus muss hinein, Esc schließt, danach kehrt der Fokus zum Warenkorb-Symbol zurück.
• Der Ankündigungsbalken. Wenn er automatisch rotiert, braucht er eine Pause-Möglichkeit (2.2.2).

Die Referenz-Themes von Shopify sind ein guter Startpunkt, weil sie mit Barrierefreiheit im Blick entwickelt werden. Bei Themes aus dem Marktplatz gilt: Demo aufrufen, Tab drücken, Überschriften ansehen, auf 400 % zoomen und den Anbieter nach einem Konformitätsbericht für die aktuelle Version fragen. Zehn Minuten vor dem Kauf sparen Monate danach.

Apps: Das Frontend gehört dir nicht allein

Jede App, die etwas anzeigt, schreibt in dein Frontend. Die Kategorien mit den meisten Befunden:

• Pop-ups und Rabatt-Layer. Sie erscheinen ungefragt, fangen den Fokus und haben oft ein winziges Schließen-Kreuz ohne Namen. Ein Layer ist ein Dialog: Fokus rein, Esc schließt, Fokus zurück.
• Produktfilter. Sie aktualisieren die Trefferliste ohne Neuladen. Ohne Live-Region bleibt das lautlos.
• Bewertungs-Widgets. Sternebewertungen sind häufig reine Grafik ohne Textwert.
• Consent-Banner. Sie sind die erste Barriere auf jeder Seite, siehe Cookie-Banner.
• Sprach- und Währungsumschalter. Oft sind sie als Custom-Dropdown gebaut, das die Tastaturkonventionen nicht kennt (Menüs & Dropdowns).

Meine Regel: Nach jeder App-Installation folgt ein kurzer Tastaturdurchlauf über die Seite, auf der sie erscheint. Das kostet zwei Minuten und findet die groben Fälle sofort.

Shopify-Plugins für Barrierefreiheit: was sie leisten

Die App-Store-Kategorie „Barrierefreiheit“ mischt drei sehr verschiedene Sorten von Apps. Viele werben mit „BFSG-konform“ oder „EAA-konform“. Diese Werbeaussage belegt nichts über deinen Shop.

Overlays lösen das Problem aus drei Gründen nicht:

• Fehlende Namen, falsche Rollen und eine kaputte Fokusreihenfolge bleiben im Markup. Das Widget legt nur eine zweite Oberfläche über die erste.
• Sie kollidieren mit vorhandener Hilfstechnik. Wer einen Screenreader nutzt, hat eine Vorlesefunktion. Ein Widget, das eigene Tastenkürzel belegt, stört sie.
• Sie erfüllen keine Rechtspflicht. Weder das BFSG noch die EN 301 549 kennen den Nachweis „Werkzeug installiert“. Mehr dazu unter Barrierefreiheits-Overlays.

Der wirksame Weg ist unspektakulärer: Theme prüfen, Apps aussortieren, Inhalte sauber pflegen.

Inhalte, die du selbst verantwortest

• Produktbilder mit Alt-Text. Das Feld liegt in der Bildverwaltung des Produkts. Was hineingehört, steht unter Alt-Texte richtig schreiben.
• Produktbeschreibungen mit echten Überschriften und Listen statt fettem Text mit Zeilenumbrüchen.
• Größentabellen als Text. Eine Maßtabelle als JPEG ist für Screenreader leer und beim Zoomen unscharf. Als echte Tabelle ist sie lesbar und skaliert mit.
• Bestell-E-Mails prüfen. Die Vorlagen sind bearbeitbar. Was dort schiefgeht, steht unter Barrierefreie E-Mails & Newsletter.

Was in deine Erklärung gehört und wo sie steht

Weil die Oberfläche geteilt ist, ist auch die Aussage über sie geteilt. Eine belastbare Erklärung für einen Shopify-Shop nennt drei Blöcke getrennt:

1. Was du selbst verantwortest und geprüft hast: Theme, Inhalte, Apps. Hier gehört das Datum deiner letzten Prüfung hin und die Methode: Tastaturdurchlauf, Zoomtest, Werkzeugdurchlauf.
2. Was von der Plattform stammt: im Wesentlichen der Checkout. Hier verweist du auf den Konformitätsbericht von Shopify mit Datum und benennst, dass dein Einfluss begrenzt ist. Diese Abgrenzung beschreibt die Lage zutreffend.
3. Was bekannt nicht konform ist: mit Begründung und, wo möglich, einer Ausweichlösung. Ein erreichbares Kontaktformular oder eine Telefonnummer neben einem schwierigen Bedienschritt ist genau das, was die W3C-Empfehlung zu Übergangslösungen meint.

So bindest du sie ein: Im Shopify-Admin unter Onlineshop → Seiten eine neue Seite „Barrierefreiheit“ anlegen. Danach unter Inhalte → Menüs das Footer-Menü öffnen und die Seite als Menüpunkt hinzufügen. Damit ist sie auf jeder Seite des Shops verlinkt, auch im Warenkorb.

Formulierungen und Aufbau stehen unter Barrierefreiheitserklärung erstellen. Eine ausfüllfertige Vorlage liefert die Muster-Barrierefreiheitserklärung.

Schritt für Schritt: einen Shopify-Shop barrierefrei machen

Bei Shopify ist die Reihenfolge von der Plattform vorgegeben: Was du nicht ändern kannst, gehört zuerst geklärt. Sonst investierst du Tage in einen Bereich, an dessen Rand dein Zugriff ohnehin endet. Die Zeitangaben gelten für einen Shop mit angepasstem Theme und fünf bis zehn Apps.

1. Die Grenze deines Einflusses bestimmen (zwei Stunden). Welche Teile rendert dein Liquid-Theme, welche kommen aus dem gehosteten Checkout, welche aus App-Skripten? Diese Aufteilung entscheidet, was du reparierst und was du beim Anbieter meldest.
2. Theme-Basis prüfen und im Zweifel wechseln (ein halber Tag Prüfung). Ein angepasstes Theme, das Fokus-Stile entfernt oder Überschriften nach Größe statt Rang vergibt, ist teurer zu flicken als zu ersetzen, solange der Shop jung ist.
3. App-Inventur mit Frontend-Prüfung (ein Tag). Für jede App: Fügt sie sichtbares Markup ein? Ist es tastaturbedienbar? Apps ohne Antwort auf diese Frage sind Kandidaten zum Abschalten. Jede eingesparte App spart dauerhaft Prüfaufwand.
4. Overlay-App entfernen, falls installiert (eine Stunde). Sie überlagert die echten Befunde und ersetzt keinen davon.
5. Produktoptionen und Variantenauswahl reparieren (ein bis zwei Tage). Farbfelder brauchen einen Textnamen, nicht verfügbare Varianten eine Kennzeichnung, die über Farbe hinausgeht.
6. Inhalte nachziehen: Alt-Texte, Linktexte, Überschriften (zwei Tage bei einigen Hundert Produkten). Alt-Texte pflegst du in der Produktverwaltung. Das ist Arbeit für die Redaktion und kommt ohne Entwicklung aus.
7. Checkout-Zustand dokumentieren (zwei Stunden). Den gehosteten Checkout kannst du nur in Grenzen ändern. Was du dort feststellst, gehört als benannter Punkt in deine Erklärung, zusammen mit dem Datum der Feststellung und dem Bericht von Shopify.
8. Barrierefreiheitserklärung veröffentlichen (zwei Stunden), inklusive der Bausteine, die dir nicht gehören.

Danach ist der Testdurchlauf sinnvoll: Er misst dann den Zustand, den du auch beeinflussen kannst.

So prüfst du deinen Shopify-Shop

1. Kaufe bei dir selbst, nur mit der Tastatur: Startseite, Kategorie, Filter, Produkt, Warenkorb, Checkout, Bestätigung.
2. Notiere getrennt, was aus Theme, App und Checkout stammt. Nur die ersten beiden kannst du selbst beheben. Das dritte wird zum Ticket beim Anbieter.
3. Wiederhole den Durchlauf bei 400 % Zoom (Reflow).
4. Miss die Kontraste deiner Theme-Farben: Text auf Aktionsfarbe und Text auf Bild sind die üblichen Durchfaller.
5. Prüfe die Variantenauswahl in Graustufen. Bleibt erkennbar, was gewählt und was ausverkauft ist?
6. Sende die Adresse unvollständig ab und verfolge den Fokus zur Fehlermeldung.
7. Spiele jede Zahlungsart einmal durch. Shopify nennt im Checkout-Bericht die Bedienelemente von PayPal, Venmo und Amazon Pay selbst als mögliche Barriere.
8. Lass axe DevTools auf Startseite, Kategorie und Produktseite laufen.

Der übergreifende Ablauf steht unter Barrierefreiheit selbst testen.

Häufiger Fehler in der Praxis

Auf die Plattform vertraut, ohne zu prüfen. „Shopify kümmert sich darum“ sagt nichts über deinen Shop. Dein Theme, deine Apps und deine Inhalte sind der weit größere Teil der Oberfläche, und selbst der Checkout ist laut Shopify an 13 Stellen nur teilweise konform.

Zehn Apps installiert und keine wieder entfernt. Jede zusätzliche App vergrößert die Angriffsfläche. Ein Aufräumen im App-Bestand ist oft die wirksamste Einzelmaßnahme. Nebeneffekt: Der Shop wird schneller.

Das Theme aktualisiert und die Anpassungen verloren. Wer direkt im Liquid-Code arbeitet, braucht eine Notiz darüber, was geändert wurde. Sonst verschwindet die Fokusring-Reparatur beim nächsten Theme-Update.

Die Erklärung zur Barrierefreiheit auf die Plattform abgeschoben. Sie beschreibt dein Angebot. Wenn Teile davon von Shopify stammen, gehört genau das benannt hinein.

Häufige Fragen

Ist Shopify barrierefrei?

Teilweise. Shopify testet nach eigenen Angaben gegen WCAG 2.2 AA und führt im Checkout-Bericht vom März 2026 13 Kriterien als teilweise erfüllt. Die Referenz-Themes sind ein solider Ausgangspunkt. Ob dein Shop die Anforderungen erfüllt, entscheidet sich trotzdem an der ausgelieferten Seite mit deinem Theme, deinen Apps und deinen Inhalten.

Gibt es ein Shopify-Plugin, das den Shop barrierefrei macht?

Nein. Apps mit Barrierefreiheits-Menü legen eine Schicht über die Seite und ändern die Ursachen im Markup nicht. Ein Overlay ist kein anerkannter Nachweis nach BFSG. Nützlich sind Apps, die prüfen oder beim Pflegen von Alt-Texten helfen. Die eigentliche Arbeit passiert im Theme und in den Inhalten.

Kann ich den Shopify-Checkout barrierefrei machen?

Nur begrenzt. Der Checkout wird von der Plattform gerendert, Anpassungen sind auf die vorgesehenen Erweiterungspunkte beschränkt. Was du tun kannst: prüfen, Befunde melden, sie in deiner Erklärung benennen und auf den Konformitätsbericht von Shopify verweisen.

Brauche ich eine Barrierefreiheitserklärung für meinen Shopify-Shop?

Das BFSG verlangt von Dienstleistungserbringern Informationen zur Barrierefreiheit der Dienstleistung, und zwar in verständlicher Form und über die Dienstleistung selbst zugänglich. Eine Erklärung ist der übliche Weg dafür. In Shopify legst du sie als Seite an und verlinkst sie im Footer. Vorlagen stehen unter Barrierefreiheitserklärung erstellen.

Gilt das BFSG auch für einen reinen Geschäftskundenshop?

Das Gesetz schützt Verbrauchergeschäfte. Ein nachweislich rein geschäftlicher Shop fällt nicht darunter, wobei „nachweislich“ mehr verlangt als eine AGB-Klausel. Sobald Verbraucher real bestellen können, zählt der Auftritt als B2C.

Verwandte Themen

• Barrierefreiheit nach Plattform: die Übersicht über alle Systeme
• Barrierefreiheit mit Shopware: der Vergleichsfall mit voller Kontrolle über den Checkout
• Barrierefreiheit in Onlineshops: die systemunabhängigen Shop-Anforderungen
• Cookie-Banner: die erste Barriere jedes Shops
• Ausnahmen, Fristen & Bußgeld: wann die Kleinstunternehmen-Regel greift

Quellen

• Barrierefreiheitsstärkungsgesetz (BFSG) (Gesetzestext: Pflichten des Dienstleistungserbringers, § 2 Nr. 17 und § 3 Abs. 3 zu Kleinstunternehmen)
• Shopify Accessibility Statement (Shopify, Stand 7. Juli 2025, mit Konformitätsberichten für Checkout März 2026 und Dawn November 2021)
• Theme Store requirements (Shopify: Lighthouse-Barrierefreiheitswert von mindestens 90 im Schnitt)
• Accessibility best practices for Shopify themes (Shopify: Vorgaben für Theme-Entwicklung)
• Understanding WCAG 2.2 (W3C: die Erfolgskriterien im Original)