Barrierefreiheit mit Shopify

Bei Shopify liegt die Besonderheit nicht in der Technik, sondern in der Aufteilung der Verantwortung: Über Theme und Apps entscheidest du, über den Checkout weitgehend Shopify. Rechtlich ändert das nichts – verpflichtet ist der Dienstleistungserbringer, und das bist du. Umso wichtiger ist es zu wissen, wo dein Hebel endet und wo eine vertragliche Zusage anfangen muss.

Das Wichtigste in Kürze

• Ein Shop ist als Dienstleistung im elektronischen Geschäftsverkehr vom BFSG erfasst. Verpflichtet ist der Händler, nicht die Plattform – auch dann, wenn ein Teil der Oberfläche gar nicht von ihm stammt.
• Das Theme ist dein Haupthebel. Shopify-Themes bestehen aus Liquid-Templates und lassen sich vollständig bearbeiten; der Code-Editor liegt direkt im Backend.
• Der Checkout ist es nicht. Er wird von Shopify gerendert und ist nur in engen Grenzen anpassbar. Das ist ein Vorteil, solange die Plattform sauber arbeitet – und ein Risiko, das du nicht selbst beheben kannst.
• Apps sind die häufigste Fehlerquelle. Jede installierte App kann Markup und JavaScript in dein Frontend schreiben: Pop-ups, Bewertungs-Widgets, Produktfilter, Sprachumschalter, Consent-Banner.
• Overlay-Apps sind kein Nachweis. „Accessibility-Widgets“ aus dem App Store ändern nichts an den Ursachen im Markup und erfüllen keine gesetzliche Anforderung.
• Die Referenz-Themes von Shopify werden mit Blick auf Barrierefreiheit entwickelt und sind ein sinnvoller Ausgangspunkt – ein Konformitätsversprechen für deinen fertigen Shop sind sie nicht.
• Stand August 2026 gilt: Wer Shopify in der EU an Verbraucher verkauft, braucht eine eigene Aussage zur Barrierefreiheit seines Angebots. Diese Aussage stützt sich auf eigene Prüfung und auf Zusagen der Plattform.

Kein Rechtsrat. Ob dein Shop erfasst ist, klärt der BFSG-Schnelltest und im Zweifel eine juristische Prüfung. Hier geht es um die technische Umsetzung.

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, aber nicht das ausgelieferte Markup Zeile für Zeile.

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.

Hol dir eine Zusage. Bei Plattformen ist die Konformitätsaussage des Anbieters das Gegenstück zu deinem eigenen Test. Frag danach, bevor du dich bindest, und lege sie ab.

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

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 – nicht jeweils h2.
• 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 mit dem Kontrast-Check.
• Varianten-Auswahl. Farbfelder brauchen Textnamen, ausverkaufte Varianten eine erkennbare Kennzeichnung jenseits von Ausgrauen (1.4.1).
• 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. 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. Erste Barriere auf jeder Seite, siehe Cookie-Banner.
• Sprach- und Währungsumschalter. Oft als Custom-Dropdown gebaut, das die Tastaturkonventionen nicht kennt (Menüs & Dropdowns).

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

Warum Accessibility-Apps das Problem nicht lösen

Im App Store gibt es eine ganze Kategorie von Werkzeugen, die per Widget Schriftgrößen, Kontraste und Vorlesefunktionen anbieten. Sie sind schnell installiert und ändern nichts an der Sache:

• Sie beheben keine fehlenden Namen, keine falschen Rollen, keine kaputte Fokusreihenfolge – sie legen 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“.

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.
• Keine Größentabellen als Bild. Eine Maßtabelle als JPEG ist für Screenreader leer und beim Zoomen unscharf – als echte Tabelle ist sie beides nicht.
• 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

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 die Konformitätsaussage des Anbieters und benennst, dass dein Einfluss begrenzt ist. Das ist keine Ausrede, sondern die zutreffende Beschreibung.
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.

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

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. 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“ ist keine Aussage über deinen Shop. Dein Theme, deine Apps und deine Inhalte sind der weit größere Teil der Oberfläche.

Zehn Apps installiert, keine wieder entfernt. Jede zusätzliche App vergrößert die Angriffsfläche. Ein Aufräumen im App-Bestand ist oft die wirksamste Einzelmaßnahme – und macht den Shop nebenbei 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 hinein – benannt, nicht verschwiegen.

Häufige Fragen

Ist Shopify barrierefrei?

Die Frage ist so nicht beantwortbar, weil „Shopify“ mehrere Dinge bezeichnet: die Plattform, dein Theme, deine Apps und deine Inhalte. Die Referenz-Themes sind ein solider Ausgangspunkt, und der Checkout wird zentral gepflegt. Ob dein Shop die Anforderungen erfüllt, entscheidet sich trotzdem an der ausgelieferten Seite.

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 die Konformitätsaussage des Anbieters einholen.

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

Das BFSG verlangt von Dienstleistungserbringern Informationen zur Barrierefreiheit der Dienstleistung – in verständlicher Form und über die Dienstleistung selbst zugänglich. Eine Erklärung ist der übliche Weg dafür. Vorlagen und Formulierungen stehen unter Barrierefreiheitserklärung erstellen.

Hilft eine Accessibility-App aus dem App Store?

Für die Rechtslage nicht. Ein Overlay ändert die Ursachen im Markup nicht und ist kein anerkannter Nachweis. Nützlich sind dagegen Werkzeuge, die prüfen statt zu überdecken – etwa ein Kontrast- oder Alt-Text-Report.

Mein Shop verkauft nur an Geschäftskunden – gilt das BFSG?

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)
• Accessibility best practices for Shopify themes (Shopify – Vorgaben für Theme-Entwicklung)
• Understanding WCAG 2.2 (W3C – die Erfolgskriterien im Original)
• EN 301 549 (ETSI – der harmonisierte europäische Standard)