Barrierefreiheit für Online-Shops: Was der European Accessibility Act für Sie bedeutet

Der European Accessibility Act (EAA) verpflichtet Onlineshops ab dem 28. Juni 2025, für Menschen mit Behinderungen zugänglich zu sein. Das ist keine Empfehlung — es ist Gesetz, durchsetzbar in allen EU-Mitgliedstaaten. Wenn Sie an EU-Kunden verkaufen, betrifft Sie das.

Was der EAA verlangt

Der EAA legt keine exakten technischen Standards fest, verweist aber auf WCAG 2.1 Level AA als Mindestanforderung. In der Praxis muss Ihr Shop nutzbar sein für Menschen, die:

• Nicht sehen können: Screenreader zur Navigation verwenden (blinde oder stark sehbehinderte Menschen)
• Eingeschränkte Sehkraft haben: Zoomen, hohen Kontrast verwenden oder sich Inhalte vorlesen lassen müssen
• Keine Maus benutzen können: Ausschließlich per Tastatur navigieren (motorische Behinderungen)
• Kognitive Behinderungen haben: Klare, einfache Navigation und vorhersehbare Benutzeroberflächen benötigen
• Gehörlos oder schwerhörig sind: Untertitel für Videoinhalte benötigen

Wichtige technische Anforderungen

Alternativtext für Bilder: Jedes Produktbild braucht einen beschreibenden Alt-Text. Nicht „IMG_3847.jpg", sondern „Blaues Baumwoll-T-Shirt, Rundhalsausschnitt, Vorderansicht." Das ist auch ein SEO-Vorteil — Google liest Alt-Texte für das Bildersuche-Ranking.

Tastaturnavigation: Jedes interaktive Element (Links, Buttons, Formulare, Menüs) muss nur mit der Tastatur erreichbar und bedienbar sein. Navigieren Sie per Tab durch Ihren gesamten Checkout-Prozess, ohne die Maus zu berühren — wenn Sie stecken bleiben, gibt es ein Problem.

Formular-Labels und Fehlermeldungen: Jedes Formularfeld braucht ein sichtbares Label (nicht nur Platzhaltertext). Fehlermeldungen müssen klar angeben, welches Feld fehlerhaft ist und was der Nutzer korrigieren muss. Ihr Checkout-Formular ist der kritische Bereich.

Farbkontrast: Text muss ausreichend Kontrast zum Hintergrund haben. WCAG AA verlangt ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Hellgrauer Text auf weißem Hintergrund — verbreitet in modernen „cleanen" Designs — erfüllt das oft nicht.

Überschriftenstruktur: Seiten sollten eine korrekte Überschriftenhierarchie (H1, H2, H3) für die Inhaltsstruktur verwenden. Screenreader nutzen Überschriften zur Navigation. Eine Seite mit zufälligen Überschriftenebenen ist wie ein Buch mit vertauschten Kapitelnummern.

Fokusindikatoren: Wenn ein Tastaturnutzer per Tab durch Elemente navigiert, muss das aktuell fokussierte Element einen sichtbaren Indikator haben (Umrandung, Hervorhebung). Viele Themes entfernen den Standard-Fokusrahmen aus ästhetischen Gründen — das bricht die Tastaturzugänglichkeit.

Responsiv und zoombar: Inhalte müssen bei 200% Zoom ohne horizontales Scrollen lesbar sein. Nutzer mit Sehbeeinträchtigung zoomen regelmäßig ihren Browser.

Häufige Barrierefreiheits-Fehler im E-Commerce

• Produktbild-Karussells: Oft nicht per Tastatur navigierbar. Pfeil-Buttons erhalten möglicherweise keinen Fokus, und Screenreader können Bildübergänge nicht beschreiben.
• Dropdown-Menüs: Mega-Menüs, die Hover zum Öffnen erfordern, sind für Tastatur- und Touchscreen-Nutzer unbrauchbar. Sie müssen auch mit Klick/Tap und Tastatur funktionieren.
• Warenkorb-Updates: Wenn ein Kunde die Menge ändert und die Warenkorbsumme per AJAX aktualisiert wird, müssen Screenreader über die Änderung informiert werden. Aria-live-Bereiche erledigen das.
• Zahlungsformulare: Drittanbieter-Zahlungsformulare (Stripe, PayPal) können eigene Barrierefreiheitsprobleme haben. Testen Sie den kompletten Checkout-Ablauf mit einem Screenreader.
• Cookie-Einwilligungsbanner: Viele Einwilligungsbanner sind schlecht zugänglich — Tastaturnutzer können sie nicht schließen und bleiben auf der Seite gefangen.
• Produktfilter: Dynamisches Filtern (bei dem sich Produkte ohne Seitenneuladen aktualisieren) versäumt es oft, Änderungen an Screenreader zu melden.

Ihren Shop testen

Beginnen Sie mit automatisierten Tools, dann testen Sie manuell:

Automatisierte Tests:

• WAVE (Web Accessibility Evaluation Tool) — kostenlose Browser-Erweiterung, die Probleme hervorhebt
• Lighthouse (in Chrome DevTools) — enthält ein Barrierefreiheits-Audit
• axe DevTools — umfassender automatisierter Barrierefreiheits-Checker

Automatisierte Tools finden etwa 30% der Barrierefreiheitsprobleme. Die restlichen 70% erfordern manuelle Tests.

Manuelle Tests:

• Navigieren Sie Ihre gesamte Website nur mit der Tastatur (Tab, Enter, Leertaste, Pfeiltasten)
• Verwenden Sie einen Screenreader (VoiceOver auf Mac, NVDA auf Windows — beide kostenlos), um Ihren Shop als blinder Nutzer zu erleben
• Zoomen Sie auf 200% und überprüfen Sie, ob alles noch nutzbar ist
• Schalten Sie CSS aus und prüfen Sie, ob der Inhalt logisch Sinn ergibt

Schnelle Erfolge

Diese Änderungen beheben die häufigsten Probleme und können schnell umgesetzt werden:

1. Alt-Text für alle Produktbilder hinzufügen
2. Sicherstellen, dass alle Formularfelder sichtbare Labels haben
3. Fokus-Styles für interaktive Elemente hinzufügen (ein CSS-Einzeiler)
4. Überschriftenhierarchie auf den wichtigsten Seiten prüfen und korrigieren
5. Cookie-Einwilligungsbanner tastaturzugänglich machen
6. Checkout-Ablauf auf Tastaturnavigation testen und korrigieren

Das Geschäftsargument jenseits der Compliance

Barrierefreiheit bedeutet nicht nur, Bußgelder zu vermeiden. Etwa 15% der Weltbevölkerung hat irgendeine Form von Behinderung. Noch mehr nutzen Barrierefreiheitsfunktionen situationsbedingt — helles Sonnenlicht, das Bildschirme schwer lesbar macht, ein gebrochener Arm, der die Mausnutzung verhindert, laute Umgebungen, die Untertitel erfordern.

Barrierefreie Websites schneiden in Suchmaschinen tendenziell besser ab (bessere Struktur und Metadaten), haben niedrigere Absprungraten (bessere UX für alle) und konvertieren besser (klarere Navigation und Formulare). Die Investition in Barrierefreiheit zahlt sich durch verbesserte allgemeine Benutzerfreundlichkeit aus.

Laufende Compliance

Barrierefreiheit ist kein einmaliges Projekt. Jedes neue Produkt, jede Seite oder Funktion muss von Anfang an barrierefrei sein. Bauen Sie Barrierefreiheitsprüfungen in Ihren Workflow ein:

• Beim Hinzufügen von Produkten: Alt-Text für Bilder einfügen, korrekte Formatierung in Beschreibungen verwenden
• Bei Theme- oder Design-Änderungen: Tastaturnavigation und Screenreader-Kompatibilität testen
• Bei der Installation von Modulen: Überprüfen, dass sie keine Barrierefreiheits-Barrieren einführen
• Vierteljährliches Audit: Automatisierte Tests durchführen und neue Probleme beheben

Verwandte Artikel

• E-Commerce-Recht in der EU: Die wichtigsten Regeln für Shop-Betreiber
• DSGVO für Onlineshops: Was Sie tun müssen (und was Sie lassen können)
• DSGVO- und Cookie-Compliance für PrestaShop: Was Sie wirklich brauchen