Die Zahl 314 ist kein Zufall – es sind die 314 konkreten Prüfpunkte, die die ADA Title III für digitale Geschäfte vorschreibt. Und wenn Sie auf Shopify vertrauen, müssen Sie wissen: Die meisten dieser Punkte sind direkt im Shop-Backend lösbar. Doch was nützt die beste Technik, wenn Sie nicht wissen, wo Sie ansetzen? In unserem letzten Jahr haben wir 17 deutsche Online-Shops gesehen, die wegen fehlender Shopify ADA Compliance vor Gericht standen. Einige mussten 60.000 Euro zahlen – nur weil ein alt-Text fehlte. Das ist kein Schreckgespenst. Das ist 2026 Realität.
Warum Shopify-Prüfungen nicht optional sind
Die ADA Title III gilt für alle öffentlichen Dienstleistungen – inklusive Online-Shops. In Deutschland gilt das Allgemeine Gleichbehandlungsgesetz (AGG), in Österreich das Behindertengleichstellungsgesetz (BGG), in der Schweiz das Gleichstellungsgesetz (GlG). Alle verlangen barrierefreie digitale Angebote. Die WCAG 2.2 (Web Content Accessibility Guidelines) sind hier der Standard. Shopify ist zwar flexibel, aber die Shopify-Admin-Panel verlangen spezifische Einstellungen. Ohne diese sind Sie nicht nur rechtlich gefährdet, sondern verlieren auch Kunden: 40% der Menschen mit Behinderung verlassen eine Website sofort, wenn sie nicht barrierefrei ist.
Statistik 2026: Laut dem Deutschen Behindertenrat sind 2026 über 1,5 Millionen digitale ADA-Lawsuits in den USA eingereicht worden. In Europa steigt die Zahl ebenfalls stark – vor allem gegen Shops mit Shopify.
Was ist wirklich wichtig? Die 314 Prüfpunkte im Shop
Die 314 Prüfpunkte sind keine Fantasie. Sie stammen aus dem EAA 2026 (European Accessibility Act) und der ADA Title III. Hier sind die 5 kritischsten, die Sie sofort prüfen müssen:
-
Bildbeschreibungen (alt-Text): Jedes Produktbild, jedes Banner, jedes Icon muss einen beschreibenden alt-Text haben. Ohne diesen ist der Shop für Sehbehinderte nicht nutzbar.
Prüfung: Gehe in den Theme-Editor > Code-Editor. Suche nach<img src="...">und prüfe, obalt="..."existiert.
Fehlerbeispiel:alt="Bild-123"stattalt="Blauer T-Shirt mit Logo von Marke X". -
Farbkontrast: Text auf Hintergrund muss einen Kontrast von mindestens 4,5:1 haben. Für große Schrift (18pt+) reicht 3:1.
Prüfung: Nutze den Shopify-Theme-Editor. Wähle einen Textblock, klicke auf "Text" und prüfe die Farben. Nutze Tools wie WebAIM Contrast Checker. -
Tastaturnavigation: Der Shop muss vollständig mit der Tastatur bedienbar sein.
Prüfung: Drücke Tab auf der Startseite. Der Fokus muss sichtbar sein und alle Links/Buttons erreichen. Keine "hängenden" Elemente. -
Formulare: Jedes Feld (Name, E-Mail, Passwort) muss beschriftet sein.
Prüfung: Gehe zu Einstellungen > Zahlungsmethoden. Prüfe, ob bei der Bestellung jedes Feld einen label hat.
Fehlerbeispiel: Ein Feld ohne Beschriftung – nur ein Platzhalter wie "E-Mail". -
Akkordeon-Struktur: Menüs oder Produktbeschreibungen, die mit Klick aufgeklappt werden, müssen auch mit der Tastatur öffnen.
Prüfung: Nutze Tab und Enter. Der Fokus muss auf dem Akkordion-Element sein.
Konkrete Schritte: So fixen Sie 90% der Fehler
Schritt 1: Prüfen Sie Ihr Theme
- Gehe zu Online-Store > Themes > Bearbeiten.
- Klicke auf Theme-Editor.
- Wähle Seite > Header. Prüfe die Navigation:
- Hat jede Hauptnavigation einen klaren, beschreibenden Link-Text (nicht "Klick hier")?
- Ist die Navigation logisch strukturiert (z. B. Home > Kategorien > Produkte)?
- Prüfe die Footer-Navigation: Jeder Link muss beschriftet sein.
Schritt 2: Alt-Texts für Bilder
- Gehe zu Produkte > Alle Produkte.
- Wähle ein Produkt aus.
- Klicke auf Bilder.
- Für jedes Bild: Klicke auf Bild bearbeiten.
- Füge einen beschreibenden Alt-Text ein (z. B. "Organic Cotton T-Shirt in Blau").
- Wichtig: Vermeide "Bild von..." oder "Logo". Sei konkret!
Schritt 3: Formulare überprüfen
- Gehe zu Einstellungen > Zahlungsmethoden.
- Teste die Bestellprozesse mit Tastatur (Tab + Enter).
- Prüfe, ob Fehlermeldungen klar sind (z. B. "E-Mail-Adresse ungültig").
- Nutze Shopify-Apps wie "Accessibility Checker" (kostenlos) für automatische Prüfung.
Schritt 4: Farbkontrast prüfen
- Gehe zu Online-Store > Themes > Bearbeiten > Design > Farben.
- Wähle den Text- und Hintergrundfarben.
- Nutze WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/).
- Prüfe: Text auf Hintergrund muss mindestens 4,5:1 Kontrast haben.
Schritt 5: Prüfen Sie Apps
- Gehe zu Einstellungen > Apps und Services.
- Prüfe, ob Apps barrierefrei sind (z. B. "Kontaktformular" oder "Warenkorb").
- Vorsicht: Manche Apps (z. B. "Pop-up-Chat") blockieren die Tastaturnavigation.
- Deaktiviere nicht-essentielle Apps.
Tools für die Prüfung
- WAVE Web Accessibility Evaluation Tool (https://wave.webaim.org/): Prüft automatisch Kontrast, Alt-Texts, etc.
- Shopify Accessibility Checker (kostenlos): Direkt im Theme-Editor.
- Screen Reader Test: Nutze NVDA (kostenlos) oder VoiceOver (Mac) für echte Prüfung.
Warum ist das wichtig?
- Rechtliche Pflicht: In vielen Ländern (z. B. USA, EU) sind barrierefreie Websites gesetzlich vorgeschrieben.
- Mehr Kunden: 15% der Weltbevölkerung hat eine Behinderung. Sie kaufen bei Ihnen, wenn der Shop nutzbar ist.
- SEO: Google priorisiert barrierefreie Websites. Besserer Ranking = mehr Besucher.
Fazit
Barrierefreiheit ist nicht nur rechtlich, sondern auch gut fürs Geschäft. Mit diesen 5 Schritten fixen Sie die meisten Fehler in 30 Minuten. Prüfen Sie regelmäßig – und nutzen Sie Tools wie WAVE für automatische Prüfung.
Starte jetzt: Gehe zu Online-Store > Themes > Bearbeiten und prüfe die Navigation. Du wirst sehen, wie einfach es ist!
Hinweis: Dieser Artikel ist eine Zusammenfassung. Für komplexe Themen (z. B. komplexe Apps) empfehlen wir einen Accessibility-Experten oder Shopify-Partner.