Shopify-Shop auf Barrierefreiheit prüfen
Geben Sie die Adresse einer beliebigen Seite Ihres Shopify-Shops ein: Wir prüfen sie in einem echten Browser nach WCAG 2.2 A und AA und erklären jedes Problem mit einer Lösung für Shopify-Themes und Apps. Kostenlos, ohne Anmeldung, in etwa einer Minute. Eine automatische Prüfung, kein vollständiges Audit.
- Ohne Anmeldung
- WCAG 2.2 A und AA
- Lösungen für Shopify-Themes
Aktualisiert am 14. Oktober 2026
Was der Shopify-Barrierefreiheits-Check prüft
Der Scan öffnet Ihre Seite in Chromium, führt axe-core aus – die Open-Source-Regel-Engine, die auch Lighthouse nutzt – und ordnet jeden Befund einem Erfolgskriterium der WCAG 2.2 und der EN 301 549 zu, der europäischen Norm hinter dem EAA. Jeder Befund wird mit einer Karte aus unserer Regelbibliothek erklärt, und jede Karte hat einen eigenen Hinweis für Shopify.
Sie können jede öffentliche Seite prüfen: die Startseite, eine Kollektion, eine Produktseite mit Varianten, den Warenkorb, einen Blogbeitrag oder eine Richtlinienseite. Seiten hinter einem Passwort (zum Beispiel ein Shop, der noch nicht gestartet ist) prüfen Sie mit unserer kostenlosen Browser-Erweiterung, die in Ihrem eigenen Browser läuft.
Typische Probleme in Shopify-Themes
Diese Liste stammt aus den Shopify-Hinweisen unserer Regelkarten, die beschreiben, wo das Problem meist liegt und wie man es behebt:
| Problem | Woher es in Shopify meist kommt | Wie Sie es beheben |
|---|---|---|
| Buttons ohne Namen (kritisch) | Icon-Buttons im Theme: Menü, Suche, Menge, Schließen; von Apps eingefügte Buttons | Ein Label in den Liquid-Snippets des Themes ergänzen; App-Entwickler bitten, die Buttons ihrer Apps zu korrigieren |
| Auswahllisten ohne Label (kritisch) | Variantenauswahl, Sortierung, Währungs- und Sprachauswahl | Labels in den Liquid-Snippets des Themes ergänzen |
| Formularfelder ohne Label (kritisch) | Suche, Newsletter, Kontakt- und Mengenfelder, von Apps hinzugefügte Formulare | Labels in den Liquid-Templates oder in den Einstellungen der App ergänzen |
| Zu geringer Textkontrast (schwerwiegend) | Das Farbschema des Themes | Zuerst die Farben in den Farbeinstellungen des Theme-Editors ändern, dann im Theme-CSS, wenn sie dort fest eingetragen sind |
| Bilder ohne Alternativtext (schwerwiegend) | Produktmedien und Bilder in Theme-Sections | Alternativtexte im Shopify-Admin eintragen; werden sie nicht ausgegeben, fehlt dem Bild-Tag im Liquid-Template das alt-Attribut |
| Links, die ihr Ziel nicht nennen (schwerwiegend) | Icon-Links in Kopf- und Fußzeile | Visuell versteckten Text oder ein aria-label in den Sections und Snippets des Themes ergänzen |
| Versteckte Elemente per Tastatur erreichbar (schwerwiegend) | Off-Canvas-Menüs, Drawer, Pop-ups, Karussells | Die Logik zum Ausblenden im JavaScript oder Liquid des Themes korrigieren; App-Widgets an ihren Entwickler melden |
| Überschriftenebenen, die eine Stufe überspringen (mittel) | In Sections fest eingetragene Ebenen, etwa bei Produktkarten oder Titeln in der Fußzeile | Die Tags in den Liquid-Dateien ändern; die Einstellung für die Überschriftengröße ändert meist nur das Aussehen |
| Zu kleine Touch-Ziele (mittel) | Varianten-Swatches, Mengen-Buttons, Icons | Größe oder Innenabstand im Theme-CSS erhöhen |
Der Warenkorb-Button hat keinen Namen
Was das für Ihre Besucher bedeutet
Wer einen Screenreader nutzt, hört nur „Schaltfläche“ und erfährt nicht, dass sie das Produkt in den Warenkorb legt.
So beheben Sie es in Shopify
Geben Sie dem Icon-Button in der Produktvorlage den Text „In den Warenkorb“, sichtbar oder als aria-label.
Element: .product-form > button.cart-icon
Regel: button-name · WCAG 4.1.2 Name, Role, Value (A) · EN 301 549 9.4.1.2
Theme, Apps oder Inhalt: Wer behebt was
- Das Theme bestimmt den größten Teil des Markups: Überschriften, Buttons, Menüs, Formulare und Farben. Ein Theme-Update kann Probleme beheben – oder zurückbringen; deshalb ist eine wöchentliche Prüfung wichtig.
- Apps fügen ihr eigenes Markup ein: Bewertungen, Wunschlisten, Pop-ups, Chat und Cookie-Banner. Liegt ein Problem im Widget einer App, melden Sie es mit dem Befund aus dem Bericht an den App-Entwickler.
- Der Inhalt liegt bei Ihnen: Alternativtexte für Produktbilder, Linktexte, Überschriften in Produktbeschreibungen und Seiten.
- Den Checkout betreibt Shopify. Händler können den größten Teil seines Markups nicht ändern; ein Scan Ihres Shops konzentriert sich deshalb auf Theme und Apps.
Was der Checker nicht tut
Er ändert nichts an Ihrem Shop, installiert keine App und fügt kein Overlay-Widget hinzu. Er findet den Teil der WCAG-Probleme, den eine Maschine erkennen kann. Ob ein Alternativtext sinnvoll ist, ob sich der Bestellablauf mit Tastatur und Screenreader bedienen lässt und ob Fehlermeldungen verständlich sind, muss ein Mensch beurteilen. Unsere WCAG-2.2-Checkliste zeigt, was Sie von Hand testen sollten.
Von einer Seite zum ganzen Shop
Mit einem kostenpflichtigen Tarif prüfen wir jede Woche jede Seite des Shops, zeigen, was seit der letzten Prüfung neu ist, und schreiben einen Bericht für die Inhaberin oder den Inhaber auf Englisch, Ukrainisch, Deutsch, Polnisch, Tschechisch, Rumänisch oder Russisch. Agenturen erhalten dieselben Berichte unter ihrer eigenen Marke. Eine Zeile Code in theme.liquid fügt eine Seite mit Informationen zur Barrierefreiheit und ein Formular „Barriere melden“ hinzu: siehe Einbettungscode.
Sie verkaufen an Verbraucher in der EU? Dann kann der European Accessibility Act für Ihren Shop gelten, sofern er kein Kleinstunternehmen ist. Beantworten Sie zuerst die drei Fragen des EAA-Filters. Für einen WooCommerce-Shop nutzen Sie den WooCommerce-Barrierefreiheits-Check; wie sich unser Ansatz von Overlay-Apps unterscheidet, lesen Sie unter Pandus im Vergleich.
Häufige Fragen
Gibt es einen kostenlosen Shopify-Barrierefreiheits-Check?
Ja. Geben Sie oben die Adresse einer Produkt-, Kollektions- oder Startseite ein. Wir prüfen diese eine Seite kostenlos und ohne Konto nach WCAG 2.2 A und AA und zeigen jedes Problem mit einer Lösung für Shopify.
Kann ein Checker den Shopify-Checkout prüfen?
Nur die Seiten, die ein Besucher ohne Login und ohne Bezahlung öffnen kann. Den Checkout selbst betreibt Shopify; gefundene Probleme liegen deshalb meist im Theme und in Apps: Suche, Newsletter- und Kontaktformulare, Variantenauswahl, Warenkorb und Pop-ups.
Brauche ich eine Shopify-App, um die Barrierefreiheit zu prüfen?
Nein. Unser Checker arbeitet von außen, wie ein Besucher, es wird also nichts in Ihrem Shop installiert. Für wöchentliche Prüfungen und eine Seite mit Informationen zur Barrierefreiheit fügen Sie eine Zeile Code in das Theme ein; eine Pandus-App im Shopify App Store gibt es noch nicht.
Macht eine Shopify-Barrierefreiheits-App meinen Shop barrierefrei?
Eine App, die nur ein Widget oder eine Leiste hinzufügt, ändert den Code Ihres Themes nicht, die Barrieren bleiben also bestehen. Behoben werden sie im Theme, in den Produktinhalten und in den Apps, die eigenes Markup einfügen.
Zeigt das Ergebnis, dass mein Shop den EAA oder den ADA erfüllt?
Das kann kein Tool zeigen. Eine automatische Prüfung findet einen Teil der WCAG-Probleme; Prüfungen mit Tastatur, Screenreader und Inhalt durch einen Menschen bleiben nötig. Es ist keine Rechtsberatung.