Shopify Barrierefreiheit
Shopify Barrierefreiheit
Was ist Barrierefreiheit?
Barrierefreiheit bedeutet, dass digitale Inhalte und Funktionen für alle Menschen zugänglich sind – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Ziel ist es, Websites, Apps und Online-Shops so zu gestalten, dass niemand ausgeschlossen wird – weder blinde Nutzer:innen, noch Menschen mit motorischen Einschränkungen oder Lernschwierigkeiten.
Im Onlinehandel heißt das: Dein Shopify-Shop muss so aufgebaut sein, dass er auch mit Screenreadern, Tastatursteuerung oder Vergrößerungssoftware nutzbar ist.
Wichtig: Die gesetzliche Verpflichtung zur Barrierefreiheit gilt nicht für jedes Unternehmen. Ausgenommen sind Kleinstunternehmen mit weniger als 10 Mitarbeiter:innen oder einem Jahresumsatz unter 2 Millionen Euro – es sei denn, sie gehören zu einer Branche, für die diese Ausnahme nicht gilt (z.B. Telekommunikations- oder Finanzdienstleistungen).
Trotz Ausnahme empfehlen wir jedoch auch kleineren Shops, Barrierefreiheit frühzeitig mitzudenken – aus Verantwortung und im Sinne guter Nutzererfahrung.
Warum ist Barrierefreiheit so wichtig?
Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Dieses Gesetz verpflichtet viele Betreiber von Online-Shops in Deutschland dazu, ihre Shops barrierefrei zu gestalten – es basiert auf der EU-Richtlinie „European Accessibility Act“.
Die gesetzlichen Anforderungen orientieren sich maßgeblich an den internationalen Richtlinien der WCAG (Web Content Accessibility Guidelines) in Version 2.1 auf dem Niveau AA sowie der europäischen Norm DIN EN 301 549.
Für Händler:innen bedeutet das: Wer nach dem 28. Juni 2025 digital Produkte oder Services verkauft, muss bestimmte technische, gestalterische und inhaltliche Anforderungen in seinem Shop erfüllen.
Die 5 häufigsten Barrierefreiheits-Probleme
1. Fehlende Alt-Texte bei Bildern
Bilder ohne Beschreibung können von Screenreadern nicht interpretiert werden.
2. Unzureichender Farbkontrast
Gerade bei hellen Schriftfarben auf buntem Hintergrund ist der Text oft nicht lesbar.
3. Nicht korrekt eingebundene SVG-Dateien
SVGs benötigen role="img" und einen <title>-Tag, um als Bild verstanden zu werden. Ohne das kann der Screenreader den Inhalt falsch interpretieren.
Ein weiteres Problem, das sich aktuell nicht beheben lässt, betrifft die Icons der Zahlungsmethoden (z. B. Visa, PayPal, Klarna). Diese sind oft als Bilder eingebunden – jedoch ohne Alt-Texte.
Da diese Icons von Shopify eingebunden werden, können sie nicht durch Entwickler:innen manuell ergänzt oder angepasst werden.
Sie bleiben somit aus Sicht assistiver Technologien unsichtbar.
4. Formulare ohne Labels
Wenn Felder nicht beschriftet sind, wissen Nutzer:innen mit Screenreader nicht, was sie eingeben sollen.
5. Unzureichende Tastatur-Navigation
Die Navigation durch komplexe Menüstrukturen ist häufig fehleranfällig. Viele Menüs sind nicht per Tastatur vollständig erreichbar oder verlieren beim Tabben den Fokus.
Hier ist eine manuelle Überprüfung und ggf. Anpassung nötig – insbesondere bei Mega-Menüs oder Dropdowns.
So machst du deinen Shop barrierefrei
1. Struktur & Inhalte
- Alt-Texte für Bilder: Jede Grafik benötigt eine sinnvolle Beschreibung oder ein leeres Alt-Attribut, wenn sie rein dekorativ ist
- Kontraste: Der Kontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen
- Videos: Müssen mit Untertiteln und/oder Audiodeskriptionen versehen werden
Wichtig: Der Shop muss auch bei 200 % Textvergrößerung vollständig nutzbar bleiben. Das heißt, Inhalte dürfen nicht überlappen oder unleserlich werden. Darüber hinaus soll der Shop bei bis zu 400 % Zoom bzw. einer Breite von 320 px (typisch für Mobilgeräte) ohne horizontales Scrollen funktionieren. Layouts auf Basis von Flexbox oder CSS Grid helfen, diese Anforderungen umzusetzen.
2. Navigation & Bedienbarkeit
- Tastaturbedienung: Der Shop muss vollständig ohne Maus nutzbar sein – das können viele Themes von Shopify bereits gut.
- Fokusreihenfolge: Die Navigation durch interaktive Elemente muss logisch und nachvollziehbar sein.
- Zeitliche Einschränkungen: Nutzer dürfen beim Lesen oder Ausfüllen von Formularen nicht unter Druck stehen.
- Animationen: Auf blinkende Inhalte oder starke Bewegungseffekte (z. B. Slider ohne Pausefunktion) sollte verzichtet werden – sonst besteht z. B. ein Risiko für Epilepsie-Betroffene.
3. Medien & visuelle Inhalte
- Multimediale Inhalte müssen steuerbar sein (Start, Pause, Ausblenden).
- Alternativen für Drag & Drop sollten mitgedacht werden.
- Barrierefreie Captchas: Entweder durch Vorlesefunktion oder einfache Bildalternativen ersetzen.
- barrierefreie SVG-Dateien: Setzte role="img", damit der Screenreader weis, dass es sich um ein Bild handelt. Füge ein<title>-Tag als erstes Kindelement, dies fungiert wie der Alt-Text bei ein Bildern. Optional kannst du noch aria-labelledby einfügen. So wird explizit auf das <title>-Element verwiesen. Wird von vielen Screenreadern besser erkannt.
4. Lesbarkeit & Sprache
- Klare, einfache Sprache verwenden
- Vorhersehbarkeit: Benutzerführung muss konsistent sein – Buttons sollten an gewohnter Stelle auftauchen und gleich funktionieren
- Formulare brauchen gut erkennbare Labels, Hilfetexte und Hinweise bei Fehlern
- Schriftgrößen und Abstände müssen sich anpassen lassen, ohne Inhalte zu zerstören
5. Formulare
- Jedes Eingabefeld braucht eine beschriftete Zuordnung (Label-Tag)
- Fehlermeldungen sollten verständlich und eindeutig sein
- Pflichtfelder müssen klar erkennbar sein – am besten auch durch Text, nicht nur Farbe
- Auto-Suggestions & Hilfen erleichtern das Ausfüllen – im Shopify-Checkout z. B. bereits integriert
6. Technische Umsetzung
- Kompatibilität mit Hilfstechnologien: Shopify-Themes sind häufig darauf vorbereitet – Eigenentwicklungen müssen hier besonders geprüft werden
- Sauberer Code: HTML-Struktur sollte valide und semantisch sein. Kein Einsatz von <div> für Buttons o. Ä.
- Keine kritischen Zeitkomponenten: Beispielsweise sollte ein Login-Link nicht nach 30 Sekunden ablaufen
Wie kann ich Barrierefreiheit testen?
Zur Überprüfung der Barrierefreiheit deines Shops kannst du auf eine Kombination aus automatisierten Tests und manueller Prüfung setzen:
Tools & Methoden:
- WAVE (Chrome-Erweiterung)
- axe DevTools
- Google Lighthouse
- IBM Equal Access Accessibility Checker
- W3C Accessibility Evaluation Tools List
- BIK BITV-Selbsttest (für grundlegenden Schnellcheck)
Tipp: Kein Tool erkennt alle Probleme – kombiniere automatisierte Tools mit manueller Prüfung (z. B. per Tastatur, mit einem Screenreader, im Zoom-Modus usw.).
Apps zur Umsetzung von Barrierefreiheit
Accessibly
Bietet dir ein umfassendes Accessibility-Widget, automatische Alt-Texte, Kontrastanpassungen und mehr.
Accessibly im Shopify App Store herunterladen
EqualWeb
Eine KI-gestützte App, die viele Barrieren automatisch erkennt und Vorschläge oder automatische Korrekturen anbietet.
All in One Accessibility
Bietet über 50 Funktionen für verschiedene Nutzerbedürfnisse – darunter Textvergrößerung, Lesemodus, Tastaturnavigation und barrierefreie Farbpaletten.
Wichtig: Aus unserer Erfahrung zeigen sich hier jedoch deutliche Grenzen. Viele dieser Apps beheben zwar einige Probleme, decken jedoch nicht alle Anforderungen ab.
Besonders kritisch sind App-Widgets, also Oberflächenelemente, die von der App direkt in den Shop eingebunden werden (z. B. Chat-Buttons, Pop-ups oder interaktive Formulare). Diese Komponenten lassen sich oft nicht im Quellcode anpassen, da sie extern eingebunden sind. Hier liegt die Verantwortung beim jeweiligen App-Hersteller, der sicherstellen muss, dass auch diese Elemente barrierefrei gestaltet sind.
All in One Accessibility im App-Store herunterladen
Wichtig: Aus unserer Erfahrung zeigen sich hier jedoch deutliche Grenzen. Viele dieser Apps beheben zwar einige Probleme, decken jedoch nicht alle Anforderungen der Barrierefreiheit ab.
Besonders kritisch sind App-Widgets, also Oberflächenelemente, die von der App direkt in den Shop eingebunden werden (z. B. Chat-Buttons, Pop-ups oder interaktive Formulare). Diese Komponenten lassen sich oft nicht im Quellcode anpassen, da sie extern eingebunden sind.
Du möchtest mehr über Shopify Apps erfahren?
Was passiert, wenn mein Shop nicht barrierefrei ist?
Ab dem 28. Juni 2025 ist Barrierefreiheit verpflichtend. Ist dein Shop nicht konform, können folgende Konsequenzen drohen:
- Verwarnungen oder Anordnungen zur Nachbesserung
- Bußgelder durch die Marktüberwachungsbehörde
- Temporäre oder dauerhafte Sperrung deines Shops
- Meldungen durch Nutzer:innen, die eine Überprüfung auslösen
Feedback-Formular für Barrieren anbieten
Nicht alle Barrieren lassen sich sofort beheben – das ist oft auch in Ordnung. Wichtig ist, dass Nutzer:innen die Möglichkeit haben, auf Probleme hinzuweisen.
Unsere Empfehlung: Binde ein barrierefreies Feedback-Formular in deinen Shop ein. Darüber können Nutzer:innen Barrieren oder Probleme melden.
So zeigst du, dass du Barrierefreiheit ernst nimmst – und kannst nachbessern, bevor rechtliche Konsequenzen entstehen.
Fazit
Barrierefreiheit ist mehr als nur eine gesetzliche Pflicht – sie ist ein Qualitätsmerkmal für moderne Online-Shops. Wer jetzt handelt, schützt sich vor Risiken und macht seinen Shop zugänglich für alle.
Unsere Empfehlung: Beginne mit einem einfachen Check, identifiziere Lücken – und arbeite Schritt für Schritt an der Umsetzung. Viele Maßnahmen lassen sich auch ohne Programmierkenntnisse umsetzen.
Du benötigst Hilfe bei der Umsetzung von Barrierefreiheit?
