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