Start › Ratgeber

Shopify Dawn Theme barrierefrei machen: 9 konkrete Fixes

Dawn ist das Standard-Theme von Shopify und technisch eine der besseren Ausgangslagen: Es hat einen Skip-Link, sichtbare Fokusrahmen und semantische Grundstrukturen. Trotzdem ist ein Dawn-Shop nicht „automatisch barrierefrei“. Die meisten Probleme entstehen durch das, was Sie im Theme-Editor einstellen, durch Inhalte und durch installierte Apps. Hier sind die Fixes, die wir in Dawn-Shops am häufigsten umsetzen – geordnet nach Aufwand.

Keine Rechtsberatung: Dieser Artikel gibt den Stand unserer Recherche (November 2026) wieder und ersetzt keine Rechtsberatung. Für eine verbindliche Einschätzung Ihres Einzelfalls wenden Sie sich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.

1. Farbschemata im Theme-Editor prüfen

Dawn arbeitet mit Farbschemata (Theme-Einstellungen › Farben). Sobald Sie Markenfarben eintragen, kann der Kontrast unter die Mindestwerte der WCAG fallen: 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente. Prüfen Sie jedes Schema mit Text, Button und Hintergrund. Wie das geht, erklärt unser Artikel Kontrast prüfen nach WCAG.

2. Text auf Bildbannern absichern

Im Abschnitt „Bild-Banner“ liegt Text direkt auf einem Foto. Je nach Bildausschnitt ist er auf dem Handy kaum lesbar. Nutzen Sie die Overlay-Deckkraft des Abschnitts (z. B. 40–60 %) oder die Option, den Text unter dem Bild anzuzeigen. Wichtige Aussagen gehören nie nur ins Bild.

3. Automatisch wechselnde Slideshows abschalten

Die Dawn-Slideshow kann automatisch rotieren. Bewegte Inhalte, die länger als fünf Sekunden laufen, müssen sich anhalten lassen (WCAG 2.2.2). Am einfachsten: Autorotation deaktivieren. Noch besser: statt Slider ein einzelnes, klares Banner.

4. Alt-Texte für alle Produktmedien pflegen

Dawn gibt den Alt-Text aus, den Sie pro Bild im Produkt-Admin hinterlegen. Fehlt er, liest ein Screenreader oft nur den Dateinamen oder nichts. Pflegen Sie Alt-Texte für jedes Medium und für Bilder in Abschnitten („Bild mit Text“, Kollektionsbilder). Beispiele finden Sie in Alt-Texte für Produktbilder richtig schreiben.

5. Badges „Sale“ und „Ausverkauft“

Die Badge-Farben kommen ebenfalls aus den Farbschemata. Weißer Text auf hellem Rot oder Grau verfehlt oft 4,5:1. Wählen Sie ein dunkleres Badge-Schema.

6. Überschriftenstruktur in Abschnitten

Viele Dawn-Abschnitte erlauben eine Überschriftengröße, aber die HTML-Ebene folgt dem Abschnitt. Achten Sie darauf, dass die Startseite eine sinnvolle H1 hat und Sie nicht fünf gleichrangige „Highlights“ als Überschriften nutzen, die eigentlich Fließtext sind.

7. Linktexte und Buttons benennen

„Mehr erfahren“ fünfmal auf einer Seite ist für Screenreader-Nutzer ohne Kontext. Formulieren Sie Buttons eindeutig, etwa „Alle Sneaker ansehen“. Für Icon-Links (Social-Media im Footer) setzt Dawn Beschriftungen; prüfen Sie aber selbst ergänzte Icons.

8. Apps nachtesten

Bewertungs-Widgets, Cookie-Banner, Newsletter-Pop-ups und Chat-Apps sind die häufigste Fehlerquelle. Testen Sie jedes Pop-up mit der Tastatur: Lässt es sich mit Tab erreichen und mit Escape schließen? Bleibt der Fokus im Dialog? Ein Overlay-Widget löst diese Probleme nicht – siehe Overlay-Widgets und BFSG.

9. Eigene Code-Anpassungen prüfen

Wer Dawn per Code angepasst hat, hat manchmal den Fokusrahmen per outline: none entfernt oder Buttons als <div> gebaut. Suchen Sie in base.css und eigenen Snippets nach outline und nach klickbaren Elementen ohne <button> oder <a>.

So testen Sie in 15 Minuten

  1. Startseite, eine Kollektion, eine Produktseite und den Warenkorb nur mit Tab, Shift+Tab, Enter und Escape bedienen.
  2. Browser-Zoom auf 200 % stellen und prüfen, ob nichts abgeschnitten ist.
  3. Einen automatischen Test (z. B. WAVE oder Lighthouse) auf jede dieser Seiten laufen lassen.

Automatische Tools finden nur einen Teil der Fehler. Den Rest deckt die manuelle Prüfung ab. Die vollständige Liste finden Sie in der BFSG-Checkliste für Shopify.

Quellen

Häufige Fragen

Ist das Shopify Dawn Theme barrierefrei?

Dawn bietet eine gute technische Grundlage, etwa Skip-Link und sichtbare Fokusrahmen. Ob Ihr Shop barrierefrei ist, hängt aber von Farben, Inhalten, Alt-Texten und Apps ab und muss geprüft werden.

Reicht ein Wechsel auf Dawn für das BFSG?

Ein Theme-Wechsel allein reicht nicht. Entscheidend ist der gesamte Shop inklusive Inhalten, Apps und Formularen, gemessen an WCAG 2.1 AA.

Welche Fehler sind in Dawn-Shops am häufigsten?

Zu geringe Kontraste durch eigene Farbschemata, Text auf Bildbannern, fehlende Alt-Texte, automatisch laufende Slideshows und nicht tastaturbedienbare App-Pop-ups.