Shopify barrierefrei machen: Checkliste für das BFSG

Schritt für Schritt zum barrierefreien Shopify-Shop: Theme, Alt-Texte, Farbschemas, Fokus, Apps, Popups und Checkout. Mit kompakter Checkliste zum BFSG.

Shopify bringt für die Barrierefreiheit eine gute Grundlage mit. Die hauseigenen Themes Dawn und Horizon sind mit semantischem HTML, Sprunglink und Tastaturbedienung gebaut, und Themes im Shopify Theme Store müssen einen Mindestwert im Lighthouse-Test für Barrierefreiheit erreichen. Trotzdem sind viele Shopify-Shops nicht barrierefrei. Die meisten Barrieren entstehen nicht im Basis-Theme, sondern durch Inhalte, Farbwahl, Anpassungen und Apps.

Diese Checkliste zeigt, wo Sie in Shopify ansetzen, damit Ihr Shop die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt. Maßstab sind die WCAG 2.1 in der Stufe AA, ergänzt um die neuen Kriterien aus WCAG 2.2. Welche Pflichten das BFSG insgesamt mit sich bringt, lesen Sie in BFSG für Onlineshops: Diese Pflichten gelten seit Juni 2025. Der Artikel ist eine technische Anleitung und keine Rechtsberatung.

Wer ist in Shopify wofür verantwortlich?

Shopify stellt Plattform, Checkout und Basis-Themes bereit. Rechtlich sind aber Sie als Shopbetreiber der Dienstleistungserbringer. Shopify schreibt in seinem Konformitätsbericht zum Checkout ausdrücklich, dass Händler selbst dafür verantwortlich sind, ihren Shop gesetzeskonform zu betreiben, auch im Hinblick auf den European Accessibility Act.

Schritt 1: Theme prüfen und aktualisieren

Nutzen Sie ein aktuelles Online Store 2.0 Theme. Horizon ist seit 2025 Shopifys aktuelle Theme-Generation, Dawn wird weiterhin breit eingesetzt. Ältere sogenannte Vintage-Themes werden nicht mehr weiterentwickelt und sind meist ein schlechter Ausgangspunkt.

• Prüfen Sie in der Theme-Bibliothek unter Onlineshop > Themes, ob für Ihr Theme ein Update verfügbar ist. Updates enthalten oft Verbesserungen bei Menüs, Slidern und Dialogen.
• Wenn Ihr Theme stark angepasst wurde, lassen Sie vor dem Update prüfen, welche Änderungen übernommen werden müssen.
• Testen Sie ein Theme aus dem Theme Store vor dem Kauf mit der Tastatur. Ein guter Lighthouse-Wert sagt wenig darüber aus, ob Mega-Menü, Filter und Warenkorb-Drawer wirklich bedienbar sind.

Schritt 2: Alternativtexte im Admin pflegen

Kein Theme kann gute Alternativtexte erfinden. Sie pflegen sie im Shopify-Admin:

• Produktbilder: Öffnen Sie unter Produkte das jeweilige Produkt, klicken Sie auf das Bild und tragen Sie den Alt-Text ein.
• Viele Produkte auf einmal: Der Produkt-CSV-Export enthält eine Spalte für den Alt-Text der Bilder. So bearbeiten Sie große Kataloge in einer Tabelle und importieren sie wieder.
• Bilder in Sections: Bilder aus dem Theme-Editor, etwa in Bildbannern, stammen aus Inhalte > Dateien. Dort können Sie den Alt-Text ebenfalls bearbeiten.
• Logo: Der Alt-Text des Logos sollte Ihren Shopnamen enthalten, nicht „Logo“.

So schreiben Sie gute Alternativtexte:

• Beschreiben Sie, was für den Kauf relevant ist: „Rucksack in Dunkelgrün, Seitenansicht mit geöffneter Laptoptasche“ statt „Produktbild 3“.
• Verzichten Sie auf „Bild von“ oder „Foto von“. Screenreader sagen ohnehin an, dass es ein Bild ist.
• Rein dekorative Bilder bekommen einen leeren Alt-Text, damit Screenreader sie überspringen.
• Text in Bannerbildern muss im Alt-Text stehen. Besser: Setzen Sie den Text als echten Text über das Bild, das ist auch für Zoom und Übersetzung besser.

Schritt 3: Farbschemas und Kontraste im Theme-Editor

In Dawn, Horizon und den meisten aktuellen Themes definieren Sie Farben zentral unter Onlineshop > Themes > Anpassen > Theme-Einstellungen > Farben > Farbschemas. Jedes Schema legt Hintergrund, Text, Buttons, Button-Text und Rahmen fest. Jede Section verwendet eines dieser Schemas.

Prüfen Sie jede Kombination mit einem Kontrastrechner wie dem WebAIM Contrast Checker:

• Normaler Text: mindestens 4,5:1.
• Große Schrift (ab 24 Pixel oder ab etwa 19 Pixel in Fettschrift): mindestens 3:1.
• Bedienelemente wie Rahmen von Eingabefeldern, Icons und Fokusmarkierungen: mindestens 3:1.

Typische Problemstellen in Shopify-Shops sind hellgraue Platzhalter in Formularen, Sale-Badges in Pastellfarben, durchgestrichene Streichpreise in Hellgrau, weißer Text auf Bildbannern ohne ausreichende Abdunklung und Links, die sich nur durch die Farbe vom Fließtext unterscheiden.

Schritt 4: Tastatur und sichtbarer Fokus

Gehen Sie Ihren Shop einmal nur mit der Tastatur durch: Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten und Escape. Achten Sie darauf, ob Sie Mega-Menü, Suche, Filter, Variantenauswahl, Mengenfeld, „In den Warenkorb“, Warenkorb-Drawer und alle Popups erreichen und wieder verlassen können.

Den Fokusrahmen definieren beide Shopify-Themes zentral in der Datei assets/base.css. In Dawn ist er standardmäßig zwei Pixel breit und mit 50 % Deckkraft der Textfarbe gezeichnet, was auf manchen Farbschemas schwach wirkt. In Horizon ist er rund 1,5 Pixel breit. Ein kräftigerer Rahmen ist schnell ergänzt, zum Beispiel für Dawn:

*:focus-visible,
.button:focus-visible {
  outline: 0.3rem solid rgb(var(--color-foreground));
  outline-offset: 0.3rem;
}

In Horizon genügt meist eine größere Rahmenbreite:

*:focus-visible {
  outline-width: 3px;
}

Sie können solchen Code im Theme-Editor unter Theme-Einstellungen im Feld für benutzerdefiniertes CSS ergänzen, soweit Ihr Theme das unterstützt, oder am Ende von base.css. Testen Sie danach auf allen Farbschemas. Achten Sie außerdem darauf, dass der fokussierte Bereich nicht von einem Sticky-Header oder Cookie-Banner verdeckt wird. Das verlangt WCAG 2.2 im Kriterium 2.4.11.

Dawn und Horizon enthalten einen Sprunglink „Direkt zum Inhalt“, der beim ersten Tab erscheint. Prüfen Sie, ob er nach Anpassungen noch vorhanden ist und wirklich zum Hauptinhalt springt.

Schritt 5: Zoom, Reflow und mobile Ansicht

Vergrößern Sie Ihren Shop im Browser auf 400 % bei einem 1280 Pixel breiten Fenster. Das entspricht einer Breite von 320 Pixeln. Inhalte dürfen dabei nicht abgeschnitten werden, und es darf kein seitliches Scrollen nötig sein, außer bei Tabellen und Ähnlichem. Häufige Fehler: ein Sticky-Header, der den halben Bildschirm füllt, abgeschnittene Produkttitel in Slidern und Popups, deren Schließen-Button außerhalb des sichtbaren Bereichs liegt.

Auf Mobilgeräten sollten Bedienelemente nach WCAG 2.2 mindestens 24 mal 24 Pixel groß sein oder genug Abstand haben. Kritisch sind oft kleine Farbfelder bei der Variantenauswahl und die Plus- und Minus-Buttons im Mengenfeld.

Schritt 6: Apps, Overlays und Skripte von Drittanbietern

Jede App, die etwas im Shop anzeigt, bringt eigenen Code mit: Bewertungs-Widgets, Upsell-Popups, Größentabellen, Wunschlisten, Chats und Slider. Dieser Code ist für Barrieren oft verantwortlicher als das Theme selbst.

• Testen Sie jede sichtbare App mit Tastatur und Screenreader.
• Fragen Sie App-Anbieter nach einem Konformitätsbericht oder einer Aussage zur Barrierefreiheit.
• Entfernen Sie ungenutzte Apps und prüfen Sie, ob nach der Deinstallation Code-Reste im Theme verbleiben.

Im App Store finden Sie auch Apps, die versprechen, Ihren Shop mit einem Klick barrierefrei oder BFSG-konform zu machen. Solche Overlays ändern den Quellcode Ihres Themes nicht und lösen die zugrunde liegenden Probleme nicht. Die Hintergründe erklären wir in Accessibility-Overlays und das BFSG: Warum ein Plugin nicht reicht.

Schritt 7: Popups, Cookie-Banner und Newsletter-Layer

Der Cookie-Banner ist das Erste, was Besucher sehen, und häufig die erste Barriere. Prüfen Sie:

• Erreicht die Tastatur den Banner sofort, und ist der Fokus sichtbar?
• Haben „Akzeptieren“ und „Ablehnen“ ausreichend Kontrast und verständliche Beschriftungen?
• Lässt sich der Banner bei 400 % Zoom vollständig bedienen?

Für Newsletter- und Rabatt-Popups gilt zusätzlich: Der Fokus springt beim Öffnen in den Dialog und bleibt dort, Escape schließt ihn, der Schließen-Button hat eine Beschriftung für Screenreader, und nach dem Schließen landet der Fokus wieder dort, wo er vorher war. Automatisch wechselnde Slider brauchen eine Möglichkeit zum Anhalten.

Schritt 8: Produktseite, Formulare und Warenkorb

• Farbfelder für Varianten brauchen einen Textnamen, den Screenreader vorlesen, nicht nur die Farbe.
• Plus- und Minus-Buttons im Mengenfeld brauchen Beschriftungen wie „Menge erhöhen“.
• Das Suchfeld, das Newsletter-Feld und alle Kontaktformulare brauchen sichtbare oder zumindest programmatisch verknüpfte Beschriftungen.
• Wenn ein Produkt in den Warenkorb gelegt wird, sollte das für Screenreader angesagt werden, etwa über einen Live-Bereich oder indem der Fokus in den Warenkorb-Drawer wechselt.
• Preise, Lagerstatus und Rabatte dürfen nicht nur über Farbe vermittelt werden.

Schritt 9: Checkout und Kundenkonto

Den Checkout baut und betreibt Shopify. Sie können seinen Code nicht frei ändern, und Shopify veröffentlicht für den Checkout einen eigenen Konformitätsbericht. In der Fassung vom März 2026 sind die meisten WCAG-Kriterien als unterstützt angegeben, einige aber nur als teilweise unterstützt, darunter Kontraste und Fokusdarstellung. Shopify nennt dort laufende Verbesserungen.

Ihr Einfluss liegt bei diesen Punkten:

• Branding: Farben, Schriften und Logo im Checkout-Editor wählen Sie selbst. Prüfen Sie die Kontraste genauso wie im Theme.
• Erweiterungen: Checkout-Apps und eigene Checkout-Erweiterungen müssen Sie selbst testen.
• Zahlungsarten: Prüfen Sie, ob Zahlungsfenster von Drittanbietern bedienbar sind.
• Dokumentation: Bekannte Einschränkungen im Checkout gehören ehrlich in Ihre Informationen zur Barrierefreiheit.

Schritt 10: Informationen zur Barrierefreiheit veröffentlichen

Legen Sie unter Onlineshop > Seiten eine Seite „Barrierefreiheit“ an und fügen Sie sie unter Inhalte > Menüs dem Footer-Menü hinzu. Welche Angaben hineingehören, zeigt unser Muster für die Erklärung zur Barrierefreiheit.

Die Checkliste im Überblick

Häufige Fragen

Ist Shopify automatisch BFSG-konform?

Nein. Shopify liefert eine solide Basis, aber Inhalte, Farben, Anpassungen und Apps verantworten Sie selbst. Auch der Checkout ist laut Shopifys eigenem Bericht nicht in allen Punkten vollständig konform.

Reicht ein Theme aus dem Theme Store?

Ein Theme aus dem Theme Store ist ein guter Start, aber keine Garantie. Die Anforderungen des Theme Stores beruhen unter anderem auf automatisierten Tests, die nur einen Teil der Barrieren erkennen. Spätestens mit Ihren Inhalten und Apps entstehen neue Fehler.

Muss ich den Checkout selbst barrierefrei machen?

Den Code des Checkouts verantwortet Shopify. Für Branding, Erweiterungen und Zahlungsanbieter sind Sie zuständig, und gegenüber Kunden und Behörde bleiben Sie der Anbieter. Dokumentieren Sie bekannte Einschränkungen in Ihren Informationen zur Barrierefreiheit.

Kann ich Barrierefreiheit per App nachrüsten?

Nicht im Sinne des BFSG. Apps können einzelne Aufgaben erleichtern, etwa das Pflegen von Alt-Texten. Overlays, die Barrieren zur Laufzeit überdecken sollen, ersetzen aber keine Korrekturen im Theme.

Nächster Schritt

Finden Sie in 30 Sekunden kostenlos heraus, welche Barrieren Ihr Shopify-Shop hat: Jetzt kostenlosen BFSG-Check starten. Als Shopify Premier Partner setzt Codext die Korrekturen auf Wunsch direkt in Ihrem Theme um.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.