BFSG-Barrierefreiheit mit Shopify

Shopify nimmt Ihnen viel Technik ab, aber Barrierefreiheit hängt am Theme und an den Apps. Ein Scan zeigt, wo Ihr konkreter Shop steht.

Typische Barrieren bei Shopify

Das sind die Stellen, an denen wir bei Shopify zuerst nachsehen:

• Standard-Themes mit zu geringem Kontrast und schwachen Fokus-Rahmen
• Produktvarianten-Auswahl, die nicht per Tastatur bedienbar ist
• Apps und Widgets (Bewertungen, Pop-ups), die Barrieren einführen
• Produktbilder ohne aussagekräftige Alt-Texte

Wo diese Fehler bei Shopify auftreten

Auch gepflegte Shopify-Themes bringen diese Fehler mit: Sale-Badges und Preisdurchstreichungen in hellem Rot auf Weiß reißen den Kontrast, Warenkorb- und Suchsymbole in der Kopfzeile sind leere Buttons, und Apps für Bewertungen oder Newsletter fügen unbeschriftete Felder hinzu, nachdem Sie das Theme freigegeben haben.

Wie häufig diese Fehler insgesamt sind, hat die WebAIM Million 2026 an einer Million Startseiten gemessen: Sechs Fehlerarten machen 96 % aller Verstöße aus, und alle sechs sind maschinell erkennbar. Die vollständige Tabelle steht im Ratgeber „Wie Sie Ihre Website auf Barrierefreiheit testen“.

Gilt das BFSG für Shopify?

Als Verbraucher-Shop unterliegt Ihr Shopify-Store dem BFSG — unabhängig von der Plattform. Entscheidend ist das, was Kundinnen und Kunden auf Ihrer Seite tun.

Wer genau betroffen ist und welche Ausnahmen gelten, erklärt unser Ratgeber „Gilt das BFSG für meine Website?“.

Der Sonderfall Shopify: Ihnen gehört nicht der ganze Shop

Bei Shopify liegt ein erheblicher Teil des Kaufprozesses außerhalb Ihres Zugriffs. Der Checkout wird von Shopify gehostet und ausgeliefert; auf den Standardtarifen lässt er sich nur in engen Grenzen anpassen. Das führt regelmäßig zu der Annahme, damit sei man aus der Verantwortung.

Rechtlich ist es andersherum. Das BFSG richtet sich an den Dienstleistungserbringer — an Sie. Maßgeblich ist, was Ihre Kundschaft vorfindet, nicht, wer den Code betreibt. Für die Praxis heißt das: Sie prüfen alles, aber Sie beheben nur einen Teil selbst. Für den Rest brauchen Sie eine dokumentierte Aussage, welche Anteile von der Plattform stammen und wie Sie damit umgehen — genau die Art Nachweis, für die eine datierte Prüfung mit festgehaltener Engine-Version gemacht ist.

Das Vernünftige daraus: Konzentrieren Sie Ihre Arbeit auf Theme, Inhalte und Apps. Dort liegen die Befunde, die Sie tatsächlich abstellen können — und dort liegen erfahrungsgemäß auch die meisten.

Wo Shopify-Shops konkret durchfallen

Das Theme — auch ein gutes

Die modernen Online-Store-2.0-Themes sind handwerklich ordentlich gebaut. Sie werden aber nie unverändert eingesetzt: Farben, Schriftgrößen, Sections und Blöcke werden im Customizer angepasst, und dabei entstehen die klassischen Befunde.

• Kontrast durch eigene Farbschemata. Der Customizer erlaubt beliebige Kombinationen aus Hintergrund und Text; er warnt nicht, wenn das Ergebnis unter 4,5:1 fällt. Besonders betroffen: Ankündigungsleisten, Sale-Badges und Buttons mit heller Markenfarbe.
• Text in Bildern. Banner-Slides mit eingebranntem Text sind für Screenreader unsichtbar und lassen sich nicht vergrößern.
• Überschriften als Stilmittel. Sections mit „Heading“-Feldern werden oft nach optischer Größe gewählt, nicht nach Hierarchie — das erzeugt übersprungene Ebenen.

Cart Drawer, Quick View und Popups

Der seitlich einfahrende Warenkorb ist bei Shopify-Themes Standard und in Prüfungen eine der häufigsten Fundstellen. Typisch: Der Fokus bleibt beim Öffnen im Hintergrund, Esc schließt nicht, und nach dem Schließen landet die Tastatur am Seitenanfang statt auf dem Warenkorb-Button. Dieselben drei Punkte gelten für Quick-View-Overlays und für Rabatt-Popups.

Dazu kommt die stille Aktualisierung: Wird ein Artikel per AJAX hinzugefügt, ändert sich der Zähler sichtbar — ohne Live-Region hört eine Screenreader-Nutzerin davon nichts.

Apps, die Markup mitbringen

Der App Store ist Shopifys größte Stärke und für die Barrierefreiheit das größte Risiko. Bewertungs-Widgets, Newsletter-Popups, Größenberater, Upsell-Leisten und Cookie-Banner liefern eigenes HTML aus, das Sie weder geschrieben haben noch im Theme-Editor sehen. In Prüfungen fallen sie fast immer in dieselben zwei Kategorien: Icon-Buttons ohne zugänglichen Namen und Formularfelder ohne verknüpftes Label.

Praktischer Umgang damit: nach jeder App-Installation erneut prüfen. Eine App, die den Score spürbar senkt, ist eine Kaufentscheidung — nicht ein technisches Detail.

Produktinhalte aus dem Admin

Alt-Texte pflegen Sie in Shopify pro Bild im Admin. Bei importierten Katalogen fehlen sie entweder ganz oder tragen alle denselben generierten Wert. Ebenfalls häufig: Produktbeschreibungen, die als Bild eingebunden sind, und Farbvarianten, die ausschließlich über Farbfelder ohne Namen auswählbar sind.

WCAG-Checkliste für Shopify

Sortiert nach den Stellen, an denen Sie in Shopify tatsächlich arbeiten. Markiert ist, was ein automatischer Scan zuverlässig erkennt.

Theme-Customizer

• Jedes Farbschema auf 4,5:1 für Text und 3:1 für große Schrift geprüft (automatisch prüfbar)
• Ankündigungsleiste: Kontrast und Schließen-Button mit Namen (automatisch prüfbar)
• Sections in sinnvoller Überschriften-Reihenfolge, keine übersprungenen Ebenen (automatisch prüfbar)
• Slideshow ohne Autoplay oder mit Pausieren-Möglichkeit
• Fokusindikator im Theme nicht deaktiviert
• Schriftgrößen skalierbar, keine festen Pixelwerte für Fließtext

Produkte und Katalog

• Alt-Text je Produktbild im Admin gepflegt, nicht der Dateiname (Vorhandensein automatisch prüfbar)
• Farbvarianten mit Namen, nicht nur als Farbfeld
• Größen- und Varianten-Auswahl per Tastatur bedienbar
• Produktbeschreibung als echter Text, nicht als eingebettetes Bild
• Kollektionsfilter mit verknüpften Labels (automatisch prüfbar)
• „In den Warenkorb“ als echter <button> mit Text (automatisch prüfbar)

Cart Drawer und Overlays

• Fokus wandert beim Öffnen in das Drawer und danach zurück
• Esc schließt Drawer, Quick View und Popups
• Warenkorb-Änderung wird über eine Live-Region angekündigt
• Mengen-Stepper mit Label und benannten Plus/Minus-Buttons (automatisch prüfbar)
• Schließen-Kreuze mit zugänglichem Namen (automatisch prüfbar)

Apps und Drittinhalte

• Bewertungs-Widget: Sterne haben eine Textalternative (automatisch prüfbar)
• Newsletter-Popup: Eingabefeld mit Label, Schließen erreichbar (automatisch prüfbar)
• Cookie-Banner per Tastatur bedienbar und nicht fokusfangend
• Eingebettete Videos mit Untertiteln, kein Ton-Autoplay
• Nach jeder neuen App erneut geprüft

Was von Shopify kommt

• Checkout-Anteile dokumentiert, die Sie nicht ändern können
• Barrierefreiheitserklärung veröffentlicht, mit ehrlicher Angabe dieser Grenzen
• Rechnungen und Versanddokumente als zugängliche Alternative verfügbar

Was die Marktüberwachung bei einem Shop ansieht

Die zuständige Stelle der Länder setzt bei webbasierten Diensten nach ihrer veröffentlichten Strategie auf automatisierte Vorprüfungen mit technischer Prüfsoftware und gewichtet dabei die Nutzerreichweite. Vorrang haben allerdings Beschwerden: Nach § 32 BFSG kann jede Verbraucherin einen Antrag auf Marktüberwachungsmaßnahmen stellen. Was sonst noch in dem Dokument steht — und was daran gegen die verbreitete Rede vom Massen-Scan spricht — haben wir im Ratgeber „So prüft die Marktüberwachung nach dem BFSG“ zusammengefasst.

Für Shopify-Händler besonders relevant: Die Informationspflichten nach § 14 Abs. 2 BFSG gelten unabhängig davon, wie viel Sie am Shop selbst ändern können. Eine ehrliche Erklärung, die auch benennt, welche Teile von der Plattform stammen, ist der Teil der Pflicht, den Sie vollständig in der Hand haben.

So prüfen Sie Ihren Shopify-Shop — kostenlos

Der kostenlose Einzelseiten-Check zeigt in Sekunden die ersten Barrieren — ohne Anmeldung. Automatisierte Tests finden dabei ehrlich nur rund 30–57 % der WCAG-Probleme; den Rest markieren wir zur manuellen Prüfung, statt „100 % konform“ zu versprechen.

Für die ganze Website gibt es den vollständigen automatischen Report ab €14 — günstiger als die üblichen deutschen Tools.