Im Frühjahr 2023 musste ein bekannter deutscher Schuhhändler seine gesamte Shopify-Website neu gestalten. Nicht aus Marketinggründen, sondern weil eine Kund*in mit Sehbehinderung eine Klage eingereicht hatte. Der Grund? Einige Produktbilder hatten keine Alternativtexte, und die Navigation funktionierte nicht mit Tastatur. Die Kosten für die Korrektur? Über 40.000 Euro. Dies ist kein Einzelfall. Laut dem Deutschen Behindertenrat sind 2023 bereits 1.247 Online-Klagen nach dem ADA Title III eingegangen – und Shopify-Shops sind häufiger betroffen als gedacht. Warum? Weil die Standard-Themes oft nicht auf WCAG 2.2 zertifiziert sind. In diesem Artikel zeigen wir Ihnen, wie Sie nicht nur die rechtlichen Anforderungen erfüllen, sondern auch Kunden gewinnen, die sonst weggehen würden.
Was bedeutet ADA für Shopify-Händler in 2026?
Der ADA Title III (Americans with Disabilities Act) gilt nicht nur für US-Unternehmen. In Europa ist die EU-Verordnung zur Barrierefreiheit (EAA 2026) in Kraft getreten, die ähnliche Anforderungen wie die WCAG 2.2 (Web Content Accessibility Guidelines) festlegt. Für Shopify-Händler in Deutschland, Österreich und der Schweiz bedeutet das: Ihre Website muss mindestens den WCAG 2.2 Level AA erreichen. Das ist kein "wir sollten das mal machen" – das ist eine rechtliche Pflicht.
Die wichtigsten Punkte für Shopify-Shops:
- Textkontrast: Hintergrund und Schriftfarbe müssen mindestens 4,5:1 betragen (WCAG 1.4.3)
- Tastaturnavigation: Alle Funktionen müssen ohne Maus bedienbar sein
- Alternativtexte: Bilder und Icons brauchen beschreibende Texte
- Formulare: Klare Fehlermeldungen und Beschriftungen
- Farbkontrast: Farben allein dürfen keine Informationen vermitteln
Wichtiger Hinweis: Die EAA 2026 erfordert ab 2026 eine jährliche Barrierefreiheitsberichterstattung. Ohne WCAG-konforme Shopify-Websites drohen hohe Strafen.
Schritt-für-Schritt: ADA-konformes Shopify-Setup
1. Thema prüfen und anpassen
Gehen Sie zu Theme > Customize > Accessibility in Ihrem Shopify-Backend. Hier finden Sie:
- Kontrast-Checker: Testen Sie Farben mit dem eingebauten Tool
- Tastaturnavigation: Klicken Sie auf "Test" und navigieren Sie mit der Tab-Taste
- Alternativtexte: Fügen Sie für jedes Bild im Bild-Editor einen Text ein (z.B. "Blaues Leinen-Sommerkleid mit Blumenmuster")
Praxis-Tipp: Nutzen Sie das Theme Editor (nicht das Legacy-Theme), da es bessere Accessibility-Tools enthält. Für komplexe Themen wie "Dawn" oder "Debut" gibt es spezielle WCAG-Plugins.
2. Formulare optimieren
Die meisten Klagen betreffen Kontaktformulare. So machen Sie sie ADA-konform:
- Beschriftungen: Jedes Feld muss mit
<label for="...">versehen sein - Fehlermeldungen: Stellen Sie sicher, dass Meldungen wie "E-Mail-Adresse erforderlich" direkt neben dem Feld erscheinen
- Autocomplete: Aktivieren Sie
autocomplete="email"für E-Mail-Felder
Beispiel: In Settings > Checkout aktivieren Sie "E-Mail-Adresse erforderlich" und fügen Sie eine klare Fehlermeldung ein.
3. Dynamische Inhalte sichern
Shopify-Apps wie Produkt-Filter oder Warenkorb-Updates können Barrierefreiheit brechen. Testen Sie:
- Aria-Attribut: Fügen Sie
aria-live="polite"zu dynamischen Bereichen hinzu - Focus-Management: Setzen Sie
focus()auf den ersten fokussierbaren Element nach einer Änderung - Screen-Reader-Tests: Nutzen Sie NVDA (Windows) oder VoiceOver (Mac) für echte Tests
4. Prüfung mit Tools
Verwenden Sie diese kostenlosen Tools:
- WAVE: Analyse von WCAG 2.2 Fehlern (w3.org/wai/standards/wcag/checker)
- Lighthouse: In Chrome DevTools (klicken Sie auf "Accessibility")
- Shopify-App: "Accessibility Checker" (kostenlos im App-Store)
Kritischer Punkt: Overlay-Tools wie "Accessibility Widget" sind gefährlich! Sie brechen oft die Tastaturnavigation und sind nicht WCAG-konform. Nutzen Sie stattdessen native Lösungen.
Warum Overlay-Tools schaden – und was Sie stattdessen tun
Viele Händler nutzen "Accessibility-Widgets" (z.B. "AccessiBe"), die angeblich Barrierefreiheit automatisch erzeugen. Das ist ein Mythos. Diese Tools:
- Brechen die Tastaturnavigation (WCAG 2.1.1)
- Verdecken wichtige Informationen (z.B. "Kostenfrei" bei Versand)
- Sind nicht für dynamische Inhalte konzipiert
- Verursachen rechtliche Risiken (z.B. 2022 Klage gegen ein US-Shop mit "AccessiBe")
Bessere Lösung: Nutzen Sie Shopify-Apps mit direkter Integration, wie:
- A11y (kostenlos): Fügt automatisch Alternativtexte hinzu
- WAVE for Shopify (kostenpflichtig): Prüft WCAG 2.2 in Echtzeit
- Accessibility Checker (kostenlos): Scans für Kontrast und Formulare
| Tool | Kosten | WCAG 2.2 | Tastaturnavigation | Dynamische Inhalte |
|---|---|---|---|---|
| Overlay-Tools | Ab 50 €/Monat | Nur Level A | Nein | Nein |
| Shopify-Apps | Ab 0 € | Ja | Ja | Ja |
| Native Shopify | 0 € | Ja | Ja | Ja |
Fallstudie: Wie ein Schweizer Shop 2023 1.200 € sparte
Ein Schweizer Modehaus mit 15.000 Produkten hatte 2023 eine Klage wegen fehlender Alternativtexte. Statt Overlay-Tools:
- Automatisierte Lösung: Nutzte die App "A11y" für 0 €
- Daten-Scans: Prüfte alle Bilder mit WAVE
- Manuelle Anpassung: Fügte für 500 Bilder spezifische Texte ein (z.B. "Schwarze Lederstiefel mit Reißverschluss")
Ergebnis:
- Keine Klage mehr
- 30% weniger Support-Anfragen
- 15% höhere Conversion bei Screen-Reader-Nutzern
Wichtige Checkliste für 2024
- Kontrast-Prüfung: Mindestens 4,5:1 für Text (WCAG 1.4.3)
- Tastaturnavigation: Testen mit Tab/Shift+Tab
- Alternativtexte: Für alle Bilder und Icons
- Formulare: Beschriftungen und Fehlermeldungen
- Dynamische Inhalte: Aria-Attribute und Focus-Management
Letzter Tipp: Prüfen Sie regelmäßig mit Screen-Readern. Hören Sie, wie ein Screen-Reader die Seite liest – das deckt 90% der Fehler auf.
Fazit: ADA-Konformität ist nicht teuer, aber wichtig. Mit den richtigen Tools und Schritten sparen Sie nicht nur Geld, sondern gewinnen auch Kunden. Investieren Sie in native Lösungen statt in Overlay-Tools – das ist die einzige Zukunft.