Shopify und BFSG: Ist dein Shopify-Shop barrierefrei?

Shopify und Barrierefreiheit: Was kommt von Haus aus?

Shopify gehört zu den Plattformen, die Barrierefreiheit ernst nehmen – zumindest im Kern. Die Standard-Themes sind überdurchschnittlich gut aufgestellt. Aber: Custom Themes, Apps und nutzergenerierte Inhalte können die gesamte Zuganglichkeit zerstören. Dein Shop ist nur so barrierefrei wie sein schwächstes Element.

Dawn: Das Referenz-Theme

Dawn ist Shopifys Vorzeige-Theme und das am besten auf Barrierefreiheit geprüfte. Es bringt mit:

• Korrektes semantisches HTML5 (Landmarks: <header>, <main>, <footer>, <nav>)
• Skip-to-content-Link als erstes fokussierbares Element
• Sichtbare Fokus-Styles auf allen interaktiven Elementen
• ARIA-Labels für Warenkorb-Button, Suchfeld und mobiles Menü
• Korrekte Heading-Hierarchie (h1 → h2 → h3 ohne Sprünge)

Sense und Crave: Gute Basis, andere Schwerpunkte

Sense ist minimalistisch gestaltet und erbt die meisten Accessibility-Features von Dawn. Vorsicht bei den großflächigen Bild-Sektionen: Texte über Bildern haben häufig unzureichenden Kontrast (SC 1.4.3 Contrast Minimum). Crave setzt auf kräftige Farben und animierte Übergänge – hier lohnt sich ein gezielter Check der Farbkontraste und der prefers-reduced-motion-Unterstützung (SC 2.3.3).

Vertiefung zum Thema Kontraste findest du in unserem Guide Farbkontraste prüfen und korrigieren. Weitere Informationen finden Sie im BFSG-Glossar.

Liquid-Customization und ARIA: Sections und Snippets richtig bauen

Die wahre Barrierefreiheits-Arbeit beginnt, sobald du Shopifys Theme-Editor verlässt und in Liquid-Code einsteigst. Custom Sections und Snippets sind die häufigste Quelle für Accessibility-Probleme.

Sections: Landmarks und Rollen

Jede Custom Section sollte als <section> mit aria-label oder aria-labelledby ausgezeichnet sein. Ohne diese Attribute ist die Section für Screenreader-Nutzer eine anonyme Region – sie können nicht erkennen, was dieser Abschnitt enthält.

Ein Beispiel für eine korrekte Custom Section:

<section aria-labelledby="bestseller-heading">
  <h2 id="bestseller-heading">Unsere Bestseller</h2>
  <!-- Produktgrid -->
</section>

Snippets: Interaktive Elemente absichern

Custom Tabs, Akkordeons oder Mega-Menüs, die als Snippets implementiert werden, brauchen zwingend:

• role="tablist", role="tab" und role="tabpanel" für Tab-Komponenten (SC 4.1.2 Name, Role, Value)
• aria-expanded für auf-/zuklappbare Bereiche
• Tastaturbedienung: Tab zwischen Komponenten, Pfeiltasten innerhalb (SC 2.1.1 Keyboard)
• Fokus-Management: Beim Öffnen eines Panels muss der Fokus dorthin wechseln

Shopify Metafields für Alt-Texte und barrierefreie Inhalte

Shopify bietet für jedes Produktbild ein Alt-Text-Feld – nutze es konsequent. Aber darüber hinaus können Metafields helfen, zusätzliche barrierefreie Inhalte zu pflegen:

• Produkt-Metafields: Erstelle ein Custom Metafield „accessibility_description“ für ausführlichere Produktbeschreibungen, die über den kurzen Alt-Text hinausgehen.
• Varianten-Metafields: Bei Farbvarianten kannst du über Metafields Farbcodes mit Textlabels verbinden, damit nicht nur ein Farbpunkt, sondern auch „Marineblau“ oder „Anthrazit“ angezeigt wird.
• Collection-Metafields: Pflege für jede Kollektion ein beschreibendes Intro-Feld, das als aria-describedby auf der Kollektionsseite eingebunden wird.

Mehr zu beschreibenden Bildtexten erfährst du in unserem Artikel Alt-Texte richtig schreiben.

Produktvarianten-Swatches barrierefrei machen

Farbswatches sind ein klassisches Accessibility-Problem: Sie kommunizieren Informationen rein visuell über Farbe. Das verstößt gegen SC 1.4.1 Use of Color. So machst du es richtig:

• Jeder Swatch braucht ein aria-label mit dem Farbnamen: aria-label="Farbe: Olivgrün"
• Der ausgewählte Swatch muss mit aria-pressed="true" oder aria-checked="true" gekennzeichnet sein
• Verwende zusätzlich zum Farbpunkt den Farbnamen als sichtbaren Text oder Tooltip
• Swatches müssen per Tastatur fokussierbar und auswählbar sein

Größen-Swatches sind weniger problematisch, weil sie bereits Text enthalten („S“, „M“, „L“). Aber auch hier: aria-pressed für den ausgewählten Zustand nicht vergessen.

Shopify Markets und mehrsprachige Accessibility

Wenn du Shopify Markets nutzt, um deinen Shop in mehreren Sprachen anzubieten, entstehen zusätzliche Anforderungen:

• Das lang-Attribut im <html>-Tag muss für jede Sprachversion korrekt gesetzt sein (SC 3.1.1 Language of Page)
• Der Sprachumschalter muss tastaturbedienbar sein und den aktuellen Sprachstatus anzeigen
• Alt-Texte, ARIA-Labels und Fehlermeldungen müssen in der jeweiligen Sprache vorliegen – nicht nur der sichtbare Content
• Hreflang-Tags helfen Suchmaschinen, aber lang-Attribute helfen Screenreadern – beides ist nötig

App-Audit: Judge.me, Klaviyo, Tidio und Co.

Drittanbieter-Apps sind das größte Accessibility-Risiko im Shopify-Ökosystem. Sie injizieren eigenes HTML, CSS und JavaScript – oft ohne Rücksicht auf WCAG-Standards. Hier die häufigsten Problemkandidaten:

Judge.me (Bewertungen)

Judge.me zeigt Sterne-Bewertungen als rein visuelles Element an. Prüfe, ob die Sterne ein aria-label haben (z. B. „4 von 5 Sternen“). Die Review-Formulare sind grundsätzlich zugänglich, aber die Sortier- und Filterfunktionen haben häufig fehlende Labels.

Klaviyo (Pop-ups und Formulare)

Klaviyo-Pop-ups sind ein häufiger Accessibility-Blocker: Sie erscheinen über dem Seiteninhalt, fangen aber den Fokus nicht ein (fehlende Focus-Trap). Tastaturnutzer navigieren „hinter“ dem Pop-up weiter, ohne es schließen zu können. Stelle sicher, dass der Schließen-Button als erstes fokussiertes Element erreichbar ist und aria-label="Pop-up schließen" hat.

Tidio (Live-Chat)

Chat-Widgets liegen als Overlay über der Seite und sind oft nicht im Tab-Order enthalten. Prüfe: Kann der Chat per Tastatur geöffnet, bedient und geschlossen werden? Hat der Chat-Button ein aria-label? Wird der Chat-Inhalt als role="log" mit aria-live="polite" ausgezeichnet?

Shopify Checkout Extensions und Barrierefreiheit

Der Shopify-Checkout selbst ist von Shopify verwaltet und weitgehend barrierefrei: korrekte Labels, Fehlermeldungen und Tastaturbedienung sind gegeben. Du hast hier absichtlich wenig Einfluss – das ist gut so.

Aber: Seit Checkout Extensions können Apps zusätzliche UI-Elemente in den Checkout einfügen – Upsell-Boxen, Treuepunkte-Anzeigen, Geschenkverpackungs-Optionen. Diese Extensions müssen dieselben WCAG-Standards erfüllen:

• Jede Extension braucht eigene Labels und ARIA-Attribute
• Interaktive Elemente müssen tastaturbedienbar sein (SC 2.1.1)
• Fehlermeldungen müssen die Extension identifizieren (SC 3.3.1 Error Identification)
• Dynamisch nachgeladene Inhalte brauchen aria-live-Regionen

Teste jede Checkout Extension einzeln. Aktiviere eine nach der anderen und prüfe den Checkout-Flow mit Tastatur und Screenreader.

Overlay-Widgets: Warum sie das Problem nicht lösen

Apps wie Accessibly, UserWay und EqualWeb versprechen „BFSG-Konformität per Knopfdruck“. Die Barrierefreiheits-Community lehnt diese Overlays aus guten Gründen ab:

• Overlays ändern nur die Präsentation, nicht den zugrundeliegenden Code. Fehlende Alt-Texte, kaputte Formularlabels und fehlende ARIA-Rollen bleiben bestehen.
• Viele Overlay-Widgets sind selbst nicht barrierefrei – das Widget-Menü ist per Tastatur oft schwer erreichbar.
• Screenreader-Nutzer deaktivieren Overlays häufig aktiv, weil sie mit der eigenen Hilfstechnologie kollidieren.
• Über 700 Accessibility-Expertinnen und -Experten haben das Overlay Fact Sheet unterzeichnet, das von der Nutzung abrät.

Die bessere Strategie: Probleme im Shopify-Theme-Code direkt beheben. Unser Artikel Overlay-Widgets: Warum sie Barrierefreiheit nicht ersetzen erklärt die Hintergründe im Detail.

Schritt für Schritt: Shopify-Shop Accessibility-Audit

Ein systematischer Prüfprozess für deinen Shopify-Shop:

1. Automatisierten Scan starten: Nutze den bf-check.de Scanner für einen schnellen Überblick über die größten Probleme.
2. Theme-Auswahl prüfen: Nutzt du Dawn oder ein anderes Standard-Theme? Custom Themes brauchen gründlichere Prüfung.
3. Alle Produktbilder prüfen: Gehe in Shopify Admin → Produkte und prüfe, ob jedes Bild einen beschreibenden Alt-Text hat.
4. Farbswatches testen: Sind Farbvarianten auch ohne Sehen erkennbar? Haben Swatches aria-label?
5. Custom Sections auditen: Jede selbst gebaute Liquid-Section per Tastatur durchnavigieren.
6. Apps einzeln testen: Deaktiviere alle Apps, dann aktiviere sie einzeln und prüfe nach jeder Aktivierung mit Tastatur und Screenreader.
7. Checkout-Flow testen: Kompletten Kauf per Tastatur durchführen – vom Warenkorb bis zur Bestätigung.
8. Mehrsprachigkeit prüfen: Wenn du Shopify Markets nutzt: lang-Attribut und übersetzte ARIA-Labels verifizieren.

Häufige Fehler in Shopify-Shops

Diese Probleme sehen wir bei Shopify-Shops immer wieder:

• Alt-Texte fehlen flächendeckend: Shopify bietet das Feld – aber viele Betreiber lassen es leer. Besonders bei Varianten-Bildern wird es vergessen.
• Farbswatches ohne Textlabel: Nur ein Farbpunkt, kein Farbname – für Farbenblinde und Screenreader-Nutzer unbrauchbar.
• Klaviyo-Pop-up ohne Focus-Trap: Tastaturnutzer stecken hinter dem Pop-up fest oder können es nicht schließen.
• Custom Mega-Menü nicht tastaturbedienbar: Komplexe Menüs aus dem Theme-Store, die nur auf Hover reagieren.
• Overlay-Widget als „Lösung“ installiert: Das Overlay verdeckt das eigentliche Problem, statt es zu lösen.
• Produktfilter ohne Labels: Preis-Slider, Größenfilter und Sortierung haben oft keine programmatischen Labels.

Für einen Vergleich mit WooCommerce, lies unseren Artikel WooCommerce und BFSG.

Dieser Artikel ersetzt keine Rechtsberatung. Für verbindliche Auskünfte zur BFSG-Konformität deines Shopify-Shops wende dich an einen spezialisierten Anwalt.

Häufig gestellte Fragen

Filternavigation und Produktsuche barrierefrei umsetzen

Die meisten Shopify-Kollektionsseiten bieten Filter nach Größe, Farbe, Preis oder Kategorie an, häufig als eigenständige App oder als aufwendig gestaltete Sidebar. Diese Filter werden oft mit JavaScript nachgebaut und verlieren dabei grundlegende Bedienbarkeit über die Tastatur.

Jeder Filter sollte als Checkbox oder Radio-Button mit korrekt verknüpftem Label umgesetzt sein, nicht als anklickbares Chip-Element ohne semantische Bedeutung. Nach dem Setzen eines Filters muss die Ergebnisänderung für Screenreader-Nutzer angekündigt werden, etwa über eine Live-Region mit der Anzahl der gefundenen Produkte.

• Aktive Filter als Text sichtbar auflisten, mit der Möglichkeit, einzelne davon per Tastatur wieder zu entfernen.
• Die Produktsuche mit Autovervollständigung so gestalten, dass Vorschläge per Pfeiltasten erreichbar und mit Enter auswählbar sind.
• Bei „Keine Ergebnisse gefunden“ einen hilfreichen Text statt einer leeren Seite anzeigen, idealerweise mit alternativen Suchvorschlägen.

Rabattcode-Felder und Warenkorb-Interaktionen barrierefrei gestalten

Der Warenkorb ist eine der interaktionsreichsten Seiten im gesamten Shop: Menge ändern, Artikel entfernen, Rabattcode eingeben. Jede dieser Aktionen läuft in vielen Themes per AJAX ab, ohne dass die Seite neu lädt – für sehende Nutzer komfortabel, für Screenreader-Nutzer ohne zusätzliche Ankündigung aber unbemerkt.

Wird die Menge eines Artikels geändert oder ein Artikel entfernt, muss diese Änderung als Statusmeldung angekündigt werden, zum Beispiel „Artikel entfernt, neue Zwischensumme 64,90 Euro“. Ohne eine solche Ankündigung bleibt unklar, ob die Aktion überhaupt funktioniert hat.

• Rabattcode-Feld mit sichtbarem Label „Rabattcode“ versehen, nicht nur mit einem Platzhaltertext, der beim Tippen verschwindet.
• Nach Eingabe eines ungültigen Codes eine Textmeldung direkt am Feld anzeigen, nicht nur eine farbliche Umrandung.
• Buttons zum Mengen-Erhöhen und -Verringern mit eindeutigem aria-label versehen wie „Menge erhöhen“, statt nur ein Plus-Symbol ohne Beschriftung zu verwenden.

Versandbenachrichtigungen und Bestellstatus-Seiten barrierefrei gestalten

Nach dem Checkout verschickt Shopify automatisch E-Mails zu Bestellbestätigung, Versand und Zustellung – und viele Shops ergänzen dazu eine Tracking-Seite oder ein Kundenkonto-Widget von Drittanbietern wie AfterShip oder Parcel Panel. Diese Seiten werden gerne vergessen, obwohl sie für Kundinnen und Kunden mit Behinderung genauso wichtig sind wie der Checkout selbst.

Prüfe, ob der Bestellstatus nicht nur über eine Farbe oder ein Icon vermittelt wird, sondern zusätzlich als Text vorliegt – etwa „Paket unterwegs“ statt eines reinen Lkw-Symbols. Fortschrittsbalken, die den Lieferstatus grafisch darstellen, brauchen ein aria-label mit dem aktuellen Schritt, da Screenreader die visuelle Füllung sonst nicht interpretieren können. Bestätigungs-E-Mails wiederum sollten mit strukturierten Überschriften statt reiner Fettschrift aufgebaut sein, damit sie sich per Screenreader überfliegen lassen.

Eingebettete Produktvideos und Größentabellen zugänglich einbinden

Viele Shopify-Shops binden Produktvideos direkt von YouTube oder Vimeo ein, um Anwendung oder Passform zu zeigen. Ohne Untertitel bleiben diese Inhalte für gehörlose und schwerhörige Kundinnen und Kunden unzugänglich, und ohne Audiodeskription fehlen blinden Nutzerinnen und Nutzern wichtige visuelle Details wie Farbverläufe oder Materialstruktur. Achte darauf, dass eingebettete Player per Tastatur bedienbar sind und dass Play-, Pause- und Lautstärkeregler eigene, beschriftete Steuerelemente besitzen.

Größentabellen werden in vielen Themes als reines Bild oder als Popup mit fixierter Breite eingebunden; auf kleinen Bildschirmen entsteht dann horizontales Scrollen, das für Menschen mit eingeschränkter Feinmotorik schwer zu bedienen ist. Baue Größentabellen wenn möglich als echtes HTML-table-Element mit th-Kopfzeilen auf, damit Screenreader Zeilen und Spalten korrekt zuordnen und die Tabelle bei Bedarf umbricht, statt nur seitlich zu scrollen.