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

Wichtigste Erkenntnisse

• Shopify bietet dir eine barrierefreie Grundlage, aber dein Theme, deine Inhalte und deine 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, und die Umsetzung dieses Standards erfüllt gleichzeitig die Vorschriften der USA, der EU, Großbritanniens, Kanadas und Australiens.
• Klagen im Bereich Barrierefreiheit nehmen weiter zu: 2024 wurden in den USA mehr als 4.000 ADA-Web-Klagen eingereicht, und in etwa 1 von 4 Fällen wurde eine Website verklagt, die bereits ein Accessibility-Widget installiert hatte.
• Accessibility-Overlays machen einen Shop nicht rechtssicher. Die Anpassungen, die rechtlich Bestand haben, sind Änderungen am zugrundeliegenden 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.

Barrierefreiheit ist einer der wenigen Bereiche, in denen das Richtige zu tun und das rechtliche Risiko zu minimieren dasselbe Projekt sind. Etwa jeder vierte Erwachsene hat eine Behinderung, und ein nicht barrierefreier Shop schließt Screenreader-Nutzer, Nutzer, die nur mit der Tastatur navigieren, Käufer mit Sehschwäche und farbblinde Kunden still und leise aus. Die Anpassungen, die diesen Menschen den Checkout ermöglichen, sind genau dieselben, die auch von Gerichten und Aufsichtsbehörden honoriert werden.

Dieser Guide erklärt, was Shopify ADA-Compliance 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 oberflächlich zu verdecken.

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.9 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 nach Titel III des Americans with Disabilities Act (ADA) verklagt, den Gerichte so auslegen, dass er Websites als „Orte der öffentlichen Beherbergung“ (places of public accommodation) abdeckt. Es gibt keine bundesstaatliche Verordnung, die die genauen technischen Anforderungen für private Unternehmen vorschreibt, daher werden bei Vergleichen und Gerichtsurteilen die WCAG 2.x AA als De-facto-Standard herangezogen.

Staatliche Gesetze verleihen dem Ganzen finanziellen Nachdruck. Der kalifornische Unruh Civil Rights Act sieht einen gesetzlichen Schadensersatz von 4.000 $ pro Verstoß vor, und New York ist durchweg einer der Bundesstaaten mit dem landesweit höchsten Aufkommen an Klagen.⁴ Für einen tieferen Einblick in die rechtliche Seite der USA, einschließlich der Frage, wie Abmahnungen (Demand Letters) und Vergleiche typischerweise ablaufen, lies unseren Guide zur ADA-Website-Compliance.

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 gesamte WCAG auswendig lernen, um den Großteil deines Risikos zu minimieren. Die jährliche WebAIM Million Analyse der Top-1-Million-Startseiten ergab in ihrem Bericht vom Februar 2026, dass 95,9 % erkennbare WCAG-Fehler aufwiesen, mit durchschnittlich 56,1 Fehlern pro Seite.⁷

Das Auffällige daran ist, wie konzentriert diese Fehler sind. Rund 96 % aller erkannten Fehler fallen in sechs Kategorien, und alle sechs sind maschinell erkennbar und weit verbreitet:

Fehler	Was das bedeutet	Typische Shopify-Ursache
Text mit geringem Kontrast	Text hebt sich zu schwach vom Hintergrund ab	Markenfarben werden für Fließtext oder Buttons verwendet
Fehlender Alt-Text	Bilder ohne Textalternative	Produkt- und Lifestyle-Bilder, die ohne Alt-Text hochgeladen wurden
Fehlende Formular-Labels	Eingabefelder ohne programmatisches Label	Such-, Newsletter- und benutzerdefinierte Formularfelder
Leere Links	Links ohne erkennbaren Text	Nur-Icon-Links (Warenkorb, Social Media) ohne Label
Leere Buttons	Buttons ohne erkennbaren Text	Nur-Icon-Buttons (Menü, Schließen) ohne Label
Fehlende Seitensprache	Kein lang-Attribut auf der Seite	Benutzerdefinierte oder stark bearbeitete Themes

Das sind die schnellsten Erfolge, da sie eindeutig sind und in den meisten Stores vorkommen. Die Behebung ist eine Änderung im Theme-Code und keine Einstellung, die du einfach umlegst. Wir gehen die Fehlerbehebung für jeden davon in So behebst du die sechs häufigsten Shopify-Accessibility-Fehler durch.

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 maschinell erkennbare Fehler zu finden: axe DevTools, WAVE oder Lighthouse (in Chrome integriert). Diese bringen die meisten der sechs häufigsten Fehler schnell ans Licht. Wenn du Scans lieber direkt in deinem Shopify-Adminbereich durchführen möchtest, vergleicht unsere Übersicht der besten Shopify-Accessibility-Apps spezielle Scanner-Apps und erklärt, welche du besser vermeiden solltest.

Manueller Test. Da automatisierte Tools nur einen Bruchteil der WCAG-Probleme erkennen, 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, einschließlich Warenkorb und Checkout, erreichen und nutzen?
• Schalte einen Screenreader ein (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 sich überlappt.

Die Kombination aus einem automatisierten Scan und einem manuellen Test deckt die überwiegende Mehrheit der relevanten Probleme ab. Für die vollständige Methode, einschließlich der Stichprobenauswahl von Seiten und der Protokollierung deiner Ergebnisse, lies unseren 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

Footnotes

1. Accessibility-Anforderungen und Best Practices im Shopify Theme Store, shopify.com/partners/blog/theme-store-accessibility-requirements und shopify.dev/docs/storefronts/themes/best-practices/accessibility. ↩

2. UsableNet-Berichte zu Klagen im Bereich der digitalen Barrierefreiheit 2024 und 2025, usablenet.com. ↩ ↩² ↩³

3. EcomBack-Bericht zu ADA-Website-Barrierefreiheitsklagen 2025, ecomback.com. ↩

4. California Unruh Civil Rights Act (4.000 $ gesetzliches Minimum pro Verstoß); Anzahl der eingereichten Klagen an Bundesgerichten in New York, adatitleiii.com. ↩

5. European Accessibility Act (Richtlinie (EU) 2019/882), anwendbar seit dem 28. Juni 2025; EN 301 549 integriert WCAG 2.1 AA. ↩ ↩²

6. WCAG 2.2 wurde am 5. Oktober 2023 zur W3C-Empfehlung, w3.org/WAI/standards-guidelines/wcag. ↩

7. WebAIM Million, Bericht vom Februar 2026: 95,9 % der Top 1.000.000 Startseiten wiesen erkennbare WCAG-Fehler auf, im Durchschnitt 56,1 Fehler pro Seite, webaim.org/projects/million. ↩

8. Overlay Fact Sheet, unterzeichnet von mehr als 1.000 Accessibility-Experten, overlayfactsheet.com. ↩

9. FTC-Beschluss, der accessiBe zur Zahlung von 1.000.000 $ verpflichtet, vorgeschlagen im Januar 2025 und rechtskräftig im April 2025, ftc.gov. ↩