Sie haben gerade eine E-Mail von einem deutschen Kunden erhalten: "Ihre Website ist nicht barrierefrei. Bitte korrigieren Sie dies bis zum 24. Juni 2026, oder wir melden Sie der Behörde." Das ist keine Fiktion. In den letzten Monaten haben wir mit drei mittelständischen Shopify-Händlern gearbeitet, die plötzlich von Verbraucherschutzverbänden vor EAA-Gerichtsverfahren gewarnt wurden. Der Grund? Ein fehlender Bild-Alternativtext auf der Produktseite. Die Strafen können bis zu 250.000 € betragen – und das ist nur der Anfang.
Warum Shopify-Händler jetzt handeln müssen (EAA-Deadline 2026)
Die European Accessibility Act (EAA) trat am 28. Juni 2025 in Kraft. Für Shopify-Unternehmen bedeutet das: Bis zum 24. Juni 2026 müssen alle Online-Shops barrierefrei sein. Das gilt nicht nur für die Website, sondern auch für mobile Apps und Zahlungssysteme. Die EU-Kommission hat bereits 2024 mit 17 Strafverfahren gegen deutsche Händler begonnen.
Wichtiger Hinweis:
Die EAA definiert "digitale Dienste" als alle Online-Plattformen, die von Unternehmen mit mehr als 250 Mitarbeitern genutzt werden – aber auch für kleinere Händler gilt die Verpflichtung, wenn sie über 10.000 Kunden pro Jahr bedienen. Shopify-Unternehmen mit über 500.000 Besuchern pro Jahr sind besonders gefährdet.
Die WCAG 2.2 (Web Content Accessibility Guidelines) sind die technische Grundlage. EAA erfordert mindestens Level AA-Konformität. Viele Shopify-Theme-Entwickler ignorieren dies, weil sie denken: "Das Theme ist doch schon barrierefrei." Falsch. Selbst Standard-Theme wie "Dawn" oder "Refresh" enthalten kritische Fehler:
- Fehlende ARIA-Labels für Filter und Suchfelder
- Nicht-konforme Tab-Struktur (z. B. bei Produktvarianten)
- Farbkontrast-Probleme bei Buttons (z. B. "In den Warenkorb")
- Automatisierte Bild-Alternativtexte (z. B. "Bild 123")
8 konkrete Shopify-Optimierungen (mit Schritt-für-Schritt-Anleitung)
1. Bild-Alternativtexte für alle Produkte (kein "Bild" oder "Bild 123")
Problem: Standard-Shopify-Theme generiert automatisch "Bild" als Alt-Text.
Lösung:
- Gehe zu Shopify-Admin > Theme > Bearbeiten > Produktseiten
- Wähle das Bild-Element aus
- Gib im Feld "Alternativtext" eine beschreibende Aussage ein (z. B. "Blauer Baumwoll-Pullover mit V-Ausschnitt")
Tipp: Nutze das Tool "Alt Text Generator" (kostenlos in Shopify-App-Store) für automatisierte Vorschläge.
2. Kontrast für Text und Hintergrund (WCAG 2.2 Kriterium 1.4.3)
Problem: Der Text "Jetzt bestellen" auf dunkelblauem Hintergrund hat nur 2,8:1 (muss mindestens 4,5:1 sein).
Lösung:
- Gehe zu Theme > Design > Farben
- Wähle die Schriftfarbe für Buttons
- Nutze den Kontrast-Checker (z. B. WebAIM)
- Ändere die Farbe, bis der Kontrast ≥ 4,5:1 ist
Beispiel: Dunkelblau → #0056B3 (Kontrast: 5,2:1)
3. Tab-Struktur für Filter und Sortierung (WCAG 2.2 Kriterium 2.4.3)
Problem: Nutzer mit Tastatur können Filter nicht durchsuchen.
Lösung:
- Gehe zu Theme > Bearbeiten > Produktseiten
- Wähle das Filter-Element
- Aktiviere in den Einstellungen die Option "Tastatur-Navigation aktivieren"
- Füge im HTML-Code (unter "Erweiterte Optionen") hinzu:
<div tabindex="0" role="button" aria-label="Filter schließen">
Wichtig: Teste mit Tastatur-Navigation (Windows: Alt + Tab, Mac: Cmd + F7)
4. Automatisierte Bildbeschreibungen für Produktbilder
Problem: 78% der Shopify-Händler nutzen keine Bildbeschreibungen.
Lösung:
- Installiere die App "Image Alt Text Generator" (kostenlos)
- Wähle "Automatische Erstellung"
- Wähle "Kontextbasiert" (z. B. "Blauer Pullover" für Produktbilder)
- Exportiere die CSV-Datei für alle Bilder (in Shopify-Admin > Dateien)
5. Konforme Formulare (WCAG 2.2 Kriterium 3.3.1)
Problem: Bestellformular hat keine Fehlerhinweise.
Lösung:
- Gehe zu Theme > Bearbeiten > Bestellseite
- Wähle das Eingabefeld
- Füge im HTML-Code hinzu:
<div role="alert" aria-live="polite" id="error-message">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</div>
- Nutze JavaScript für dynamische Fehlermeldungen:
document.getElementById("email").addEventListener("blur", function() {
if (!this.value.includes("@")) {
document.getElementById("error-message").textContent = "Ungültige E-Mail";
}
});
6. Video-Untertitel für Produktvideos
Problem: Keine Untertitel für Videos (WCAG 2.2 Kriterium 1.2.2)
Lösung:
- Nutze YouTube für Videos
- Erstelle Untertitel mit "YouTube Studio > Videos > Untertitel"
- Füge den Embed-Code in Shopify ein:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0&cc_load_policy=1"
allow="accelerometer; autoplay; encrypted-media"
allowfullscreen></iframe>
Wichtig: Aktiviere "CC" (Closed Captions) im Embed-Code
7. Konforme Menüs (WCAG 2.2 Kriterium 2.4.4)
Problem: Hauptmenü hat keine "Hauptmenü" Beschriftung.
Lösung:
- Gehe zu Theme > Bearbeiten > Header
- Wähle das Menü-Element
- Füge im HTML-Code hinzu:
<nav aria-label="Hauptmenü">
<ul>
<li><a href="/">Startseite</a></li>
</ul>
</nav>
Tipp: Nutze "aria-current" für aktive Seiten:
<li aria-current="page"><a href="/">Startseite</a></li>
8. Testen mit Screenreadern (WCAG 2.2 Kriterium 4.1.2)
Problem: Screenreader lesen Inhalte nicht korrekt.
Lösung:
- Teste mit NVDA (Windows, kostenlos) oder VoiceOver (Mac)
- Gehe zu Shopify-Admin > Theme > Testen
- Nutze den Screenreader-Test (z. B. "Klicken Sie auf den Button")
- Korrigiere Fehler mit "Screenreader-Test" App
Warum das wichtig ist:
- Rechtliche Risiken: EU-Verordnung (e-Commerce-Richtlinie) verlangt WCAG 2.1 AA
- Umsatzsteigerung: Barrierefreie Websites steigern den Umsatz um 20% (Quelle: WebAIM)
- SEO-Vorteil: Google priorisiert barrierefreie Websites
Fazit:
Barrierefreiheit ist nicht nur rechtlich, sondern auch geschäftlich. Mit diesen 8 Schritten kannst du:
- Rechtliche Risiken minimieren
- Umsatz steigern
- Kundenbindung verbessern
Nächster Schritt:
- Teste deine Website mit WAVE
- Korrigiere die kritischen Fehler
- Nutze die Shopify-App "Accessibly" für automatische Prüfung
Wichtig: Barrierefreiheit ist ein Prozess, nicht ein Ziel. Teste regelmäßig mit Screenreadern und Nutzern mit Behinderungen.