Shopify-Accessibility und ADA/WCAG-Compliance: Der komplette Guide

Das Wichtigste in Kürze

• Shopify bietet dir eine barrierefreie Grundlage, aber dein Theme, dein Content und deine Apps entscheiden darüber, ob dein Shop tatsächlich ADA- bzw. rechtlich compliant (barrierefrei) ist.
• Der rechtliche Standard, auf den sich fast jeder Fall beruft, ist WCAG 2.2 AA. Wenn du dich daran hältst, erfüllst du gleichzeitig die Vorschriften der USA, der EU, Großbritanniens, Kanadas und Australiens.
• Klagen wegen mangelnder Barrierefreiheit (Accessibility) nehmen weiter zu: 2024 wurden in den USA über 4.000 entsprechende Web-Klagen eingereicht. Bei etwa jeder vierten war auf der Website bereits ein Accessibility-Widget installiert.
• Accessibility Overlays machen einen Shop nicht rechtssicher. Die Anpassungen, die juristisch Bestand haben, sind echte Änderungen am entsprechenden Theme-Code.
• Die meisten Fehler lassen sich auf sechs wiederkehrende, leicht zu behebende Probleme zurückführen: kontrastarmer Text, fehlende Alt-Texte, fehlende Formular-Labels, leere Links, leere Buttons und eine fehlende Seiten-Sprache.

Digitale Barrierefreiheit (Accessibility) ist einer der wenigen Bereiche, in denen das Richtige zu tun und rechtliche Risiken zu minimieren, dasselbe Projekt sind. Etwa jeder vierte Erwachsene hat eine Behinderung, und ein nicht barrierefreier Shop grenzt Screenreader-Nutzer, reine Tastatur-Nutzer, seheingeschränkte und farbblinde Kunden still und leise aus. Die Fixes, die diesen Menschen den Checkout ermöglichen, sind genau dieselben, die auch Gerichte und Regulierungsbehörden honorieren.

Dieser Guide erklärt dir, was ADA- und Accessibility-Compliance bei Shopify wirklich bedeutet, welche Gesetze für deinen Shop gelten, was WCAG 2.2 AA verlangt und wie du die Probleme an der Wurzel packst, anstatt sie nur provisorisch zu verstecken.

Warum du uns vertrauen kannst

Jacques verfügt über mehr als 15 Jahre Entwicklererfahrung und hat vielen Shopify-Brands geholfen, barrierefreie, schnelle Shops zu launchen. Wir sind seit über vier Jahren im Shopify-Umfeld tätig und haben Fudge entwickelt – einen KI-Store-Builder und -Editor mit einer 5,0-Sterne-Bewertung im Shopify App Store. Unsere Haltung zu Accessibility entspricht dem Konsens von Accessibility-Engineers: Behebe den Code, verstecke das Problem nicht hinter einem Widget. Warum das so wichtig ist, erklären wir im gesamten Guide.

Ist Shopify ADA-konform (barrierefrei)?

Nicht die Plattform Shopify wird verklagt. Es ist dein Shop.

Shopify bietet dir eine zugängliche Ausgangsbasis. Themes im Shopify Theme Store müssen bei den getesteten Seitentypen einen durchschnittlichen Lighthouse-Accessibility-Score von mindestens 90 erreichen. Das Standard-Theme Dawn kommt bereits mit semantischem HTML, Skip-Links und sichtbaren Fokus-Indikatoren.¹ Ein Lighthouse-Score von 90 bedeutet jedoch nicht vollständige WCAG-Konformität. Automatisierte Tests prüfen nur einen Bruchteil der Erfolgskriterien. Kein Theme ist also von Haus aus garantiert WCAG 2.2 AA-konform.

Was du obendrauf packst, entscheidet meist darüber, ob dein Shop Compliance-Anforderungen erfüllt oder verfehlt: Custom Sections, Third-Party-Apps, Bilder ohne Alt-Texte, kontrastarme Markenfarben und Content-Anpassungen, die über lange Zeit von Leuten gemacht wurden, die Accessibility nicht auf dem Schirm hatten. Shopify liefert dir die Plattform. Dein Theme und dein Content entscheiden, ob der Shop rechtssicher ist.

Für wen das Gesetz eigentlich gilt

Wenn du online öffentlich Waren verkaufst, gelten die Gesetze zur Barrierefreiheit mit Sicherheit auch für dich. Die schiere Menge an Klagen untermauert das.

2024 wurden in den USA über 4.000 ADA-bezogene Klagen im Bereich der digitalen Barrierefreiheit eingereicht. E-Commerce und Retail waren mit etwa drei Vierteln der Fälle das Hauptziel.² Auch 2025 blieben die Klagen auf hohem Niveau.³ Davon sind nicht nur große Marken betroffen. Serienkläger und ein paar wenige Anwaltskanzleien machen den Großteil der Fälle aus. Oft beginnt es mit einem Abmahnschreiben (Demand Letter), das zu einer leisen Einigung zwischen 5.000 und 75.000 US-Dollar führt, bevor es überhaupt ein offizieller Fall wird.

Das Unbequeme für Shop-Betreiber: Die Installation eines Accessibility-Tools (Widget) schützt dich nicht davor. Bei rund jeder vierten Klage im Jahr 2024 war auf der betroffenen Website bereits ein Accessibility-Overlay im Einsatz.²

Die Gesetze zur Shop-Barrierefreiheit

Es gibt keine einzelne globale Regel, aber die verschiedenen Rechtssysteme laufen alle auf denselben technischen Standard hinaus.

USA: ADA Title III

US-E-Commerce-Websites werden primär nach Title III des Americans with Disabilities Act verklagt, den Gerichte so auslegen, dass auch Websites als „Orte öffentlicher Zugänglichkeit“ gelten. Es gibt keine föderale Vorschrift, die technische Anforderungen für Betreiber verbindlich auflistet. Deshalb verwenden Gerichte bei Verfahren logischerweise WCAG 2.x AA als inoffiziellen Standard.

Gesetze der Bundesstaaten sorgen für den finanziellen Biss. Der Unruh Civil Rights Act in Kalifornien erlaubt Schadensersatzforderungen von 4.000 US-Dollar pro Verstoß und US-Gerichte aus New York verzeichnen beständig die höchste Klagenflut landesweit.⁴

Europäische Union: der European Accessibility Act

Der European Accessibility Act (Richtlinie 2019/882, in DE bekannt als BFSG / Barrierefreiheitsstärkungsgesetz) ist am 28. Juni 2025 in Kraft getreten. Er schließt den digitalen Handel (E-Commerce) ausdrücklich mit ein und betrifft auch Verkäufer außerhalb der EU, die ihre Produkte an EU-Verbraucher verkaufen.⁵

Der EAA verweist auf die harmonisierte Norm EN 301 549, die die WCAG 2.1 AA für Webinhalte integriert, und verlangt eine Erklärung zur Barrierefreiheit (Accessibility Statement). Es gibt eine Ausnahme für Kleinstunternehmen (Micro-Enterprises) von Dienstleistern mit weniger als 10 Mitarbeitern und einem Jahresumsatz von maximal 2 Millionen Euro, allerdings gilt diese nicht für produzierendes Gewerbe und Importeure.⁵

Der Rest der Welt

Der britische Equality Act 2010, Kanadas Accessibility-Gesetze sowie der australische Disability Discrimination Act drängen alle in Richtung WCAG AA. Niemals gibt es einen Konflikt, wenn du nach WCAG 2.2 AA entwickelst. Wenn du die aktuellen Anforderungen erfüllst, deckst du automatisch auch die Vorschriften älterer Regelwerke ab. Deshalb empfehlen wir, 2.2 AA als grundlegende Basis anzusteuern.

Der Standard: Was WCAG 2.2 AA verlangt

WCAG 2.2 wurde im Oktober 2023 zur W3C-Empfehlung verabschiedet und bildet die aktuell logische Version der Richtlinien.⁶ Das Level AA ist die sogenannte Konformitätsstufe, die in Gerichtsverfahren angewendet wird.

Die WCAG ist um vier Prinzipien strukturiert, die man auch unter dem englischen Akronym POUR zusammenfasst:

• Perceivable (Wahrnehmbar). Nutzer müssen den Content wahrnehmen können. Textalternativen für Bilder, Untertitel für Videos, ausreichend hoher Farbkontrast.
• Operable (Bedienbar). Nutzer müssen das Interface bedienen können. Vollständiger Zugang per Tastatur, sichtbar markierter Fokus, keine Tastaturfallen, ausreichend Zeit zur Erledigung von Eingaben.
• Understandable (Verständlich). Content und Bedienung sind logisch und nachvollziehbar. Klare Labels (Beschriftungen), konsistente Navigation, hilfreiche Fehlermeldungen.
• Robust. Der Content funktioniert mit assistiven Technologien. Valides, semantisches HTML, das von Screenreadern interpretiert werden kann.

Für deinen Shop ist der absolut kritischste Pfad (Funnel) von der Produktseite bis zum beendeten Checkout. Wenn jemand, der auf die Tatstatur oder einen Screenreader angewiesen ist, den Kauf abbricht, verlierst du hier nicht nur direkten Umsatz – genau das ist auch das klassischste Szenario, auf das Kläger der Branche abzielen.

Die sechs Fehler hinter fast jeder Beschwerde

Du musst nicht die komplette WCAG auswendig lernen, um dein Risiko drastisch zu reduzieren. Die jährliche „WebAIM Million“-Analyse (Report vom Februar 2026 zu einer Million Startseiten) ergab, dass unfassbare 95,9 % messbare WCAG-Fehler aufwiesen – mit gut 56,1 Fehlern im Durchschnitt pro Seite.⁷

Was daran wirklich auffällt: Die Fehler konzentrieren sich. Rund 96 % aller detektierten Fehlermuster fielen unter sechs einfache Kategorien, die alle maschinell auffindbar und sehr gängig sind:

Das sind absolute Quick Wins, da sie komplett eindeutig bestimmbar sind und in den meisten Shops vorkommen. Ihre Behebung muss direkt im Theme-Code (und nicht als simpler Toggle-Schalter) erfolgen.

Warum dich Accessibility Overlays nicht rechtssicher machen

Hören Shop-Betreiber zum ersten Mal von Barrierefreiheits-Gesetzen, scheint oft ein Overlay (Widget) verlockend: Eine einzelne Lösung oder Subscriptions von accessiBe, UserWay oder AudioEye, die vollautomatisch deine Seite WCAG-konform abdecken möchte. Doch dieser Schuss kann gewaltig nach hinten losgehen und dein Risiko sogar steigern.

Ein Overlay ist ein JavaScript, das als Layer lediglich optisch über deinem vorhandenen HTML-Code liegt. Es korrigiert keineswegs das eigentliche Problem darunter. Hinzu kommt, dass automatische Scans ohnehin bloß etwa 30 bis 40 % der wirklichen WCAG-Punkte aufdecken können. Die allermeisten Aspekte bleiben ohnehin unberührt.

Die Accessibility-Community nimmt da kein Blatt vor den Mund. Über 1.000 Experten der Branche (darunter auch WCAG-Mitentwickler und Engineers namhafter Screenreader) raten eindrücklich durch das unterzeichnete „Overlay Fact Sheet“ ab. Es besagt ganz objektiv, dass Overlays absolut unzuverlässig sind und keine Compliance generieren können.⁸ Der amerikanische Blindenverband (National Federation of the Blind) rät ebenso strikt davon ab.

Rechtlich verhält es sich gleichermaßen glasklar. Die entsprechende Aufsichtsbehörde verhängte 2025 in den USA eine Forderung von satten 1.000.000 $ gegen accessiBe bezüglich deren gezielter Fehlinformationen.⁹ Zudem, wie schon berichtet, rund ein Viertel aller aktuellen US-Klagen (2024) traten bereits gegen Shops an, die ein Widget am Laufen hatten.² Overlays schützen dich absolut nicht vor der Klage.

Weitere Einblicke findest du auch im Blogpost über das Scheitern von Accessibility Overlays. Die kurze Zusammenfassung: Ein Overlay sorgt für fixe Subscriptions, deckt Probleme lediglich augenscheinlich ab, löst sie jedoch in keinem Moment.

Wie du deinen Shopify-Shop auditierst

Da automatische Tools ganz einfach bei Weitem nicht genügen, benötigt dein Audit grundsätzlich zwei Schichten.

Automatisierter Scan. Als Ausgangsbasis ziehst du klassisch maschinell identifizierbare Schwächen heran (axe DevTools, WAVE, Lighthouse). Diese werfen meist recht flink einen der oben genannten Top-Six-Fehler aus.

Manuelle Prüfung (Manual pass). Im Anschluss an deinen automatischen Scan fährst du zwingend einen Quickcheck durch, da diese ja bloß Teilabschnitte erfassen:

• Navigiere dich mittels Tastatur durch den Kaufprozess und versuche bis zur Zahlungsbestätigung fortzufahren (mit Tab, Shift+Tab, Enter). Lassen sich alle Komponenten im Checkout verlässlich ohne Maus ansteuern?
• Prüfe auch deinen Webshop mit aktiviertem ScreenReader (bei Windows z. B. als kostenloses NVDA und bei Mac nativ VoiceOver).
• Teste das Design auf ein Zoom-Layout deiner Fenster-Ratio auf 200 %, checke Überschneidungen und ob Container abgeschnitten werden.

Die simple Summation von einem Automation-Scan mit kurzem Nachfühlen (manuelles Testen) macht sichere 95 % auf deinem Radar bemerkbar.

Wie man Barrierefreiheit richtig umsetzt

Eine langlebige Lösung ist exklusiv eine reale Anpassung in deinem eigenen Theme-Code. Hier überpinseln Overlays schlichtweg deine Problematik. Wir verlangen aber rechtssichere Ergebnisse.

Der Großteil der Code-Changes ist absolut easy umsetzbar, sofern du erst einmal ihre Fehlerquelle benennen kannst:

• Bringe präzise visuelle Angaben der Bilddateien per Alt-Attribut (alt) unter
• Gewähre Nur-Icon Buttons oder Links entsprechende Erfassbarkeit (z. B. Bezeichnungen über aria-label)
• Assigne Formularfelder (Inputs) verknüpfend per <label>
• Passe unleserliche Textfarben-Ratios (Brand Colors) an, um 4,5:1 Helligkeitsauswertungen beizubehalten
• Bestimme standardmäßig die Spracheingabe der Seite per lang-Attribut im Dokument
• Halte Keyboard-Bedienprozesse logisch sortiert sowie als sichtbaren Fokus deklariert

Hier helfen AI-gestützte Store-Builder optimal nach. Fudge integriert sich in dein Live-Theme, legt zugrundeliegende Accessibility-Fehler offen und löst diese vollumfänglich als nativen Liquid-, CSS-, oder JavaScript-Code innerhalb deiner App. Im Sinne von direkter Code-Korrektur statt überladender Injection (Layering), agieren diese Fix-Elemente vollkommen wie eine manuelle Entwickler-Leistung – barrierefrei, ohne das Tempo (Pagespeed) einzuschränken. Die Ergänzungen können wunderbar als Hybrid mit strukturierter Dateneingabe und klassischem Store-Editing fungieren.

Unser Empfehlungsmodell rund um Fudge verpacken wir in drei simplen Steps: Fehler identifizieren, fundamental & source-basiert fixen, anschließendes Monitoring, um zukünftige Bugs in Form neuer Content-Uploads effektiv zu blocken.

Veröffentliche eine Erklärung zur Barrierefreiheit

Nach gelungener Umsetzung stellst du abschließend einen Zugang als Accessibility-Erklärung (Accessibility Statement) zur Verfügung. Entsprechend dem EAA/BFSG ist dieses absolute Vorschrift. Es verknüpft ehrliche Kommunikation bei Unzulänglichkeiten (inkl. Target-Sicht auf WCAG 2.2 AA) mit klaren Anweisungen, wohin User derlei Blockaden melden sollen. Nutze direkte Beschreibungen (statt Boilerplates oder Floskeln).

FAQ

Ähnliche Beiträge

Accessibility Overlays machen deinen Shopify Store nicht compliant

23 Jun 2026

AI Shopify Development: Der komplette Guide für den Aufbau von AI-First Stores

16 Jun 2026

Shopify Updates Juni 2026: Was für Händler wirklich wichtig ist

15 Jun 2026