BFSG für Shopify-Shops: Backend, Theme und Apps

Das Wichtigste in Kürze

• Shopify ist ein gehostetes System: Betrieb, Updates und Bezahlvorgang kommen vom Anbieter. Die Barrierefreiheit entscheidet sich trotzdem in Ihrem Shop.
• Jeder Befund sitzt an einem von drei Orten – im Backend-Inhalt (Redaktion), im Theme (Liquid-Vorlagen, Entwicklung) oder in einer App. Diese Zuordnung entscheidet über Aufwand und Reihenfolge.
• Am häufigsten messen wir: Produktbilder ohne Alternativtext, Varianten-Auswahl ohne Beschriftung, Symbol-Schaltflächen im Kopfbereich ohne Namen, zu schwache Akzentfarben, Slider und Ankündigungsleisten.
• „Das Theme ist barrierefrei“ ist keine Aussage über Ihren Shop. Geprüft wurde eine Demo – ohne Ihre Inhalte, Farben, Apps und Anpassungen.
• Der Checkout ist weitgehend vorgegeben und Ihrem Zugriff entzogen. Alle übrigen Seiten – Start, Kategorie, Produkt, Warenkorb, Suche – bleiben davon unberührt; die Barrierefreiheitserklärung kann den Umstand benennen.
• Eine automatische Prüfung findet die maschinell messbaren Verstöße. Ob ein Alternativtext taugt und ob eine Fokusreihenfolge trägt, beurteilt ein Mensch.

Was Shopify anders macht als ein selbst betriebenes Shopsystem

Bei einem selbst betriebenen Shop liegt der Quelltext auf Ihrem Server: Wer dort etwas ändern will, kann alles ändern. Shopify läuft als Mietsoftware beim Anbieter – Sie verwalten Inhalte und Gestaltung, nicht die Anwendung. Drei Folgen daraus.

Die Oberfläche kommt aus dem Theme. Ein Theme besteht aus Vorlagen in der Sprache Liquid, die Ihre Produktdaten in ein festes HTML-Gerüst füllen. Ob eine Schaltfläche einen Namen trägt, steht dort und gilt für alle Seiten desselben Typs – eine Korrektur wirkt shopweit.

Ein Teil der Gestaltung läuft über Einstellungen. Der Theme-Editor bietet Optionen für Farben, Slider-Automatik oder Ankündigungsleiste. Manches, was nach Entwicklungsarbeit aussieht, ist ein Schalter – der Kontrast Ihrer Akzentfarbe etwa.

Viele Funktionen kommen aus Apps. Bewertungen, Filter, Newsletter-Fenster, Einwilligungsbanner, Chat: Diese Bausteine stammen von Drittanbietern und schreiben eigenes Markup in Ihre Seite. Ihr Theme kann tadellos sein und der Shop trotzdem Befunde zeigen, die niemand aus Ihrem Haus geschrieben hat.

Das unterscheidet Shopify von selbst betriebenen Systemen, wo sich fast alles im eigenen Quelltext auflösen lässt – siehe BFSG in Shopware, WordPress und WooCommerce. Hier lautet die erste Frage nach jedem Scan: „Wem gehört diese Stelle?“

Den Rahmen bildet das BFSG, das seit dem 28. Juni 2025 gilt; Verstöße können nach § 37 BFSG mit Bußgeldern bis zu 100.000 Euro geahndet werden. Kleinstunternehmen – weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme – sind nach § 3 Absatz 3 BFSG ausgenommen, aber nur für Dienstleistungen. Zur Betroffenheit: Ist mein Onlineshop vom BFSG betroffen?

Drei Orte, an denen ein Befund entsteht

Ein Prüfbericht sortiert nach technischer Regel. Für die Planung nützt das wenig, weil in derselben Zeile ein Fünf-Minuten-Handgriff und ein Entwicklungsauftrag stehen können. Nützlicher ist die Herkunft, und dafür gibt es eine Faustregel: Tritt der Befund nur auf einer Seite auf, ist es Inhalt. Tritt er auf allen Seiten desselben Typs auf, ist es das Theme. Verschwindet er mit einer abgeschalteten App, gehört er deren Anbieter.

Diese Dreiteilung trägt den Rest des Artikels. Sie erklärt auch, warum eine pauschale Aufwandsschätzung für „einen Shopify-Shop“ nicht funktioniert: Zwei Shops mit demselben Theme können weit auseinanderliegen. Was die Posten kosten, ordnet Was kostet die BFSG-Umsetzung wirklich? ein.

Was die Redaktion im Backend erledigt

Fangen Sie hier an: keine Entwicklung, kein Dienstleister – und regelmäßig der größte Einzelposten der Befundliste.

Alternativtexte in der Medienverwaltung

Jedes Produktbild hat ein eigenes Feld für den Alternativtext; Sie erreichen es in der Produktmaske über die Bearbeitungsfunktion am Bild, dort heißt es „Alt-Text“. Es ist standardmäßig leer – und bleibt es bei einem Import fast immer.

Der Alternativtext ist etwas anderes als Dateiname und Bildunterschrift: Er beschreibt Inhalt oder Funktion – „Strickpullover in Dunkelgrün, Rückansicht mit Zopfmuster“ statt „Bild“. Wie das klingt, zeigt Alt-Texte für Produktbilder richtig schreiben. Denken Sie an die Bilder, die nicht am Produkt hängen: Slideshow-Folien, Kategoriebilder, Banner. Sie werden im Theme-Editor gepflegt und haben dort ein eigenes Alt-Text-Feld, das gern übersehen wird.

Linktexte und Schaltflächenbeschriftungen

„Hier klicken“ und „mehr“ sagen aus dem Zusammenhang gerissen nichts. Vorlesesoftware kann alle Links einer Seite als Liste ausgeben; zwölfmal „mehr“ ist dann wertlos. Formulieren Sie das Ziel: „Größentabelle Damen ansehen“. Das gilt auch für Schaltflächen, die Sie im Theme-Editor beschriften.

Überschriften nach Gliederung, nicht nach Optik

Wählen Sie die Überschriftenebene nach der Gliederung, nicht nach der Schriftgröße – wer eine Ebene überspringt, zerstört die Struktur, mit der sich Screenreader-Nutzer durch lange Seiten bewegen.

Was im Theme sitzt – und dort einmal für alle Seiten gelöst wird

Diese Befunde begegnen uns quer durch alle Themes. Weil sie aus einer Vorlage stammen, wirkt eine Korrektur auf allen betroffenen Seiten.

Symbol-Schaltflächen im Kopfbereich ohne Namen

Warenkorb, Suche, Kundenkonto und Menü sind fast immer reine Symbole ohne sichtbaren Text. Fehlt ein zugänglicher Name, sagt Vorlesesoftware nur „Schaltfläche“ – bei vier Symbolen nebeneinander viermal dasselbe. Zuständig ist Erfolgskriterium 4.1.2 „Name, Rolle, Wert“; der Name gehört ins Markup der Vorlage, ein Backend-Feld gibt es dafür nicht.

Varianten-Auswahl ohne verknüpfte Beschriftung

Größe, Farbe, Menge: Hier wird das Geld verdient. In vielen Themes sind die Auswahlflächen aus reinen Gestaltungselementen gebaut, ohne echtes Formularfeld und ohne Verbindung zur Beschriftung „Farbe“. Vorlesesoftware sagt dann „S, M, L“, ohne zu nennen, worum es geht; mit der Tastatur ist die Auswahl teils gar nicht erreichbar. Betroffen sind 3.3.2 „Beschriftungen oder Anweisungen“ und erneut 4.1.2. Das ist Arbeit in der Produktvorlage – und der Befund mit dem direktesten Umsatzbezug.

Kontrast in den Akzentfarben des Themes

Themes werden mit einer neutralen Beispielpalette ausgeliefert. Sobald Ihre Markenfarbe einzieht, kippen genau die Stellen, an denen Farbe Bedeutung trägt: Schaltflächen, Sale-Preise, Links, graue Hilfetexte, Platzhalter. Verlangt sind nach 1.4.3 mindestens 4,5:1 für normalen Text und 3:1 für große Schrift. Dieser Befund ist am zuverlässigsten messbar – und oft schnell erledigt, weil er in den Farbschemata des Theme-Editors sitzt.

Slideshow, Slider und Ankündigungsleiste

Bildslider bringen mehrere Befunde mit: Folien, die weiterlaufen, ohne dass sich die Automatik anhalten lässt (2.2.2); Pfeile und Punkte, die nur mit der Maus bedienbar sind (2.1.1); ausgeblendete Folien, deren Links in der Tabreihenfolge bleiben. Der schnellste Weg führt über die Einstellungen: Automatik aus. Die Ankündigungsleiste ist klein, kontrastschwach, oft in Bewegung, ihre Schließen-Schaltfläche wieder ein Symbol ohne Namen. Und Fenster über der Seite müssen sich mit der Tastatur schließen lassen – diese Fokusverwaltung ist der anspruchsvollste Punkt der Liste.

Wenn der Befund aus einer App kommt

Der App-Baukasten ist ein Grund, warum viele Händler Shopify wählen. Für die Barrierefreiheit ist er die unangenehmste Baustelle, weil Sie fremdes Markup ausliefern, ohne es ändern zu können. Für Ihre Kundschaft macht die Herkunft keinen Unterschied. Praktisch bleiben Ihnen vier Stufen.

1. Einstellungen ausschöpfen

   Viele Befunde stammen aus optionalen Funktionen: dem aufspringenden Fenster, der Einblendung, dem Farbschema. Etliche Apps lassen sich so einstellen, dass der problematische Teil nicht erscheint.

2. Den Anbieter konkret anfragen

   Eine allgemeine Frage nach Barrierefreiheit läuft ins Leere. Wirksam ist eine präzise Meldung: Seite, Element, verletztes Erfolgskriterium, beobachtetes Verhalten. Die Antwort ist – so oder so – ein dokumentierter Vorgang.

3. Wechseln oder verzichten

   Für die meisten Funktionen gibt es mehrere Anbieter. Häufig ist Verzicht die bessere Antwort: In fast jedem Shop laufen Apps mit, die niemand mehr braucht.

4. Dokumentieren, was offen bleibt

   Liefert der Anbieter nicht, halten Sie fest, was Sie unternommen haben. Ein Vorgang mit Anfragen und Fristen ist etwas anderes als ein offener Befund.

Warum „das Theme ist barrierefrei“ nichts über Ihren Shop aussagt

Auf die Frage nach dem Stand hören wir häufig: „Wir nutzen ein Theme, das als barrierefrei ausgewiesen ist.“ Ein sauber gebautes Theme erspart einen Teil der Grundarbeit – eine Aussage über Ihren Shop ist es nicht. Geprüft wurde die Demo des Anbieters, und zwischen ihr und Ihrem Shop liegen vier Unterschiede.

• Ihre Inhalte. Die Demo enthält gepflegte Beispieldaten mit vollständigen Alternativtexten. Ihr Katalog ist gewachsen und teils importiert.
• Ihre Farben. Geprüft wurde die ausgelieferte Palette. Mit Ihrer Markenfarbe sind alle Kontrastwerte neu zu messen – der häufigste Weg, auf dem ein geprüftes Theme seinen Stand verliert.
• Ihre Apps. Die Demo läuft ohne Zusatzfunktionen; Bewertungsblock, Filter und Einwilligungsbanner waren nie Teil der Prüfung.
• Ihre Anpassungen. Ein Codeschnipsel, ein zusätzlicher Abschnitt, eine Agenturanpassung: Jeder Eingriff verändert die geprüfte Grundlage.

Dazu kommt der Faktor Zeit: Themes werden weiterentwickelt, eine Aussage von vor zwei Jahren gilt der damaligen Version. Und sie ist meist eine Selbstauskunft – schon weil ein Teil der Kriterien nur mit menschlicher Beurteilung feststellbar ist. Belastbar ist nur eine Aussage über eine konkrete Adresse zu einem konkreten Datum. Welche Verstöße dabei auftauchen, zeigt Die häufigsten Barrierefreiheits-Fehler.

Der Checkout: vom System vorgegeben und trotzdem Ihr Thema

Hier unterscheidet sich Shopify am deutlichsten von selbst betriebenen Systemen. Der Bezahlvorgang gehört zur Plattform: Schrittaufbau, Formularfelder, Beschriftungen, Fehlerbehandlung und Reihenfolge kommen vom Anbieter. Anpassbar sind Logo, Farben, Schrift und einzelne Textbausteine. Technisch umbauen können Sie ihn nicht.

Das ist eine Einschränkung und zugleich eine Entlastung. Der Checkout ist erfahrungsgemäß der kritischste Bereich eines Shops, weil dort Formulare, Pflichtangaben, Fehlermeldungen und Zahlungsschritte zusammenkommen – welche Stellen das sind, beschreibt Barrierefreier Checkout: die kritischen Schritte. Zwei Einschränkungen gehören dazu; Apps, die in den Bestellablauf eingreifen, kommen als dritte hinzu.

• Ihre Branding-Einstellungen wirken bis in den Checkout. Eine kontrastschwache Schaltflächenfarbe erzeugt dort einen Befund, den Sie selbst gesetzt haben – und zurücknehmen können.
• Alles vor dem Checkout gehört Ihnen. Warenkorb, Mengenänderung, Rabattcode-Feld und die Schaltfläche zur Kasse liegen im Theme. Genau dort messen wir regelmäßig Befunde.

Der Umstand ist kein Makel, sondern eine Angabe für die Barrierefreiheitserklärung. Dort lässt sich benennen, welche Teile Sie selbst verantworten, welche das Shopsystem vorgibt, wann geprüft wurde und wie Betroffene Barrieren melden können; Aufbau und Formulierungen stehen in Barrierefreiheitserklärung: Muster und Anleitung. Was in Ihrem Fall verpflichtend ist, beurteilt eine Anwältin oder ein Anwalt.

Was ein Scan bei Shopify findet – und was nicht

Ein Prüfwerkzeug bewertet Regeln, keine Bedeutung: Es sieht, ob ein Alternativtext vorhanden ist, nicht ob er etwas taugt. Bei Shopify kommt hinzu, dass ein erheblicher Teil der Oberfläche per JavaScript nachgeladen wird. Deshalb prüfen wir im echten Browser und öffnen die kritischen Bedienelemente von Hand.

Daraus folgt der Satz, der in jedem unserer Berichte steht: Automatisierte Prüfung deckt die maschinell prüfbaren WCAG-Kriterien ab; eine vollständige Konformitätsbewertung erfordert zusätzlich manuelle Prüfung. Zugesagt ist der messbare Teil: Wir beheben die messbaren technischen Verstöße nach WCAG 2.1 AA / EN 301 549 und dokumentieren den Verlauf.

Ein Vorgehen für Shopify-Shops

Aus der Dreiteilung ergibt sich eine Reihenfolge, die mit dem beginnt, was ohne Entwicklung geht.

1. Nach Seitentypen prüfen, nicht nach Seitenzahl

   Ein Shop mit 4.000 Produkten hat keine 4.000 verschiedenen Seiten, sondern ein Dutzend Vorlagen. Prüfen Sie je einen Vertreter von Startseite, Kategorie, Produktdetail, Warenkorb, Suchergebnis, Konto und Rechtstexten – Produktseiten mit und ohne Varianten.

2. Befunde den drei Orten zuordnen

   Sortieren Sie jeden Befund nach Backend, Theme oder App, mit der Zahl betroffener Elemente. Erst das macht Aufwand und Reihenfolge planbar – und verhindert, dass eine Redaktionsaufgabe als Entwicklungsauftrag herausgeht.

3. Theme-Einstellungen zuerst

   Farbschemata mit ausreichendem Kontrast, Slider-Automatik aus, Bewegung in der Ankündigungsleiste aus: wenige Handgriffe, shopweite Wirkung, keine Entwicklung.

4. Redaktion parallel starten

   Zuerst die Bilder, die Links oder Schaltflächen sind, dann alles aus den Vorlagen, dann die Hauptbilder der umsatzstärksten Artikel. Eine Aufgabenliste bietet die BFSG-Checkliste für Onlineshops.

5. Theme-Arbeit und App-Anfragen, dann erneut messen

   Die verbleibenden Befunde in einer Kopie des Themes beheben, App-Anfragen mit Frist nachhalten, dann denselben Prüflauf wiederholen und den Vorher-Nachher-Stand mit Datum ablegen – die Grundlage der Barrierefreiheitserklärung.

Ein letzter Punkt: Ein Shopify-Shop verändert sich laufend. Eine Messung im Quartal hält den Stand, ohne dass daraus wieder ein Projekt wird.

Häufige Fragen

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Quellen: WCAG 2.1, Erfolgskriterien 1.1.1 Nicht-Text-Inhalte (A), 1.4.3 Kontrast Minimum (AA), 2.1.1 Tastatur (A), 2.2.2 Pausieren, Beenden, Ausblenden (A), 2.4.4 Linkzweck im Kontext (A), 3.3.2 Beschriftungen oder Anweisungen (A) und 4.1.2 Name, Rolle, Wert (A); EN 301 549, Abschnitte 9.1.1.1, 9.1.4.3, 9.2.1.1, 9.2.2.2, 9.2.4.4, 9.3.3.2 und 9.4.1.2; Gesetz zur Stärkung der Barrierefreiheit von Produkten und Dienstleistungen (BFSG), insbesondere §§ 1, 3, 14 und 37; Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV). Die beschriebenen Befundmuster stammen anonymisiert aus eigenen Prüfläufen.