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 (bzw. barrierefrei) ist.
• US-Vergleiche nutzen WCAG 2.x AA als Maßstab; die Umsetzung nach WCAG 2.2 AA erfüllt den technischen Standard, auf den sich die Vorschriften in den USA, der EU, Großbritannien, Kanada und Australien beziehen.
• Die Zahl der Klagen zur Barrierefreiheit steigt weiter: 2024 wurden in den USA mehr als 4.000 ADA-Webklagen eingereicht, und bei etwa jeder vierten war bereits ein Accessibility-Widget auf der Website installiert.
• Accessibility-Overlays machen einen Shop nicht barrierefrei. Die Anpassungen, die rechtlich Bestand haben, sind Änderungen am zugrunde liegenden Theme-Code.
• Die meisten Fehler entstehen durch sechs wiederkehrende, leicht zu behebende Probleme: kontrastarmer Text, fehlender Alt-Text, 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 senken ein und dasselbe Projekt sind. In den USA hat bis zu jeder vierte Erwachsene eine Behinderung,¹ und ein nicht barrierefreier Shop schließt unbemerkt Screenreader-Nutzer, reine Tastatur-Nutzer, sehbehinderte und farbblinde Kunden aus. Die Anpassungen, die diesen Menschen den Checkout ermöglichen, sind genau dieselben, die auch von Gerichten und Aufsichtsbehörden gefordert und belohnt werden.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Entwicklung und hat vielen Shopify-Marken geholfen, barrierefreie, schnelle Storefronts bereitzustellen. Wir sind seit über vier Jahren im Shopify-Bereich aktiv und entwickeln Fudge, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store. Unsere Haltung zum Thema Barrierefreiheit deckt sich mit dem Konsens der Accessibility-Ingenieure: Repariere den Code, verstecke das Problem nicht hinter einem Widget. Warum das so ist, erklären wir im gesamten Leitfaden.

Macht Shopify deinen Shop ADA-konform?

Die Plattform Shopify ist nicht das, was verklagt wird. Es ist dein Shop.

Shopify bietet eine barrierefreie Ausgangsbasis. Themes im Shopify Theme Store müssen bei getesteten Seitentypen einen durchschnittlichen Lighthouse-Accessibility-Score von mindestens 90 erreichen, und Shopifys kostenloses Dawn-Theme kommt mit semantischem HTML, Skip-Links und sichtbaren Fokus-Indikatoren.² Aber ein Lighthouse-Score von 90 ist nicht gleichbedeutend mit vollständiger WCAG-Konformität. Automatisches Scoring prüft nur einen Bruchteil der Erfolgskriterien, daher ist kein Theme garantiert von Haus aus WCAG 2.2 AA-konform.

Entscheidend für die Compliance ist meist das, was du obendrauf packst: Custom 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 gibt dir eine Plattform. Dein Theme und dein Content entscheiden, ob der Shop konform ist. Für eine detaillierte Antwort auf die Frage auf Plattformebene, schau dir unseren Beitrag Ist Shopify ADA-konform? an.

Für wen das Gesetz eigentlich gilt

Wenn du online an die Öffentlichkeit verkaufst, gelten die Gesetze zur Barrierefreiheit mit an Sicherheit grenzender Wahrscheinlichkeit auch für dich. Das schiere Volumen an Rechtsstreitigkeiten macht das deutlich.

2024 wurden in den USA mehr als 4.000 ADA-Klagen im Bereich der digitalen Barrierefreiheit eingereicht, und E-Commerce und Einzelhandel waren mit rund drei Vierteln der Fälle das Hauptziel.³ Die Anzahl der Klagen blieb auch 2025 hoch.⁴ Davon sind nicht nur große Marken betroffen. Serienkläger und eine kleine Anzahl von Anwaltskanzleien machen den Großteil des Volumens aus, das oft mit einem Abmahnschreiben beginnt, das stillschweigend beigelegt wird, bevor es überhaupt zu einem öffentlichen Fall wird.

Das Unbequeme für Shop-Betreiber: Ein installiertes Accessibility-Tool schützt dich nicht. Bei etwa jeder vierten Klage im Jahr 2024 wurde eine Website genannt, auf der bereits ein Accessibility-Widget oder Overlay lief.³

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, die provinzialen und bundesstaatlichen Richtlinien zur Barrierefreiheit in Kanada sowie der australische Disability Discrimination Act fordern alle WCAG AA. Keines dieser Gesetze steht im Widerspruch zur Einhaltung von WCAG 2.2 AA. Da die Version 2.2 die Kriterien von 2.1 enthält, erfüllst du mit ihr den technischen Standard, auf den sich all diese Bestimmungen beziehen. Deshalb empfehlen wir, WCAG 2.2 AA als dein einziges Ziel zu betrachten.

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:

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

Wenn Shop-Betreiber zum ersten Mal von Gesetzen zur Barrierefreiheit hören, ist die verlockendste Lösung oft ein Overlay: ein einzelnes Skript von einem Anbieter wie accessiBe, UserWay oder AudioEye, das verspricht, deine Website automatisch konform zu machen. Es funktioniert nicht und kann dein Risiko sogar erhöhen.

Ein Overlay ist einfach JavaScript, das sich über dein bestehendes HTML legt. Es kann die grundlegenden Probleme nicht umschreiben, weil automatisierte Tools nur einen Bruchteil der WCAG-Probleme erkennen und beheben können. Eine Untersuchung von Deque zeigt, dass automatisierte Tests nur etwa 16 der 50 Erfolgskriterien von WCAG 2.1 AA abdecken – das ist rund ein Drittel, sodass die Mehrheit ungelöst bleibt.⁹

Die Accessibility-Community nimmt da kein Blatt vor den Mund. Mehr als 1.000 Experten für Barrierefreiheit, darunter Mitwirkende an den WCAG selbst und Ingenieure hinter bekannten Screenreadern, haben das Overlay Fact Sheet unterzeichnet. Darin wird festgehalten, dass Overlays unzuverlässig sind und keine Compliance gewährleisten können.¹⁰ Die National Federation of the Blind hat sie ebenfalls verurteilt.

Die Rechtslage ist ebenso eindeutig. 2025 verhängte die FTC eine rechtskräftige Strafe in Höhe von 1.000.000 $ gegen accessiBe wegen der irreführenden Behauptung, das Widget könne jede Website WCAG-konform machen.¹¹ Und wie oben erwähnt, richtete sich rund ein Viertel der ADA-Webklagen von 2024 gegen Websites, auf denen bereits ein Widget installiert war.³ Das Overlay hat die Klage nicht verhindert.

Wir gehen in unserem Guide, warum Accessibility-Overlays scheitern, ausführlich darauf ein. Die Kurzfassung: Ein Overlay ist ein wiederkehrender Kostenfaktor, der das Problem nur versteckt, anstatt es zu lösen.

Wie du deinen Shopify-Shop auditierst

Ein echtes Audit kombiniert automatisierte Scans mit manuellen Tests, 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 bringen die meisten der sechs häufigsten Fehler schnell ans Licht. Wenn du lieber Scans direkt aus deinem Shopify-Adminbereich heraus durchführen möchtest, vergleicht unsere Übersicht der besten Shopify Accessibility-Apps spezielle Scanner-Apps und erklärt, welche du besser meiden solltest.

Manueller Durchgang. Da automatisierte Tools nur etwa ein Drittel der WCAG-Kriterien testen können, schließe eine manuelle Prüfung an:

• Navigiere mit der Tastatur (Tab, Shift+Tab, Enter) durch den gesamten Kaufprozess. Kannst du jedes Element, einschließlich Warenkorb und Checkout, erreichen und bedienen?
• 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 überschneidet.

Für die vollständige Methode – einschließlich Page-Sampling, Screenreader- und Inhaltsprüfungen sowie Tipps zur Protokollierung deiner Ergebnisse – schau in unseren Guide zur Durchführung eines Website Accessibility Audits.

Wie man Barrierefreiheit richtig umsetzt

Jede dauerhafte Lösung ist eine Änderung an deinem Theme-Code. Das ist der Teil, den Overlays ignorieren, und der Teil, der tatsächlich dem Gesetz entspricht.

Die meisten Fixes sind unkompliziert, sobald du weißt, wo sie zu finden sind:

• Füge Produkt- und Content-Bildern beschreibende alt-Texte hinzu.
• Füge Buttons und Links, die nur aus Icons bestehen, barrierefreie Labels (aria-label oder sichtbaren Text) hinzu.
• Verknüpfe jedes Formularfeld mit einem <label>.
• Passe die für Text verwendeten Markenfarben an, bis sie das Kontrastverhältnis von 4,5:1 für normalen Text erfüllen.
• Setze das lang-Attribut auf der Seite.
• Stelle sicher, dass Focus-States sichtbar sind und die Reihenfolge der Tastaturnavigation logisch ist.

Hier kommt Fudge ins Spiel. Als KI-Operator für Shopify-Shops kann es dein Live-Theme auf Barrierefreiheit prüfen, wenn du danach fragst, und die gefundenen Probleme dann direkt in nativem Liquid, CSS und JavaScript beheben. Jeder Fix kommt als Entwurf mit einer Vorschau, und nichts geht live, bevor dein Team es freigegeben hat. Weil der Output echter Code und kein injizierter Layer ist, hält er Stand wie der Fix eines Entwicklers, und es gibt kein zusätzliches Skript, das die Seite verlangsamt. Es passt auch natürlich zu verwandten Aufgaben wie dem Hinzufügen strukturierter Daten und der allgemeinen Shop-Bearbeitung.

Das Modell, das wir empfehlen und das Fudge befolgt, besteht aus drei Schritten: Sichtbar machen, was repariert werden muss, es an der Quelle reparieren und nach Theme-Updates und Content-Änderungen erneut prüfen, damit eine Änderung nicht klammheimlich wieder einen Fehler einführt.

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