Shopify-Theme barrierefrei einstellen: Dawn, Horizon und Co.

Sachinformation, keine Rechtsberatung. Für Ihre konkrete Situation fragen Sie bitte eine Anwältin oder einen Anwalt.

Von Sieghart Michielsen · Veröffentlicht 25. Oktober 2026

Ein Shopify-Theme ist die Grundlage fast jeder Barriere, die ein automatischer Test auf einer Shop-Startseite findet: Farben, Bild-Banner, Slideshows, Icons im Header, das Viewport-Tag. Die gute Nachricht: Vieles davon stellen Sie im Theme-Editor um, ohne eine Zeile Code. Dieser Beitrag zeigt, was Shopify selbst zur Barrierefreiheit von Themes sagt, welche Einstellungen typische Barrieren erzeugen und wie Sie sie in Dawn, Horizon und anderen Themes beheben.

Kurz zusammengefasst

• Theme-Store-Themes müssen Mindestanforderungen an Barrierefreiheit erfüllen. Ihr Shop ist damit aber nicht automatisch barrierefrei.
• Die häufigsten Probleme entstehen durch Einstellungen und Inhalte: Farbschemata, Text auf Bildern, Autoplay, Bilder ohne Alt-Text.
• Dawn und Horizon blockieren Zoom in der Originalfassung nicht. Wenn Ihr Shop Zoom blockiert, kommt das aus einer Anpassung, einem anderen Theme oder einer App.
• Apps fügen eigenen Code hinzu. Prüfen Sie sie wie einen Teil des Themes.

Was Shopify selbst zur Barrierefreiheit von Themes sagt

Die Hinweise im Help Center

Shopifys Hilfeseite zur Barrierefreiheit von Themes richtet sich an Händler. Sie nennt unter anderem: Textkontrast von mindestens 4,5:1 (große Schrift 3:1), Text auf Bildern mit denselben Werten, Überschriften ohne übersprungene Ebenen, Fließtext ab etwa 16 Pixel, Links nicht nur durch Farbe kenntlich machen, Alt-Texte für Bilder, keine automatisch abspielenden Slideshows und Videos (falls doch: Steuerung zum Anhalten, Videos stumm) und einen sichtbaren Tastaturfokus. Shopify sagt dort auch ausdrücklich, dass die Befolgung dieser Hinweise allein keinen vollständig zugänglichen Shop sicherstellt.

Die Anforderungen für den Theme Store

Für Themes im Theme Store gelten eigene Anforderungen auf shopify.dev: ein durchschnittlicher Lighthouse-Barrierefreiheitswert von mindestens 90 über Startseite, Kollektions- und Produktseite, mobil und am Desktop. Dazu kommen Regeln wie: alle Teile der Seite per Tastatur bedienbar, sichtbarer Fokus, Fokusreihenfolge gleich der DOM-Reihenfolge, alt-Attribut für alle Bilder, Formularfelder mit zugeordneten Labels, Klickziele von mindestens 24 × 24 CSS-Pixeln.

Das ist eine solide Basis. Sie betrifft aber das Theme im Auslieferungszustand mit Beispielinhalten. Sobald Sie eigene Farben, Bilder, Sektionen und Apps hinzufügen, entscheiden Sie mit, wie zugänglich der Shop ist.

Was die Daten zeigen

In unserer Studie zu 5.463 EU-Shopify-Startseiten (HTTP Archive, Crawl vom 1. September 2026, mobile Ansicht, nur Startseiten, nur automatisierte Prüfungen) waren die häufigsten Funde auf den 1.207 .de-Startseiten: zu geringer Farbkontrast (75,1 %), Links ohne Namen (49,8 %), Bilder ohne Alt-Text (34,2 %), übersprungene Überschriftenebenen (32,1 %) und blockierter Zoom (23,9 %). Fast alles davon lässt sich im Theme oder in seinen Einstellungen beheben.

Die Einstellungen, die am häufigsten Barrieren erzeugen

Farbschemata

In Dawn legen Sie Farben in den Theme-Einstellungen unter „Farben“ als Farbschemata fest; jede Sektion nutzt eines davon. Prüfen Sie jedes Schema mit einem Kontrastrechner: Text auf Hintergrund, Button-Beschriftung auf Button-Hintergrund, Umriss-Buttons. Ein helles Grau auf Weiß oder Weiß auf Pastell sind die üblichen Kandidaten. Ändern Sie das Schema, nicht jede Sektion einzeln: Eine Korrektur wirkt dann überall (WCAG 1.4.3 und 1.4.11). Wie Sie Kontrast messen und welche Werte für Buttons, Platzhaltertext und Rahmen gelten, erklärt der Beitrag Farbkontrast im Shopify-Shop prüfen und korrigieren.

Text über Bildern und Bannern

Bild-Banner und Slideshows legen Text über ein Foto. Der Kontrast hängt dann vom Bild ab und schwankt. In Dawn hat das Bild-Banner eine Einstellung „Überlagerungsdeckkraft“, die eine dunkle Fläche über das Bild legt, und die Option „Container“, die den Text auf einen Hintergrund setzt (Quelltext). Erhöhen Sie die Deckkraft oder nutzen Sie den Container, bis der Text an jeder Stelle des Bildes 4,5:1 erreicht. Prüfen Sie auch die mobile Ansicht, denn dort wird das Bild anders beschnitten. Steht wichtiger Text fest im Bild, etwa ein Rabatt, gehört er zusätzlich in den Alt-Text; wie das geht, zeigt der Beitrag Alt-Texte in Shopify.

Slideshow mit Autoplay

WCAG 2.2.2 verlangt, dass sich automatisch bewegende Inhalte, die länger als fünf Sekunden laufen, anhalten lassen (W3C: Pause, Stop, Hide). In Dawn ist „Autorotieren der Slides“ standardmäßig aus. Schalten Sie es ein, blendet Dawn eine Pause-Schaltfläche ein und hält die Slideshow bei Mauskontakt oder Tastaturfokus an (slideshow.liquid). Auch in Horizon ist Autoplay der Slideshow standardmäßig aus. Wenn Ihr Theme keine Pause-Schaltfläche zeigt, lassen Sie Autoplay aus.

Ankündigungsleiste und Laufschrift

Die Ankündigungsleiste in Dawn kann Meldungen automatisch wechseln lassen („Automatisch rotierende Ankündigungen“, standardmäßig aus). Im Quelltext pausiert sie bei Mauskontakt oder Fokus und startet nicht, wenn das Betriebssystem reduzierte Bewegung anfordert. Horizon bietet eine Marquee-Sektion (Laufschrift), deren Animation nur läuft, wenn keine reduzierte Bewegung angefordert ist (marquee.liquid). Prüfen Sie im eigenen Shop, ob Besucher eine laufende Leiste anhalten können. Wenn nicht, nutzen Sie eine statische Meldung.

Videos mit Autoplay

Die Video-Sektion in Dawn zeigt zunächst ein Vorschaubild und lädt das Video erst nach einem Klick. Problematisch sind Hintergrundvideos aus anderen Themes oder Apps, die von selbst starten. Shopify rät: kein Autoplay, und wenn doch, ohne Ton. Ergänzen Sie Untertitel oder ein Transkript für gesprochene Inhalte (WCAG 1.2.2).

Icon-Links und Icon-Buttons

Suche, Konto, Warenkorb, Social-Media-Icons: Wenn ein Link nur ein Symbol enthält, braucht er einen Namen für Screenreader. Dawn liefert diese Namen mit, als versteckten Text im Header und in den Social-Icons (social-icons.liquid). Prüfen Sie aber eigene Anpassungen, Custom-Liquid-Blöcke und App-Icons. So sieht ein benannter Icon-Link aus:

<a href="{{ routes.cart_url }}">
  {{- 'icon-cart.svg' | inline_asset_content -}}
  <span class="visually-hidden">Warenkorb</span>
</a>

Den Namen hören Sie, wenn Sie mit VoiceOver (Mac, iPhone) oder NVDA (Windows) auf den Link gehen. Hören Sie nur „Link“ oder einen Dateinamen, fehlt er (WCAG 2.4.4 und 4.1.2).

Viewport, der Zoom blockiert

Das Viewport-Tag in layout/theme.liquid steuert, ob Nutzer auf dem Smartphone vergrößern können. Dawn setzt es ohne Zoom-Sperre (theme.liquid), Horizon ebenso (meta-tags.liquid). Fast jede vierte .de-Startseite in unserer Studie blockierte Zoom trotzdem. Suchen Sie im Code-Editor nach viewport. So sieht eine Sperre aus:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

Und so ohne Sperre:

<meta name="viewport" content="width=device-width,initial-scale=1">

Erstellen Sie vor jeder Code-Änderung eine Kopie des Themes. Grundlage ist WCAG 1.4.4 (W3C: Resize Text).

Sichtbarer Fokus

Wer mit der Tastatur navigiert, muss sehen, wo er ist (WCAG 2.4.7). Dawn bringt Fokusrahmen mit. Häufig werden sie durch eigenes CSS wie outline: none entfernt, etwa um „unschöne Rahmen“ nach dem Klick loszuwerden. Drücken Sie auf jeder Seitenvorlage die Tab-Taste: Jeder Link, jeder Button und jedes Feld muss sichtbar markiert sein, auch im Warenkorb und in Pop-ups.

Überschriftenreihenfolge in Sektionen

Viele Sektionen lassen Sie die Größe der Überschrift wählen. Größe ist aber nicht Ebene: Prüfen Sie mit einer Browser-Erweiterung oder der Überschriftenliste Ihres Screenreaders, ob die Ebenen ohne Sprung aufeinander folgen (h1, dann h2, dann h3). Gibt es auf der Startseite mehrere h1 oder fehlt sie, korrigieren Sie das in der jeweiligen Sektion oder im Code.

Apps bringen eigenen Code mit

Bewertungs-Widgets, Cookie-Banner, Chat-Buttons, Newsletter-Pop-ups: Jede App, die im Storefront etwas anzeigt, fügt HTML, CSS und JavaScript hinzu. In unserer Studie scheiterten Seiten mit weniger als 20 erkannten Drittanbieter-Technologien im Schnitt an 2,7 automatischen Prüfungen, Seiten mit 40 oder mehr an 4,1. Links ohne Namen fanden sich auf 43,5 % bzw. 67,2 % dieser Seiten. Das ist ein Zusammenhang, keine nachgewiesene Ursache, und die Daten erlauben es nicht, einzelnen Apps Barrieren zuzuschreiben.

Praktisch heißt das: Deaktivieren Sie eine App-Einbettung testweise im Theme-Editor und vergleichen Sie das Ergebnis. Melden Sie Barrieren dem Anbieter. Ein Overlay-Widget löst Theme-Probleme nicht; mehr dazu im Beitrag Overlay-Widgets und das BFSG. Eine Übersicht aller Prüfpunkte finden Sie in der BFSG-Checkliste für Shopify-Shops, die rechtlichen Grundlagen im Beitrag BFSG für Shopify-Shops.

Welche dieser Barrieren automatisch in Ihrem eigenen Theme erkennbar sind, zeigt der kostenlose Check. Automatische Tests finden nur einen Teil der Barrieren; Tastatur- und Screenreader-Test ersetzen sie nicht.

Wie Testamur hilft

Testamur ist eine Shopify-App in Entwicklung. Sie prüft das Theme auf Code-Ebene, zeigt bei jedem Fund, ob er aus dem Theme oder einer App stammt, und schlägt die Änderung im Code vor, statt ein Overlay über den Shop zu legen. Jede Prüfung und jede Korrektur wird mit Datum festgehalten. Den kostenlosen Check können Sie schon jetzt nutzen.

Quellen

• Shopify Hilfe: Barrierefreiheit von Themes
• shopify.dev: Theme Store requirements
• Shopify Dawn auf GitHub (Version 16.0.0)
• Shopify Horizon auf GitHub (Version 4.3.0)
• W3C: Understanding 2.2.2 Pause, Stop, Hide
• W3C: Understanding 1.4.4 Resize Text
• W3C: Understanding 2.4.7 Focus Visible
• Testamur: Studie EU-Shopify-Startseiten 2026

Prüfen Sie Ihren Shop kostenlos

Sehen Sie, welche Barrieren ein automatischer Check in Ihrem eigenen Shopify-Shop findet: die Startseite und, soweit Ihre robots.txt es erlaubt, Kollektions-, Produkt- und Rechtsseiten, zugeordnet zu WCAG und EN 301 549. Kostenlos, Ergebnis per E-Mail. Automatische Tests finden einen Teil der Barrieren, nicht alle.

Shop kostenlos prüfen

Häufige Fragen

Ist das Shopify-Theme Dawn barrierefrei?

Dawn bringt viele gute Grundlagen mit: Der Viewport erlaubt Zoom, Icon-Links im Header haben versteckte Textnamen und automatisch wechselnde Slides sind standardmäßig aus. Barrierefrei ist ein Shop damit aber noch nicht. Farben, Bilder, Texte, Sektionen und Apps wählen Sie, und dort entstehen die meisten Barrieren.

Welches Shopify-Theme ist am barrierefreiesten?

Das lässt sich nicht pauschal sagen. Themes im Shopify Theme Store müssen einen durchschnittlichen Lighthouse-Barrierefreiheitswert von mindestens 90 erreichen und Anforderungen zu Tastatur, Fokus, Kontrast und Formularen einhalten. Entscheidend ist, wie Sie das Theme einstellen und welche Apps Sie einbinden.

Wie erlaube ich Zoom in meinem Shopify-Theme?

Öffnen Sie im Code-Editor die Datei layout/theme.liquid und suchen Sie das meta-Tag mit name=viewport. Entfernen Sie dort maximum-scale=1 und user-scalable=no. Dawn und Horizon setzen diese Werte in der Originalfassung nicht.

Muss ich die Slideshow abschalten?

Nein. Shopify rät von automatisch abspielenden Slideshows ab. Wenn Sie Autoplay nutzen, braucht die Slideshow eine Möglichkeit zum Anhalten (WCAG 2.2.2). Die einfachste Lösung ist, das automatische Wechseln auszuschalten.

Machen Apps mein Theme weniger barrierefrei?

Sie können. Apps fügen eigenen Code in den Shop ein, etwa Pop-ups, Bewertungs-Widgets und Chat-Buttons. In unserer Studie scheiterten Seiten mit vielen Drittanbieter-Technologien an mehr automatischen Prüfungen. Prüfen Sie jede App wie einen Teil Ihres Themes.

Über den Autor

Sieghart Michielsen. Sieghart Michielsen entwickelt Testamur, eine Shopify-App, die EU-Shops auf Barrieren prüft und einen datierten Verlauf von Prüfungen, Korrekturen und Informationen zur Barrierefreiheit führt. Er schreibt diese Ratgeber anhand der Gesetzestexte, der Angaben der Behörden und öffentlicher Daten. Er ist kein Anwalt.