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

Die wichtigsten Erkenntnisse

• Shopify bietet dir eine barrierefreie Basis, aber dein Theme, deine Inhalte und Apps entscheiden darüber, ob dein Shop tatsächlich ADA-konform 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 nehmen weiter zu: 2024 wurden in den USA mehr als 4.000 ADA-Web-Fälle eingereicht, und in etwa jedem vierten Fall ging es um eine Website, die bereits ein Accessibility-Widget installiert hatte.
• Accessibility-Overlays machen einen Shop nicht rechtssicher. Die Anpassungen, die juristisch standhalten, sind Änderungen am zugrunde liegenden Theme-Code.
• Die meisten Fehler entstehen durch sechs wiederkehrende, lösbare Probleme: kontrastarmer Text, fehlender Alt-Text, fehlende Formular-Labels, leere Links, leere Buttons und eine fehlende Angabe der Seitensprache.

Barrierefreiheit ist einer der wenigen Bereiche, in denen das richtige Handeln und die Minimierung rechtlicher Risiken ein und dasselbe Projekt sind. Etwa einer von vier Erwachsenen hat eine Behinderung, und ein nicht barrierefreier Shop schließt Screenreader-Nutzer, Nur-Tastatur-Nutzer, sehbehinderte Käufer und farbblinde Kunden stillschweigend aus. Die Anpassungen, die diesen Menschen den Checkout ermöglichen, sind genau die, die von Gerichten und Aufsichtsbehörden honoriert werden.

Dieser Guide behandelt, was Shopify ADA-Konformität eigentlich bedeutet, welche Gesetze für deinen Shop gelten, was WCAG 2.2 AA vorschreibt und wie du die Probleme an der Wurzel packst, anstatt sie nur zu übertünchen.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Entwicklung und hat vielen Shopify-Marken dabei geholfen, barrierefreie und schnelle Storefronts an den Start zu bringen. Wir sind seit über vier Jahren im Shopify-Bereich aktiv und haben Fudge, einen KI-Shop-Builder und -Editor mit einer Bewertung von 4.8 im Shopify App Store, entwickelt. Unsere Haltung zur Barrierefreiheit entspricht dem Konsens unter Accessibility-Engineers: Repariere den Code, verstecke das Problem nicht hinter einem Widget. Warum das so ist, erklären wir in diesem Guide.

Ist Shopify ADA-konform (barrierefrei)?

Nicht die Plattform Shopify wird verklagt. Dein Shop wird es.

Shopify bietet einen barrierefreien Ausgangspunkt. Themes im Shopify Theme Store müssen einen durchschnittlichen Lighthouse Accessibility Score von mindestens 90 über alle getesteten Seitentypen hinweg erreichen, und das Standard-Dawn-Theme wird mit semantischem HTML, Skip-Links und sichtbaren Fokus-Indikatoren ausgeliefert.¹ Aber ein Lighthouse Score von 90 ist nicht dasselbe wie eine vollständige WCAG-Konformität. Automatisierte Tests prüfen nur einen Bruchteil der Erfolgskriterien, weshalb kein Theme von Haus aus garantiert WCAG 2.2 AA-konform ist.

Was du noch hinzufügst, entscheidet meist darüber, ob die Konformität erreicht wird oder nicht: benutzerdefinierte Sections, Third-Party-Apps, Bilder ohne Alt-Text, kontrastarme Markenfarben und inhaltliche Änderungen, die über Monate hinweg von Leuten gemacht wurden, die nicht an Barrierefreiheit gedacht haben. Shopify bietet dir eine Plattform. Dein Theme und deine Inhalte entscheiden, ob der Shop konform ist. Für eine gezielte Antwort zur Frage auf Plattform-Ebene, schau dir Ist Shopify ADA-konform? an.

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) ist seit dem 28. Juni 2025 anwendbar. Er deckt E-Commerce ausdrücklich als Dienstleistung ab und betrifft auch Verkäufer außerhalb der EU, die an EU-Verbraucher verkaufen.⁵

Der EAA verweist auf die harmonisierte Norm EN 301 549, die WCAG 2.1 AA für Webinhalte einschließt, und fordert eine veröffentlichte Erklärung zur Barrierefreiheit. Es gibt eine Ausnahme für Kleinstunternehmen (Dienstleister mit weniger als 10 Mitarbeitern und einem Jahresumsatz oder einer Jahresbilanzsumme von maximal 2 Millionen Euro), allerdings gilt diese Ausnahme nicht für die Produktherstellung oder den Import.⁵ Unser Guide zum European Accessibility Act für Shopify-Shops erklärt, wen genau das betrifft und was zu tun ist.

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 zu einer W3C-Empfehlung und ist die aktuelle Version der Richtlinien.⁶ Level AA ist die Konformitätsstufe, die bei rechtlichen Vergleichen herangezogen wird.

Die WCAG ist nach vier Prinzipien gegliedert, die unter dem Akronym POUR bekannt sind:

• Wahrnehmbar (Perceivable). Nutzer können die Inhalte wahrnehmen. Textalternativen für Bilder, Untertitel für Videos, ausreichender Farbkontrast.
• Bedienbar (Operable). Nutzer können die Benutzeroberfläche bedienen. Vollständiger Tastaturzugriff, sichtbarer Fokus, keine Tastaturfallen, ausreichend Zeit zur Erledigung von Aufgaben.
• Verständlich (Understandable). Inhalt und Bedienung sind vorhersehbar. Eindeutige Labels, konsistente Navigation, hilfreiche Fehlermeldungen in Formularen.
• Robust. Inhalte funktionieren mit unterstützenden Technologien. Valides, semantisches HTML, das Screenreader interpretieren können.

Für einen Shop ist der Weg von der Produktseite bis zum abgeschlossenen Checkout der Flow mit dem höchsten Risiko. Wenn ein Tastatur- oder Screenreader-Nutzer einen Kauf nicht abschließen kann, bedeutet das nicht nur entgangenen Umsatz, sondern ist auch genau das Szenario, auf das Kläger abzielen. Für eine Aufschlüsselung Kriterium für Kriterium, angewendet auf ein Storefront, siehe unsere WCAG 2.2 AA Checkliste für Shopify.

Die sechs Fehler hinter fast jeder Beschwerde

Du musst nicht die gesamten WCAG auswendig lernen, um den Großteil deines Risikos auszuräumen. Die jährliche WebAIM Million-Analyse der eine Million wichtigsten Startseiten ergab im Bericht vom Februar 2026, dass 95,9 % davon erkennbare WCAG-Fehler aufwiesen – im Durchschnitt 56,1 Fehler pro Seite.⁷

Besonders auffällig ist, wie konzentriert diese Fehler sind. Rund 96 % aller erfassten Fehler fallen in sechs Kategorien, und alle sechs sind maschinell erkennbar und weit verbreitet:

Das sind die schnellsten Erfolge („Quick Wins“), da sie eindeutig sind und bei den meisten Shops auftreten. Ihre Behebung erfordert eine Änderung im Theme-Code und ist nicht einfach nur ein Schalter, den man umlegt. Wie man jeden einzelnen davon behebt, zeigen wir im Beitrag Wie man die sechs häufigsten Barrierefreiheits-Fehler bei Shopify behebt.

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

Ein echtes Audit besteht aus zwei Ebenen, da automatisierte Tools allein nicht ausreichen.

Automatisierter Scan. Beginne mit einem kostenlosen Tool, um die maschinell erkennbaren Probleme zu finden: axe DevTools, WAVE oder Lighthouse (in Chrome integriert). Diese zeigen die meisten der sechs häufigsten Fehler schnell auf.

Manueller Test. Da automatisierte Tools nur einen kleinen Teil der WCAG-Probleme finden, solltest du im Anschluss eine manuelle Prüfung durchführen:

• Navigiere durch den gesamten Kaufprozess nur mit der Tastatur (Tab, Shift+Tab, Enter). Kannst du jedes Bedienelement erreichen und nutzen, einschließlich Warenkorb und Checkout?
• Aktiviere einen Screenreader (VoiceOver auf dem Mac, das kostenlose NVDA unter Windows) und versuche, einen Kauf abzuschließen.
• Zoome die Seite auf 200 % und stelle sicher, dass nichts abgeschnitten wird oder überlappt.

Die Kombination aus einem automatisierten Scan und einem manuellen Test findet die überwältigende Mehrheit der relevanten Probleme. Die vollständige Methode, einschließlich Seitenauswahl und wie du deine Ergebnisse protokollierst, findest du in unserem Guide zur Durchführung eines Website Accessibility Audits.

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

Ist Shopify ADA-konform? Was Händler wissen müssen

6 Jul 2026

Wie du ein Accessibility Audit für deinen Shopify-Shop machst (Kostenlose Tools)

9 Aug 2026

Der Stand der Shopify-Performance in 2026

20 Jul 2026