Barrierefreiheit Onlineshop (EAA): Was zu beheben ist

Seit dem 28. Juni 2025 muss ein Webshop, der an Verbraucher in der EU verkauft, nach dem European Accessibility Act (EAA) barrierefrei sein, es sei denn, es handelt sich um ein Kleinstunternehmen (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Bilanzsumme). In der Praxis heißt das: Ihr Shop sollte WCAG 2.1 Level AA erfüllen. Dazu gehören lesbarer Kontrast, Buttons und Links mit Namen, Bilder mit Alt-Text, funktionierender Zoom und ein Checkout, den man allein mit der Tastatur abschließen kann. Die meisten Shops scheitern an denselben wenigen Punkten, und behoben werden sie im Code des Themes, nicht mit einem Overlay-Widget. Als wir im Oktober 2026 1.482 Webshops gescannt haben, hatten 64 % Text mit zu geringem Kontrast und die Hälfte Links ohne lesbaren Namen.

Das ist die technische Seite. Es ist keine Rechtsberatung: Jedes EU-Land hat den Act in sein eigenes Recht überführt (in Deutschland das Barrierefreiheitsstärkungsgesetz, BFSG), und die genauen Pflichten und die Durchsetzung unterscheiden sich von Land zu Land.

Was das Gesetz von einem Webshop verlangt

• Wer: Unternehmen, die online Produkte oder Dienstleistungen an Verbraucher in der EU verkaufen. E-Commerce-Dienste werden in der Richtlinie selbst genannt (Richtlinie (EU) 2019/882, Artikel 2).
• Wer ausgenommen ist: Kleinstunternehmen, die Dienstleistungen erbringen: weniger als 10 Beschäftigte und ein Jahresumsatz oder eine Jahresbilanzsumme von höchstens 2 Mio. €. Prüfen Sie das für Ihr eigenes Unternehmen; wer darüber hinauswächst, fällt unter die Pflicht.
• Seit wann: Die Regeln gelten seit dem 28. Juni 2025. Dienstleistungsverträge, die vor diesem Datum geschlossen wurden, dürfen längstens bis zum 28. Juni 2030 unverändert weiterlaufen, aber ein Webshop, der heute online ist, ist eine Dienstleistung, die jetzt erbracht wird.
• Auf welchem Niveau: die harmonisierte Norm EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist. Das ist der Maßstab, den ein Prüfer oder eine Aufsichtsbehörde anlegt.

Was wir in 1.482 echten Shops gefunden haben

Zwischen dem 20. und 26. Oktober 2026 haben wir die Startseiten von 1.482 Shopify- und WooCommerce-Shops im Vereinigten Königreich, in den Niederlanden, in Belgien und in Thailand mit EngineeringScore gescannt, unserem eigenen Audit-Tool. Die vollständigen Ergebnisse stehen in Wir haben 1.482 Webshops vor Black Friday gescannt. Der Teil zur Barrierefreiheit:

Problem auf der Startseite	Shops
Text mit zu geringem Kontrast	64 %
Links ohne lesbaren Namen (Warenkorb, Social-Media- und Menü-Links nur als Icon)	50 %
Bilder ohne Alt-Text	21 % (Shopify 24 %, WooCommerce 17 %)
Zoomen auf dem Smartphone blockiert	12 %

Das war nur die Startseite, automatisch geprüft. Automatische Prüfungen finden in etwa die Probleme, die sich im Code messen lassen; Tastaturbedienung, Fokusreihenfolge und der Checkout brauchen einen Menschen. Lesen Sie diese Zahlen also als Untergrenze, nicht als Obergrenze.

Die Korrekturen, in der Reihenfolge, in der wir sie angehen würden

1. Kontrast

WCAG verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (etwa 24 px, oder 19 px fett). Die üblichen Verdächtigen sind hellgraue Preise und Beschriftungen, weißer Text auf einem Foto und eine blasse Markenfarbe auf Buttons. Die Lösung liegt in den Farbeinstellungen oder im CSS des Themes: das Grau abdunkeln, Text auf einen einfarbigen oder abgedunkelten Hintergrund legen statt direkt auf ein Foto, und jedes Farbpaar einmal in einem Kontrastprüfer testen. Machen Sie das möglichst in den Theme-Einstellungen, damit ein Update es nicht wieder rückgängig macht.

2. Jedem Link und jedem Button einen Namen geben

Ein Warenkorb-Icon, eine Lupe, ein Hamburger-Menü oder ein Instagram-Logo sagt einem Screenreader nichts, wenn es keinen Textnamen hat. Auch Google liest diese Namen. Fügen Sie visuell versteckten Text oder ein aria-label hinzu:

<a href="/cart" aria-label="Cart, 2 items"><svg aria-hidden="true">…</svg></a>

Bei Shopify stecken die meisten davon in den Header- und Footer-Bereichen des Themes; bei WooCommerce im Header-Template des Themes oder in einem Page-Builder-Widget, das oft ein Label-Feld hat, das niemand ausgefüllt hat.

3. Alt-Text, der das Produkt beschreibt

Produktfotos brauchen einen Alt-Text, der sagt, was auf dem Bild zu sehen ist: „Schwarzer Lederstiefel, Seitenansicht“, nicht „IMG_4021“ oder fünfmal der wiederholte Produktname. Rein dekorative Bilder bekommen ein leeres alt="", damit Screenreader sie überspringen. Sowohl Shopify als auch WooCommerce haben im Admin-Bereich ein Alt-Feld pro Bild; die Arbeit besteht darin, es auszufüllen und sicherzustellen, dass das Theme es auch wirklich ausgibt.

4. Zoomen erlauben

Wenn Ihr Theme maximum-scale=1 oder user-scalable=no im Viewport-Tag hat, können Besucher auf dem Smartphone nicht zoomen. Entfernen Sie beides. Das Tag sollte so aussehen: <meta name="viewport" content="width=device-width, initial-scale=1">. Zoomen Sie dann in einem Desktop-Browser auf 200 % und prüfen Sie, dass nichts überlappt oder verschwindet.

5. Tastatur und Fokus

Legen Sie die Maus weg und drücken Sie sich mit der Tab-Taste durch die Startseite, eine Produktseite und den gesamten Checkout. Sie sollten immer sehen, wo Sie sich befinden (ein sichtbarer Fokusrahmen), jeden Button erreichen, das Menü und Pop-ups öffnen und schließen und eine Größe oder Variante auswählen können. Themes entfernen den Fokusrahmen oft, weil der Designer ihn hässlich fand; bringen Sie ihn mit einem klaren :focus-visible-Stil zurück. Pop-ups für Newsletter und Cookies sind die häufigste Falle: keine Möglichkeit, sie mit der Tastatur zu schließen.

6. Formulare und der Checkout

Jedes Feld braucht ein echtes Label (nicht nur einen Platzhalter, der beim Tippen verschwindet), Fehlermeldungen müssen in Textform sagen, was falsch ist, nicht nur durch die Farbe Rot, und Pflichtfelder müssen gekennzeichnet sein. Der Zahlungsschritt läuft oft im eigenen Frame des Zahlungsanbieters; dieser Teil ist Sache des Anbieters, aber die Schritte drumherum sind Ihre. Testen Sie den gesamten Ablauf mit jeder Zahlungsart, die Sie anbieten.

7. Sprache und Struktur

Legen Sie die Seitensprache fest (<html lang="nl"> beim niederländischen Shop und so weiter), damit Screenreader den Text korrekt aussprechen, geben Sie jeder Seite eine Hauptüberschrift und halten Sie die Überschriften in der richtigen Reihenfolge. Das sind kleine Änderungen im Theme, die auch Suchmaschinen helfen.

Warum ein Overlay-Widget das Problem nicht löst

Accessibility-Overlays sind Skripte, die eine Symbolleiste oder eine „KI“-Ebene über Ihren Shop legen und mit einer Zeile Code Konformität versprechen. Die oben genannten Probleme liegen im HTML und CSS Ihres Themes; ein Skript, das danach läuft, kann sie nicht zuverlässig beheben, und es kann den Screenreadern und Einstellungen, die Menschen bereits nutzen, in die Quere kommen. Im April 2025 verpflichtete die US-Handelsbehörde Federal Trade Commission den Overlay-Anbieter accessiBe zur Zahlung von 1 Mio. $ und untersagte ihm, ohne Nachweis zu behaupten, sein Produkt könne jede Website WCAG-konform machen. Ein Overlay ist außerdem ein weiteres Drittanbieter-Skript auf Seiten, die in unserem Scan ohnehin schon Code von im Median 15 verschiedenen Unternehmen luden.

Stecken Sie das Overlay-Budget stattdessen in die Korrektur des Themes. Meist ist das ein einmaliger Auftrag, und die Korrektur hält, bis jemand das Theme ändert.

Shopify oder WooCommerce: wo die Arbeit anfällt

• Shopify: Der Checkout der Plattform wird von Shopify gepflegt; das Storefront ist Ihr Theme. Beginnen Sie mit den Farb- und Typografie-Einstellungen des Themes und bearbeiten Sie dann Header, Footer und Produkt-Templates für Labels, Alt-Text-Ausgabe und Fokusstile. Apps, die Pop-ups und Widgets einblenden, sind oft die schlimmsten Übeltäter, testen Sie also mit eingeschalteten Apps.
• WooCommerce: Ihnen gehört alles: Theme, Page Builder, Checkout-Plugins. Korrekturen gehören in ein Child-Theme, damit Updates sie nicht überschreiben. Prüfen Sie jedes Plugin, das Frontend-HTML ausgibt, vor allem Slider, Mega-Menüs und Produktfilter.

In beiden Fällen schreiben Sie die Korrekturen ins Theme oder Child-Theme und testen nach jedem Theme- oder App-Update erneut. Sie wählen gerade eine Plattform? Unser E-Commerce-Plattformvergleich zeigt die Vor- und Nachteile.

Prüfen Sie Ihren eigenen Shop in 30 Minuten

1. Lassen Sie Ihre Startseite, eine Produktseite und den Warenkorb durch EngineeringScore oder die Lighthouse-Prüfung für Barrierefreiheit in Chrome laufen (F12, Lighthouse).
2. Gehen Sie ohne Maus per Tab-Taste durch den Shop bis zu einer abgeschlossenen Testbestellung.
3. Zoomen Sie auf einem Laptop auf 200 % und auf dem Smartphone mit zwei Fingern.
4. Schalten Sie VoiceOver (iPhone, Mac) oder TalkBack (Android) ein und hören Sie sich Ihren Header und ein Produkt an.
5. Notieren Sie, was durchgefallen ist, in der Reihenfolge, in der Kunden den Kauf verlieren: zuerst der Checkout, dann die Produktseiten, dann der Rest.

Wenn Ihr Checkout das Problem ist, hilft Ihnen unser Leitfaden zum Webshop-Checkout, der nicht funktioniert, den gesamten Ablauf zu testen. Und wenn Sie sich auf die umsatzstärksten Wochen des Jahres vorbereiten, kombinieren Sie das mit der Black-Friday-Checkliste.

Sie wollen es behoben statt aufgelistet haben?

Beginnen Sie mit unserem Website-Check oder senden Sie uns die Adresse Ihres Shops über Kontakt. Wie lange die Korrekturen dauern, hängt vom Theme und von den Apps ab, deshalb schätzen wir es nach einem ersten Blick. Sie können sie nach Stunden bezahlen oder über ein Stundenkontingent von 14 Stunden (910 €).