Ratgeber

Shopify barrierefrei machen nach BFSG: Theme, Apps, Checkout

Veröffentlicht am 18. Oktober 2026

Shopify nimmt Ihnen beim Thema Barrierefreiheit einen Teil ab: Der Checkout wird laut Shopify gegen WCAG 2.2 A/AA geprüft, und Themes aus dem Theme Store müssen feste Barrierefreiheitsanforderungen erfüllen. Barrierefrei wird Ihr Shop nach BFSG aber erst durch das, was Sie selbst im Admin einstellen und hinzufügen: Alt-Texte, Farben, Apps, Pop-ups, Cookie-Banner, eigene Code-Änderungen und die Barrierefreiheitserklärung mit Footer-Link.

Dieser Artikel zeigt den Weg im Shopify-Admin Schritt für Schritt. Den Vergleich mit anderen Shopsystemen finden Sie in Barrierefreier Onlineshop: was Shopsysteme leisten und was Sie selbst tun müssen.

Warum das für Ihren Shopify-Shop gilt

Ein Onlineshop für Verbraucher ist eine „Dienstleistung im elektronischen Geschäftsverkehr“ nach § 1 Abs. 3 Nr. 5 BFSG; das Gesetz erfasst solche Dienstleistungen, die nach dem 28. Juni 2025 für Verbraucher erbracht werden. Kleinstunternehmen, die Dienstleistungen anbieten, nimmt § 3 Abs. 3 BFSG aus; ob das auf Sie zutrifft, prüfen Sie mit BFSG-Ausnahme für Kleinstunternehmen.

Die Anforderungen stehen in der Verordnung zum BFSG. § 12 BFSGV verlangt unter anderem, dass Websites wahrnehmbar, bedienbar, verständlich und robust gestaltet sind. § 19 BFSGV ergänzt für den Onlinehandel unter anderem, dass Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen ebenso gestaltet sein müssen, soweit sie im Rahmen der Dienstleistung bereitgestellt werden. Die Pflichten treffen nach § 14 Abs. 1 BFSG den Dienstleistungserbringer, also nach § 2 Nr. 4 BFSG jeden, der eine Dienstleistung für Verbraucher erbringt oder anbietet. Auslegung: Bei Ihrem Shopify-Shop sind das Sie, nicht Shopify. Shopify selbst schreibt im Haftungshinweis seines Checkout-Konformitätsberichts, dass Händler dafür verantwortlich sind, dass ihre Shops das geltende Recht einhalten.

Was Shopify selbst angibt

Die Theme-Store-Anforderungen zur Barrierefreiheit

Laut Shopify Theme Store Requirements müssen Themes im Theme Store unter anderem:

• einen durchschnittlichen Lighthouse-Barrierefreiheitswert von mindestens 90 erreichen, gemessen auf Produkt-, Kategorie- und Startseite, für Desktop und Mobil,
• auf allen Seitenteilen per Tastatur bedienbar sein, auch in Dropdown-Menüs, mit sichtbarem Fokus und einer Fokusreihenfolge, die der Reihenfolge im Code entspricht,
• für alle Bilder ein alt-Attribut haben und Formularfelder mit passenden Labels versehen,
• für Fließtext ein Kontrastverhältnis von 4.5:1 einhalten, für Text über 18pt sowie Rahmen und Icons 3:1,
• Überschriften h1 bis h6 sichtbar unterscheiden und Touch-Ziele von mindestens 24 mal 24 CSS-Pixeln haben.

Auslegung: Lighthouse ist ein automatischer Test. Ein Wert von 90 sagt nur, dass automatisch prüfbare Punkte weitgehend stimmen. Ob Ihre Inhalte verständlich sind, Alt-Texte passen oder ein Pop-up per Tastatur schließbar ist, misst er nicht.

Wo Sie zuständig sind: der Weg im Shopify-Admin

Die Shopify-Hilfe beschreibt die Klickpfade auf Englisch. Wir nennen die englischen Menünamen, damit Sie sie mit der Hilfe abgleichen können; in einem deutschsprachigen Admin stehen dort die übersetzten Bezeichnungen.

1. Alt-Texte für Produktbilder

Weg laut Shopify-Hilfe zu Alt-Texten für Medien:

1. Im Shopify-Admin Products öffnen.
2. Auf den Namen des Produkts klicken.
3. Auf der Produktseite ein Bild anklicken, es öffnet sich die Seite Preview media.
4. Add alt text klicken.
5. Alt-Text eingeben und Save alt text klicken.
6. Die Vorschau mit dem X schließen.

Shopify erlaubt bis zu 512 Zeichen und empfiehlt 125 oder weniger. Bei vielen Produkten können Sie Alt-Texte laut derselben Seite auch per CSV-Datei hochladen.

Bilder in Theme-Abschnitten (Banner, Slideshow, Bild mit Text) haben eigene Alt-Texte. Weg laut Shopify-Hilfe zu Alt-Texten im Theme: Online Store, beim Theme Edit theme, in der Seitenleiste den Abschnitt mit dem Bild anklicken, am Bild Edit, Alt-Text eingeben, Save, danach im Editor erneut Save.

Was ein guter Alt-Text ist, sagt Shopify in der Theme-Hilfe zur Barrierefreiheit so: Beschreiben Sie das Bild, als würden Sie es jemandem mit geschlossenen Augen erklären. Das passende Kriterium ist WCAG 1.1.1 Nicht-Text-Inhalt.

Beispiel: Statt „IMG_4711“ oder „Tasse“ schreiben Sie „Steingut-Tasse in Mattgrün, 300 ml, mit Henkel“.

2. Farben und Kontrast im Theme

Weg laut Shopify-Hilfe zu Farbschemata: Online Store, beim Theme Edit theme, Einstellungssymbol (settings icon), Colors, unter Schemes ein Schema anklicken, Farbfeld wählen, Hex-Code eingeben, Save.

Die Theme-Hilfe empfiehlt, dass Fließtext und Buttontext ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund haben. Das entspricht WCAG 1.4.3 Kontrast (Minimum). Prüfen Sie jedes Farbschema einzeln, denn jeder Abschnitt kann ein anderes Schema nutzen. Typische Problemstellen: heller Text auf Bildbannern, graue Preise, „Ausverkauft“-Hinweise und Buttons in Pastellfarben.

3. Farben im Checkout

Weg laut Shopify-Hilfe zum Checkout-Branding: Settings > Checkout, bei der gewünschten Konfiguration Edit, die Einstellungsleiste öffnen, dann Farben für Header, Hauptbereich, Accent and buttons, Input fields (dort das Feld Error für Fehlermeldungen) und Bestellübersicht setzen, Save. Shopify rät dort, Farben mit hohem Kontrast zu wählen und darauf zu achten, dass Text und Formularfelder vor dem Hintergrund gut lesbar sind.

Erweiterte Anpassungen über die Checkout Branding API oder Checkout Blocks gibt es laut derselben Seite nur im Plan Shopify Plus. Auslegung: Für die meisten kleinen Shops sind deshalb Farben, Hintergrundbilder, Zahlungsarten und eingebundene Checkout-Apps der Hebel.

4. Apps und Pop-ups

Apps hängen sich über App-Blöcke oder App-Embeds in Ihr Theme. Weg laut Shopify-Hilfe zu Apps im Theme: Online Store, Edit theme, in der Seitenleiste das Symbol App embeds, dort ist jede eingebettete App mit einem Schalter aufgeführt.

So nutzen Sie die Liste: Legen Sie zuerst eine Kopie Ihres Themes an (laut Shopify-Hilfe zum Duplizieren: Online Store, beim Theme das Aktionsmenü öffnen, Duplicate). Schalten Sie in der Kopie jede eingebettete App einzeln ab und prüfen Sie, ob ein Problem verschwindet. Newsletter-Pop-ups, Glücksräder, Chat-Widgets, Bewertungs-Widgets und Upsell-Fenster im Warenkorb sind typische Kandidaten. Für jedes Pop-up gilt: per Tastatur erreichbar, mit Escape oder einem beschrifteten Schließen-Button schließbar, und der Fokus springt danach an eine sinnvolle Stelle zurück. Das ist unsere Prüfempfehlung, keine Shopify-Vorgabe.

5. Eigene Liquid-Anpassungen

Jede Änderung im Theme-Code (Edit code) liegt außerhalb dessen, was Shopify prüft. Die Entwicklerhinweise zu Barrierefreiheit in Themes nennen unter anderem: Jedes img braucht ein alt-Attribut, jedes Formularfeld ein Label, der Fokus bleibt sichtbar und folgt der Reihenfolge im Code, aufklappbare Menüs melden ihren Zustand mit aria-expanded, und dynamische Änderungen werden über aria-live angesagt. Die Theme-Hilfe warnt ausdrücklich: Entfernen Sie beim Bearbeiten des Stylesheets nicht die Fokus-Hervorhebung.

Geben Sie diese Liste Ihrer Agentur oder Ihrem Entwickler als Abnahmekriterien mit.

6. Cookie-Banner

Den Shopify-eigenen Banner finden Sie laut Shopify-Hilfe zu den Datenschutzeinstellungen unter Settings > Customer privacy > Cookie banner. Dort stellen Sie Farben, Position und, nach Abschalten der automatischen Einstellungen, den Text ein. Zur Barrierefreiheit sagt die Seite nichts. Statt des Shopify-Banners können Sie auch eine Cookie-App nutzen.

Auslegung: Der Banner ist oft das Erste, was ein Kunde sieht, und er verdeckt den Shop. Prüfen Sie ihn deshalb zuerst: Kontrast der Buttons nach dem gleichen Maßstab von 4.5:1, Bedienung nur mit der Tastatur, „Ablehnen“ genauso erreichbar wie „Akzeptieren“.

7. Seite für die Barrierefreiheitserklärung und Footer-Link

Die Informationen nach Anlage 3 BFSG müssen Sie nach § 14 Abs. 1 Nr. 2 BFSG der Allgemeinheit in barrierefreier Form zugänglich machen. Den Inhalt liefert unser Muster für die Barrierefreiheitserklärung.

Seite anlegen, laut Shopify-Hilfe zu Seiten:

1. Online Store > Pages.
2. Add page.
3. Titel eingeben, zum Beispiel „Barrierefreiheitserklärung“.
4. Unter Visibility „Visible“ lassen.
5. Den Text der Erklärung einfügen, mit echten Überschriften statt fett gesetzter Zeilen.
6. Save.

Footer-Link setzen, laut Shopify-Hilfe zu Menüs:

1. Content > Menus.
2. Das Footer-Menü anklicken.
3. Add menu item, Namen eingeben.
4. Im Feld Search or paste a link den Typ Pages und dann Ihre Seite auswählen. Shopify rät, die Seite aus der Liste zu wählen statt die Adresse einzufügen, weil das zu einem 404-Fehler führen kann.
5. Add, dann Save menu.

Legen Sie im selben Zug einen Meldeweg an, über den Kunden Barrieren melden können. Wie das aussieht, steht in Meldeweg für Barrieren.

Checkliste in der Reihenfolge der Kaufstrecke

Gehen Sie diese Liste einmal mit Maus, einmal nur mit der Tastatur (Tab, Umschalt+Tab, Enter, Leertaste, Escape) durch.

Wie Sie solche Tests ohne Vorwissen durchführen, zeigt Website auf Barrierefreiheit prüfen.

Warum Overlay-Apps nicht reichen

Im Shopify App Store finden Sie viele Apps, die ein Barrierefreiheits-Widget einblenden: Knöpfe für größere Schrift, Kontrastmodus oder Vorlesen. Sie ändern nichts an den Ursachen, also an fehlenden Alt-Texten, schwachen Farben im Theme oder einem Pop-up, das sich per Tastatur nicht schließen lässt.

Die Überwachungsstellen des Bundes und der Länder für die Barrierefreiheit von Informationstechnik haben dazu eine gemeinsame Einschätzung zum Einsatz von Overlay-Tools veröffentlicht (Stand März 2025). Darin steht, dass Overlay-Tools derzeit nicht in der Lage sind, einen Webauftritt mit Barrieren vollständig barrierefrei zu machen, dass ihr Einsatz die Verantwortlichen nicht von der Pflicht zur barrierefreien Gestaltung entbindet und dass durch solche Tools weitere Barrieren entstehen können.

Auslegung: Die Einschätzung bezieht sich auf öffentliche Stellen. Die Begründung trifft aber genauso auf einen Shop zu, denn § 12 BFSGV verlangt, dass die Website selbst wahrnehmbar, bedienbar, verständlich und robust ist. Ein Widget, das darüber liegt, ersetzt das nicht. Das Geld für eine Overlay-App ist besser in die sieben Punkte oben investiert.

Ihr nächster Schritt

Ein kostenloser Scan Ihres Shops zeigt die automatisch gefundenen technischen Probleme, etwa fehlende Alt-Texte oder zu schwache Kontraste, und hilft Ihnen, die Checkliste oben gezielt abzuarbeiten. Automatische Werkzeuge finden nur einen Teil aller Barrieren; die Tastaturprüfung der Kaufstrecke und die Prüfung Ihrer Apps machen Sie zusätzlich von Hand.

Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.

Stand: 18.10.2026. Quellen gelesen am 18.10.2026.