Shopify ADA-Compliance-Checkliste (2026)

Der Americans with Disabilities Act erwähnt Websites nicht. Es wurde 1990 geschrieben, bevor die meisten Menschen E-Mails hatten. Aber Gerichte haben immer wieder entschieden, dass ADA Title III – der Diskriminierung in „Orten öffentlicher Unterkünfte“ verbietet – für E-Commerce-Shops gilt, und Shopify-Händler werden deswegen immer häufiger verklagt. Wenn Sie in den USA online verkaufen, stellt dies kein hypothetisches Risiko dar.

Dies ist die Checkliste, die wir verwenden, wenn wir einen Shopify-Shop auf Barrierefreiheit prüfen. Es wird Sie nicht kugelsicher machen – das ist nicht der Fall –, aber es wird die Lücken schließen, nach denen die Anwälte der Kläger zunächst suchen.

Was ADA tatsächlich erfordert (es gibt keinen offiziellen Standard)

Hier ist der Punkt, der die Leute stutzig macht: Die ADA selbst benennt keinen technischen Standard für Websites. Der Kongress hat das Gesetz für das Internet nie aktualisiert, und das Justizministerium hat erklärt, dass Titel III für Online-Shops gilt, ohne formelle spezifische Regeln zu verabschieden.

In der Praxis wird diese Lücke geschlossenWCAG (Web Content Accessibility Guidelines) 2.1 oder 2.2, Stufe AA. Es ist kein Gesetz, aber es ist das, worauf sich Vergleichsvereinbarungen, Leitlinienschreiben des Justizministeriums und Gerichtsurteile immer wieder beziehen. Wenn Ihr Geschäft WCAG 2.2 AA erfüllt, sind Sie auf einer Linie mit dem, woran Sie alle Parteien in einem Rechtsstreit – Kläger, Beklagter und Richter – messen werden.

Noch zwei Dinge, die Sie wissen sollten, bevor Sie beginnen:

• Das EU-Gesetz zur Barrierefreiheit ist nun gesondert durchsetzbar(seit Juni 2025) für Unternehmen, die in die EU verkaufen, wobei die eigenen Anforderungen lose an die WCAG angelehnt sind. Wenn Sie an europäische Kunden versenden, deckt diese Checkliste größtenteils den gleichen Bereich ab.
• Compliance ist nicht binär.Sie bestehen die ADA nicht so, wie Sie eine Fahrprüfung bestehen. Sie reduzieren Ihre Gefährdung, indem Sie echte Hindernisse beseitigen, und reduzieren sie immer weiter, je mehr Sie finden.

Die Shopify ADA-Compliance-Checkliste

Arbeiten Sie diese der Reihe nach durch. Die manuelle Überprüfung jedes Abschnitts dauert einige Minuten, auch ohne Spezialwerkzeuge.

1. Bilder und Medien

• Jedes Produktbild enthält einen beschreibenden Alternativtext – nicht „IMG_2481.jpg“, nicht den Produkttitel, der ohne nützliche Details wiederholt wird, sondern eine Beschreibung, auf die ein blinder Käufer reagieren könnte („Marineblauer Wollpullover mit Rundhalsausschnitt, gefaltet, auf grauem Hintergrund“).
• Dekorative Bilder (Hintergrundtexturen, Abstandshalter) haben leere Alt-Attribute (alt=""), sodass Screenreader sie überspringen, anstatt einen Dateinamen laut vorzulesen.
• Jedes Video auf Ihrer Website verfügt über Untertitel. Für jedes Audio gibt es ein Transkript.

2. Farbe und Kontrast

• Der Textkörper weist zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 auf; Großer Text (18pt+) benötigt 3:1. Kostenlose Tools zur Kontrastprüfung bestätigen dies in Sekundenschnelle anhand der Farbpalette Ihres Themes.
• Ausverkaufsabzeichen, „Ausverkauft“-Etiketten und Formfehler hängen nicht nur von der Farbe ab. Ein rotes „Nicht vorrätig“-Etikett erfordert auch das Wort „Nicht vorrätig“ – farbenblinde Benutzer können Rot nicht von Grün unterscheiden.
• Platzhaltertext in Formularfeldern ist nicht die einzige Beschriftung. Platzhaltertext verschwindet, sobald ein Feld ausgefüllt ist, und erfüllt häufig völlig die Kontrastanforderungen.

3. Tastaturnavigation

• Jedes interaktive Element – Navigationslinks, Filter, „Zum Warenkorb hinzufügen“, Mengenauswahl, die Warenkorbschublade, Checkout-Felder – ist nur mit der Tabulator- und Eingabetaste und nicht mit der Maus erreichbar und bedienbar.
• Der Fokus ist sichtbar. Wenn Sie mit der Tabulatortaste auf eine Schaltfläche oder einen Link klicken, wird eine klare visuelle Umrisslinie angezeigt, die zeigt, wo Sie sich befinden. Bei vielen Themes wird dies aus ästhetischen Gründen weggelassenoutline: noneund ersetzen Sie es niemals.
• Modale und Warenkorb-Schubladen fangen den Fokus korrekt ein – die Tabulatortaste wechselt innerhalb des geöffneten Modals, nicht zum dahinter verborgenen Seiteninhalt – und Escape schließt sie.

4. Formulare und Kasse

• Jeder Eingang hat eine<label>programmatisch daran gebunden, nicht nur optisch in der Nähe platziert. Bildschirmleseprogramme geben die Bezeichnung bekannt, wenn das Feld den Fokus erhält; Ohne die Verbindung verkünden sie nichts Nützliches.
• Fehlermeldungen sind spezifisch („Geben Sie eine gültige Postleitzahl ein“) und werden den Bildschirmlesern beim Erscheinen angekündigt, nicht nur in roter Schrift.
• Der Checkout funktioniert von Anfang bis Ende mit einer Tastatur und einem Screenreader. Dies ist der Flow mit dem höchsten Wert, den es zu testen gilt – er ist auch umsatzkritisch, sodass Fehler hier Ihren Umsatz kosten, noch bevor sie Ihnen einen Rechtsstreit kosten.

5. Struktur und Semantik

• Überschriften folgen einer logischen Reihenfolge (ein H1, dann H2, dann H3, verschachtelt unter dem rechten H2), anstatt Ebenen zur visuellen Größenanpassung zu überspringen.
• Es gibt Orientierungsbereiche – Kopfzeile, Navigation, Hauptzeile, Fußzeile – sodass Benutzer von Bildschirmleseprogrammen zwischen Abschnitten wechseln können, anstatt sich die gesamte Seite von oben bis unten anzuhören.
• Links beschreiben ihr Ziel („Rückgabebedingungen anzeigen“, nicht „hier klicken“, das sechsmal auf einer Seite wiederholt wird).

6. Apps von Drittanbietern

Dies ist die Kategorie, die die meisten Shopify-Händler übersehen. Ihr Theme mag sauber sein, aber das Bewertungs-Widget, das Upsell-Popup, die Chat-Blase und der Countdown-Timer, die Sie aus dem App Store installiert haben, sind es oft nicht – und sie werden auf jeder Seite geladen. Prüfen Sie jede installierte App einzeln; Ein einziges kaputtes Popup kann alles andere rückgängig machen.

7. Mobile Touch-Ziele

• Schaltflächen und Links haben auf Mobilgeräten mindestens 44 x 44 Pixel und einen ausreichenden Abstand, damit ein Benutzer mit eingeschränkter Feinmotorik nicht auf die falsche Schaltfläche tippt.

So testen Sie Ihren Shop

Die manuelle Überprüfung erkennt Dinge, die automatisierte Tools übersehen, und automatisierte Tools erkennen Dinge, die manuelle Überprüfungen übersehen. Benutzen Sie beides:

1. Führen Sie zunächst einen automatischen Scan durch.Unserkostenloses AccessScan-Toolüberprüft Ihre Homepage, eine Produktseite und Ihren Warenkorb mithilfe von Axe-Core auf die WCAG 2.2 A/AA-Regeln und markiert in etwa einer Minute nach Schweregrad eingestufte Probleme. Dies ist ein wirklich nützlicher Ausgangspunkt – aber automatisierte Tests erfassen in der Regel nur 30–40 % der tatsächlichen Hindernisse. Behandeln Sie einen sauberen Scan also als einen Bodenbelag und nicht als Ziellinie.
2. Navigieren Sie auf Ihrer eigenen Website nur mit einer Tastatur.Trennen Sie Ihre Maus zehn Minuten lang vom Stromnetz und versuchen Sie, etwas zu kaufen.
3. Stichprobenkontrolle mit einem Screenreader.VoiceOver ist auf jedem Mac und iPhone kostenlos erhältlich. NVDA ist unter Windows kostenlos. Sie müssen nicht fließend sprechen – fünf Minuten auf Ihrer Homepage und beim Bezahlen werden offensichtliche Probleme schnell ans Licht bringen.
4. Führen Sie nach jedem Theme- oder App-Update einen erneuten Test durch.Barrierefreiheit ist kein einmaliges Projekt. Durch ein Theme-Update oder eine neue App können Probleme, die Sie bereits behoben haben, stillschweigend erneut auftreten.

Eine kurze Warnung zu Barrierefreiheits-Widgets

Im Shopify App Store finden Sie Apps, die eine sofortige ADA-Konformität über eine einzige Skriptinstallation versprechen – normalerweise ein kleines Barrierefreiheitssymbol in der Ecke Ihrer Website mit einem Menü mit Anzeigeanpassungen. Diese sogenannten Overlay-Widgets verhindern Klagen nicht zuverlässig. Wir haben eine vollständige Aufschlüsselung von geschriebenWarum Barrierefreiheits-Overlay-Widgets nicht so funktionieren, wie sie vermarktet werden– Lesenswert, bevor Sie eines installieren, anstatt die obige Checkliste durchzuführen.

Was eine Sanierung tatsächlich kostet

Es hängt ganz davon ab, wie weit Ihr Geschäft derzeit entfernt ist. Ein Store mit einem klaren, modernen Design und einer Handvoll sich schlecht benehmender Apps benötigt möglicherweise ein paar Tage konzentrierter Entwicklerzeit – Formulare beschriften, Kontraste korrigieren, Apps prüfen. Ein Shop, der auf einem alten, stark angepassten Theme mit Dutzenden Barrierefreiheitslücken basiert, die in benutzerdefinierten Liquid-Code integriert sind, ist ein größeres Projekt, das einer teilweisen Neugestaltung des Themes näherkommt.

In jedem Fall ist die Reparatur billiger als die Klage. Die Kosten für die Rechtsverteidigung und Beilegung von ADA-Ansprüchen in Bezug auf Web-Barrierefreiheit belaufen sich routinemäßig auf einen fünfstelligen Betrag, selbst wenn die zugrunde liegende Behebung einen Entwickler eine Woche gekostet hätte. Wenn Sie einen umfassenden Kostenvoranschlag wünschen,Devmerx integriert Barrierefreiheit in jedes von uns bereitgestellte Theme und jede Migrationund können Sanierungsarbeiten separat anbieten, wenn Sie bereits ein Geschäft haben.

Häufig gestellte Fragen

Ist Shopify ADA-konform?

Keine Plattform ist standardmäßig „ADA-kompatibel“, auch nicht Shopify. In den Checkout-Bereich und den Hauptadministrator von Shopify wurde an der Barrierefreiheit gearbeitet, aber Ihr Theme, Ihre Inhalte und jede App, die Sie installieren, liegen in Ihrer Verantwortung. Bei einem Standard-Shopify-Theme muss die obige Checkliste weiterhin auf Ihren spezifischen Shop angewendet werden.

Garantiert die Einhaltung von WCAG 2.2 AA, dass ich nicht verklagt werde?

Nein. Die Einhaltung der WCAG reduziert Ihr Risiko erheblich und verschafft Ihnen eine starke rechtliche Position, wenn ein Anspruch eintrifft, aber kein technischer Standard ist eine rechtliche Garantie. Einige Ansprüche sind opportunistisch, unabhängig davon, wie konform eine Website ist. Durch die WCAG-Konformität werden die einfachen, offensichtlichen Verstöße beseitigt, die eine Website überhaupt erst zu einem leichten Ziel machen.

Benötige ich eine Seite mit einer Erklärung zur Barrierefreiheit?

Es ist zwar nicht gesetzlich vorgeschrieben, aber eine gute Praxis. Eine kurze Seite, auf der Sie Ihr Engagement für Barrierefreiheit zum Ausdruck bringen, den angestrebten Standard (WCAG 2.2 AA) auflisten und eine Kontaktmethode für die Meldung von Hindernissen angeben, zeugt von Treu und Glauben und bietet Benutzern einen anderen Kanal als eine Klage.

Wie oft sollte ich die Barrierefreiheit erneut überprüfen?

Zumindest nach jedem Theme-Update, jeder neuen App-Installation und jedem größeren Content-Push (neue Sammlungsseiten, neue Landingpages). Viele Geschäfte erinnern vierteljährlich daran, einen vollständigen Scan durchzuführen, auch wenn sich nichts Offensichtliches geändert hat.

Verlangsamt die Behebung von Barrierefreiheitsproblemen meinen Shop?

Im Allgemeinen das Gegenteil. Semantisches HTML, sauberes Markup und weniger aufgeblähte Skripte von Drittanbietern – dieselben Korrekturen, die die Barrierefreiheit verbessern – verbessern tendenziell auch die Seitengeschwindigkeit. Die beiden Ziele stehen selten im Widerspruch.