SevirantaIhren Shopify-Shop barrierefrei machen: ein praktischer Leitfaden
5. Juni 2026
Kurze Antwort. Shopify legt eine gute Basis, liefert aber keinen barrierefreien Shop „ab Werk". Die meisten Fehler stecken in Ihrem Theme, Ihrem Content und Ihren Apps — und genau die lassen sich oft themenweit in einem Zug beheben. Gehen Sie die sechs Punkte unten durch (Kontrast, Alt-Texte, Überschriften, Apps, Tastatur, Sprache) und Sie haben den Löwenanteil im Griff.
Warum reicht Shopify allein nicht aus?
Ein Shopify-Theme ist eine Vorlage. Ob Ihre Website WCAG erfüllt, hängt davon ab, wie dieses Theme gebaut ist, welche Farben Sie gewählt haben, welche Apps Sie installiert haben und wie Sie Ihre Produkte gepflegt haben. Zwei Shops mit demselben Theme können also sehr unterschiedlich abschneiden. Die gute Nachricht: Weil vieles über das Theme wiederkehrt, deckt eine Korrektur oft Hunderte Seiten ab.
1. Prüfen Sie Ihren Farbkontrast
Der häufigste Fehler. Gehen Sie in Ihrem Dashboard zu Online Store → Themes → Customize → Theme settings (Zahnrad) → Colors und sorgen Sie dafür, dass Text und Hintergrund mindestens 4,5:1 Kontrast haben (3:1 für großen Text). Achten Sie besonders auf Button-Texte, Preislabels, Links — und auf den Text auf Ihrem Add to cart-Button. Einmal richtig eingestellt, gilt es shopweit. Siehe Farbkontrast: die WCAG-Anforderung und wie Sie ihn messen.
2. Geben Sie Ihren Produktfotos Alt-Texte
Gehen Sie zu Products, klicken Sie ein Produkt an und scrollen Sie zu Media →
klicken Sie auf das Bild → Add alt text. Beschreiben Sie kurz und sachlich, was zu
sehen ist (z. B. „Schwarzer Herrenschuh aus Wildleder mit Schnürung"), keine
Marketingsprache. Beginnen Sie bei Ihren meistverkauften Produkten und Ihren
Homepage-Bannern. Dekorative Bilder erhalten ein leeres Alt-Attribut (alt="").
3. Prüfen Sie Ihre Überschriftenstruktur
Verwenden Sie Überschriften in logischer Reihenfolge (H1 → H2 → H3) und nicht nur zur Optik. Im Shopify-Editor sehen Sie die Überschriften in Ihren Sektionen und Rich-Text-Blöcken; überspringen Sie keine Ebenen.
4. Achten Sie auf Ihre Apps
Das ist oft die größte Fehlerquelle. Apps für Bewertungen, Chat, Pop-ups und Filter injizieren ihren eigenen Code — regelmäßig über iFrames oder das Shadow DOM — in Ihr Theme, und der enthält häufig Buttons ohne Namen, falsches ARIA oder Elemente, die sich nicht mit der Tastatur bedienen lassen. Installieren Sie also nicht blindlings jede App und testen Sie Ihre Website immer mit aktivierten Apps. Erweist sich eine App als nicht barrierefrei, steigen Sie auf eine Alternative um, die die WCAG-Normen einhält.
5. Testen Sie mit der Tastatur
Probieren Sie Ihre Website einmal ganz ohne Maus: nur mit der Tab-Taste und Enter. Erreichen Sie alles — Menü, Filter, Warenkorb, Kasse — und sehen Sie jederzeit, wo der Fokus steht? Viele Menschen navigieren so, und es legt Hürden schnell offen.
6. Prüfen Sie Ihre Spracheinstellung
Sorgen Sie dafür, dass Ihr Theme das richtige Sprachattribut setzt, damit ein
Screenreader die korrekte Aussprache wählt. Gehen Sie zu Themes → Actions (⋯) → Edit
code, öffnen Sie layout/theme.liquid und prüfen Sie, dass das <html>-Tag die
Sprachvariable enthält: <html lang="{{ request.locale.iso_code }}">. Shopify regelt
das meist gut, prüfen Sie es aber bei der Nutzung von Übersetzungs-Apps nach.
Häufige Shopify-Fehler und ihre Korrektur
| Shopify-Element | Häufiger Fehler | Die Korrektur |
|---|---|---|
| Buttons | zu helle Schrift auf dem „Zur Kasse"-Button | Kontrast in den Theme-Einstellungen auf mindestens 4,5:1 |
| Produktfotos | Dateiname als Beschreibung (product_v2.png) | funktionalen Alt-Text über Media hinzufügen |
| Warenkorb-Pop-up | Schließkreuz (X) ohne Label | aria-label="Warenkorb schließen" im Template |
| Barrierefreiheits-App | ein Overlay-Widget installieren | vermeiden — repariert Ihren Code nicht und schützt nicht vor Klagen |
Hilft eine Barrierefreiheits-App aus dem Shopify App Store?
Nein. Suchen Sie im App Store nach „accessibility", finden Sie Dutzende Apps, die versprechen, Ihren Shop mit einem Klick per Widget compliant zu machen. Fallen Sie nicht darauf herein: Sie reparieren Ihr Basis-Theme nicht, und Aufsichtsbehörden prüfen den rohen Quellcode Ihres Shops. Das strukturelle Lösen in Theme und Content ist der einzige Weg, der standhält — und es bringt Ihnen besseres SEO und eine schnellere Ladezeit. Mehr dazu in warum ein Overlay-Widget Sie nicht schützt.
Erfüllt mein Shopify-Shop damit das Gesetz?
Diese sechs Punkte decken den größten Teil dessen ab, was ein automatisierter Test feststellt, aber „erfüllen" geht weiter: Es hängt von Ihrem gesamten Theme, Ihren Apps und Ihrem Content zusammen ab. Ob der European Accessibility Act auf Sie zutrifft, lesen Sie in unserer Checkliste. Und beachten Sie: eine Overlay-App löst das nicht — sie repariert Ihren Theme-Code nicht.
Wie weiß ich, wo mein Shopify-Shop aktuell steht?
Der schnellste Weg: Scannen Sie kostenlos eine Seite. Sie sehen pro Befund, was falsch ist und wie Sie es lösen — und weil vieles über Ihr Theme läuft, lösen Sie es oft in einem Zug für Ihren gesamten Shop. In weniger als 60 Sekunden, ohne Konto.