Shopify
Barrierefreiheit in Shopify: was ab Werk hakt und wie man es behebt
Shopify ist eine gute Plattform, und trotzdem ist fast kein Shopify-Shop konform. Das ist kein Widerspruch: Was Shopify kontrolliert — der gehostete Checkout, die Infrastruktur — ist ordentlich gepflegt. Was darüber entscheidet, ob jemand kaufen kann, steckt aber im Theme, und das Theme gehört Ihnen. Diese Seite geht Komponente für Komponente durch: was hakt, welches Kriterium verletzt wird und was genau geändert wird.
Shopify macht Sie weder konform noch hindert es Sie daran. Der gehostete Checkout hilft; das Theme (Dawn eingeschlossen) bringt bekannte Barrieren im Menü, in der Produktgalerie, im Variantenwähler, in der Warenkorb-Schublade und in der Suche mit. Alle werden in den .liquid-Dateien, im JavaScript und im CSS des Themes behoben — keine davon im Adminbereich.
Was Shopify liefert und was Sie liefern
Das lohnt sich sauber zu trennen, weil das meiste Marketing beides vermischt.
Was Shopify liefert: den gehosteten Checkout, den die Plattform pflegt und verbessert, ohne dass Sie etwas tun, und die Basiskomponenten der offiziellen Themes, die von Version zu Version besser geworden sind.
Was Sie liefern: das Theme und seine Anpassungen, die installierten Apps (Popups und Suchleisten von Drittanbietern sind die größten Sünder), Ihre Bilder samt Alternativtext und die Texte Ihrer Produktseiten. Dort liegen 90 % dessen, was eine Prüfung findet.
Ein Punkt, der beim Verkauf in Europa zählt: Ein gepflegter Checkout befreit Sie nicht, denn die Pflicht betrachtet die gesamte Dienstleistung, nicht einen Abschnitt.
Die sieben Barrieren, die fast immer auftauchen
| Komponente | Was hakt | WCAG | Die Behebung |
|---|---|---|---|
Menü und Aufklappmenüsheader.liquid | Der Menü-Button aktualisiert aria-expanded nie, und Mega-Menüs fangen den Tastaturfokus ein. | 4.1.2 · 2.1.1 | aria-expanded beim Öffnen und Schließen aktualisieren und das Untermenü mit aria-controls verknüpfen. |
Produktgalerieproduct-media-gallery.liquid | Die Vorschaubilder sind Schaltflächen ohne zugänglichen Namen, die Pfeile haben nur ein Icon. | 1.1.1 · 2.4.4 | aria-label wie „Bild 2 von 7 ansehen“ vergeben und das aktive mit aria-current markieren. |
Variantenwählerproduct-variant-picker.liquid | Die gewählte Farbe unterscheidet sich nur durch Farbe, ausverkaufte Varianten werden nicht angesagt. | 1.4.1 · 1.3.1 | In fieldset mit legend gruppieren, echte Radios verwenden und „Ausverkauft“ als verborgenen Text ergänzen. |
Warenkorb-Schubladecart-drawer (JS) | Beim Öffnen bleibt der Fokus dahinter, Escape schließt nicht, und beim Schließen kehrt der Fokus nicht zurück. | 2.4.3 · 2.1.2 | Fokus beim Öffnen setzen, darin halten, mit Escape schließen und zur auslösenden Schaltfläche zurückgeben. |
Vorschlagssuchepredictive-search.liquid | Treffer erscheinen unangekündigt: Wer den Bildschirm nicht sieht, erfährt nichts davon. | 4.1.3 · 1.3.1 | Trefferzahl mit role="status" und aria-live="polite" ansagen. |
Fußbereichfooter.liquid | Das Newsletter-Feld nutzt grauen Platzhaltertext als Beschriftung, Social-Icons haben keinen Namen. | 3.3.2 · 1.1.1 | Echte, verborgene Beschriftung per for und aria-label an jedem Icon. |
Kontrast und Fokusbase.css | Sale-Badge und deaktivierte Schaltflächen bleiben unter 4,5:1; der Fokusring ist kaum sichtbar. | 1.4.3 · 2.4.7 | Diese Farben abdunkeln und dem Fokus eine 3 px starke Umrandung mit Abstand geben. |
Die Dateinamen beziehen sich auf Dawn und die davon abgeleiteten offiziellen Themes. In einem kostenpflichtigen Theme ändert sich der Pfad, das Problem nicht.
Warum das Widget aus dem App Store das nicht löst
Im Shopify App Store gibt es Dutzende Barrierefreiheits-Widgets für 20–50 € im Monat. Keines behebt etwas aus der Tabelle oben, weil keines Ihr Theme umschreibt: Sie legen eine Schicht darüber, mit Knöpfen für Kontrast und Schriftgröße. Der Fokus, der beim Öffnen der Warenkorb-Schublade verloren geht, geht weiterhin verloren, und der Größenwähler sagt weiterhin nicht, welche Größe gewählt ist.
Schlimmer noch: Manche fügen falsches ARIA auf Elementen ein, die bereits in Ordnung waren, und verschlechtern die Nutzung mit Screenreader. Wenn Sie schon eines installiert haben, reißen Sie es nicht heute heraus — rechnen Sie es aber nicht als Konformität.
Prüfen Sie Ihren Shop in zehn Minuten, ganz ohne Werkzeuge
- Legen Sie die Maus weg. Von der Startseite zu einem Produkt, eine Variante wählen, in den Warenkorb legen und in den Checkout — nur mit Tab, Umschalt+Tab, Enter und den Pfeiltasten.
- Achten Sie darauf, wo der Fokus steht, bei jedem Schritt. Sobald Sie nicht erkennen, welches Element ausgewählt ist, ist das ein Verstoß gegen 2.4.7.
- Öffnen Sie die Warenkorb-Schublade und drücken Sie Escape. Sie muss sich schließen und den Fokus zurückgeben.
- Zoomen Sie auf 200 %. Nichts darf sich überlagern oder waagerechtes Scrollen erzwingen.
- Schalten Sie Bilder im Browser ab. Verstummen Ihre Produktseiten, fehlt der Alternativtext.
Wenn davon etwas scheitert, haben Sie bereits die Liste dessen, was vor jeder Erklärung und jedem Zertifikat zu tun ist.
Möchten Sie die vollständige Liste für Ihren Shop?
Der kostenlose Scan gibt Ihnen in wenigen Minuten eine erste Karte der Barrieren Ihres Shops: ohne Konto, ohne Karte, ohne Verpflichtung.