Barrierefreiheit im E-Commerce bedeutet, dass jemand mit Screenreader, reiner Tastaturnavigation oder einer Sehhilfe-Einstellung Produkte durchstöbern, verstehen kann, was er kauft, und den Kaufprozess abschließen kann, ohne auf eine Barriere zu stoßen, die ein sehender Maus-Nutzer nicht hätte. Die Einsätze sind höher als bei einer gewöhnlichen Content-Website: Ein Barriereproblem auf einer Produktseite ist eine Unannehmlichkeit, ein Problem im Checkout blockiert direkt einen Verkauf. Es ist wichtiger, die zentralen Abläufe richtig hinzubekommen, als jedes einzelne WCAG-Kriterium gleichmäßig über die ganze Website zu jagen.
Wo sich Barrieren in Online-Shops konzentrieren
Eine Handvoll E-Commerce-spezifischer Muster verursacht die meisten echten Barrieren. Produktbildergalerien mit fehlendem oder generischem Alt-Text (“bild1.jpg”) lassen Screenreader-Nutzer im Unklaren darüber, was sie sich gerade ansehen. Filter- und Sortiersteuerungen, oft als individuelle Dropdowns oder Schieberegler statt nativer HTML-Elemente umgesetzt, sind häufig per Tastatur nicht erreichbar oder nicht bedienbar. Größen- und Farb-Swatches, die als klickbare Divs statt echter Formularelemente implementiert sind, können für assistive Technologien vollständig unsichtbar sein. Und Checkout-Formulare, der wichtigste Teil des gesamten Erlebnisses, haben häufig unbeschriftete Felder, Platzhaltertext statt echter Labels (der verschwindet, sobald der Nutzer zu tippen beginnt) und Validierungsfehler, die zwar visuell erscheinen, Screenreadern aber nie angekündigt werden.
Produktseiten
Jedes Produktfoto, das Informationen vermittelt, braucht einen aussagekräftigen Alt-Text, der beschreibt, was ein Kunde tatsächlich wissen möchte, etwa Farbe, Material, Passform oder ein besonderes Merkmal, nicht eine erschöpfende Beschreibung jedes Pixels. Preis-, Verfügbarkeits- und Bewertungsinformationen sollten so strukturiert sein, dass ein Screenreader sie klar ansagt, statt als wirres Durcheinander unbeschrifteter Zahlen und Icons. “In den Warenkorb”-Buttons brauchen klare, eindeutige barrierefreie Namen, besonders auf Kategorieseiten mit vielen Produkten, wo ein Screenreader-Nutzer sonst “In den Warenkorb” ein Dutzend Mal hört, ohne zu wissen, zu welchem Produkt welcher Button gehört.
Warenkorb und Checkout
Das ist der wichtigste Bereich jedes Shops, da er direkt mit dem Umsatz verbunden ist. Jedes Formularfeld, jede Versandoption und jede Zahlungsmethodenauswahl braucht ein echtes, programmatisch verknüpftes Label. Fehlermeldungen müssen assistiven Technologien angekündigt werden, sobald sie erscheinen, nicht nur visuell in roter Schrift angezeigt werden, und sie sollten klar erkennen lassen, auf welches Feld sich der Fehler bezieht. Mengenregler, Gutscheinfelder und jede mehrstufige Fortschrittsanzeige im Checkout sollten allein mit der Tastatur bedienbar sein, da reine Tastaturnutzer (nicht nur Screenreader-Nutzer, sondern auch viele Menschen mit motorischen Einschränkungen) häufige Besucher sind, die ein rein mausorientierter Test übersieht.
Vergleich von Tools für den E-Commerce
Mehrere Anbieter von Accessibility-Lösungen positionieren sich gezielt für E-Commerce-Anwendungsfälle, und die richtige Wahl hängt davon ab, wie viel der Behebung automatisiert und wie viel manuell überprüft werden soll.
| Funktion | Wawsome | EqualWeb | AudioEye | UserWay |
|---|---|---|---|---|
| Ansatz | Bundles an AI-assisted accessibility widget with a continuous automated monitor and a human-reviewed accessibility checker, positioned around European compliance (EAA, EN 301 549) alongside WCAG and ADA. | Accessibility widget plus a manual remediation and auditing arm, offered across a wide range of subscription tiers from single small sites up to enterprise, multi-domain agreements. | Publicly traded accessibility company combining automated scanning, an adjustment widget, and human-in-the-loop manual testing and remediation delivered through its Accessibility Management Platform. | AI-driven accessibility widget with an in-house automated remediation engine, sold mainly as a self-serve script install with tiered plans and a separate professional audit add-on. |
| Preise | From EUR 23.75/mo (billed yearly) or EUR 29.90/mo (billed monthly) for the Starter widget plan, up to 100k monthly page views; a separate Accessibility Monitor product starts at EUR 27.90-34.90/mo for 50 pages | From $39/mo ($390/yr) for the Small widget tier, up to 100 pages; Medium is $49/mo, Large $109/mo, Huge $169/mo, with a custom-quoted Managed tier that adds expert remediation | Pricing not published - contact sales for a quote; third-party listings have cited a Basic automated-only plan starting around $49/mo, but AudioEye's own pricing page does not disclose figures | Free tier available; paid Accessibility Widget Pro starts around $69/mo, with Pro Plus around $169/mo and Ultimate around $359/mo (per third-party pricing trackers, since UserWay's own pricing page does not display figures) |
| Unterstützte Standards | WCAG 2.0, WCAG 2.1, WCAG 2.2, EAA, EN 301 549, ADA, Section 508 | WCAG 2.1, ADA, Section 508, EN 301 549, EAA | WCAG 2.1, WCAG 2.2, ADA, Section 508, EN 301 549 | WCAG 2.1, ADA, Section 508, EN 301 549 |
| Geeignet für | SMEs and e-commerce sites selling into the EU; Public institutions preparing for EAA enforcement; Teams that want a widget plus a monitoring layer rather than a one-off scan | Organizations wanting a widget with an optional path to manual remediation at various budget levels | Mid-market and enterprise sites wanting automated coverage backed by human review | Very small sites wanting a no-cost starting point; Teams that want a widely recognized brand name |
Wawsome kombiniert ein KI-gestütztes Widget mit fortlaufendem Monitoring und einem manuell geprüften Checker und bietet native Shopify-Integration, was es zu einer sinnvollen Wahl für EU-orientierte Shops macht, die EAA- und EN-301-549-Abdeckung zusätzlich zum Widget wollen. EqualWeb und AudioEye kombinieren beide Automatisierung mit einem Weg zur manuellen Behebung über verschiedene Preisstufen hinweg, was für Shops wichtig ist, die irgendwann eine echte Lösung für bestimmte Checkout-Probleme brauchen, die ein automatisiertes Widget allein nicht lösen kann. UserWay bietet breite Plugin-Unterstützung für Shopify, WooCommerce und Wix sowie eine kostenlose Stufe, was für einen kleineren Shop am Anfang geeignet ist, auch wenn manuelle Audits und VPAT-Arbeit dort als separates Zusatzangebot verkauft werden, statt im Paket enthalten zu sein.
Was automatisierte Tools allein nicht erfassen
Individuelle Checkout-Komponenten, besonders solche, die mit einem JavaScript-Framework statt mit Standard-HTML-Formularelementen gebaut wurden, sind der Bereich, mit dem automatisierte Widgets und Scanner am meisten kämpfen, da sie Anwendungslogik, die sie nicht kontrollieren, nicht umschreiben können. Eine Mengenauswahl oder eine Adress-Autovervollständigung, die als komplett individuelle Komponente gebaut wurde, muss direkt mit Tastatur und Screenreader getestet werden, statt als behoben angenommen zu werden, nur weil sitewide ein Widget installiert ist. Wenn Ihr Shop stark angepassten Checkout-Code nutzt, planen Sie unabhängig vom gewählten Tool ein Budget für einen manuellen Durchlauf dieses konkreten Ablaufs ein.
Mobiles Einkaufen und Touch-Interaktionen
Ein großer Teil des E-Commerce-Traffics findet inzwischen auf mobilen Geräten statt, und mobilspezifische Muster bringen eigene Herausforderungen für die Barrierefreiheit mit sich, die über eine einfache responsive Anpassung hinausgehen. Touch-Ziele (Buttons, Größen-Swatches, Mengensteuerungen) müssen groß genug sein, um für Menschen mit motorischen Einschränkungen zuverlässig antippbar zu sein, und jedes wischbare Bildkarussell oder jede gestenbasierte Interaktion braucht eine barrierefreie Alternative, da VoiceOver auf iOS und TalkBack auf Android per Geste statt per Mausklick navigieren und eine individuelle Wischgeste mit den eigenen Navigationsgesten des Screenreaders kollidieren kann, wenn sie nicht sorgfältig gebaut wird.
Internationale Aspekte und mehrere Währungen
Shops, die in mehreren Ländern oder Währungen verkaufen, bringen eine zusätzliche Komplexitätsebene mit, die man direkt einplanen sollte. Währungs- und Preisformate sollten Screenreadern klar und eindeutig angekündigt werden, Sprachattribute der Seite sollten der tatsächlich angezeigten Sprache entsprechen, damit Aussprache und Übersetzungstools korrekt funktionieren, und jeder Regions- oder Sprachumschalter muss ein echtes, beschriftetes, per Tastatur bedienbares Element sein, statt eines dekorativen Flaggen-Icons ohne barrierefreien Namen. Für EU-orientierte Shops überschneidet sich das direkt mit der EAA- und EN-301-549-Konformität, da E-Commerce ausdrücklich zu den Sektoren gehört, die die EAA als abgedeckt nennt.
Suche, Filter und Personalisierung
Facettensuchen und Filterbereiche sind auf Kategorieseiten üblich und gehören oft zu den am wenigsten barrierefreien Teilen eines Shops, da sie aus Performancegründen häufig mit umfangreichem individuellem JavaScript gebaut werden und Barrierefreiheit dabei nachrangig behandelt wird. Filter-Checkboxen und Schieberegler brauchen echte Labels und Tastaturbedienbarkeit, und wenn ein Filter angewendet wird, sollte die resultierende Änderung der Trefferzahl über eine ARIA-Live-Region einem Screenreader angekündigt werden, statt die Seite stillschweigend zu aktualisieren. Personalisierungsfunktionen wie “Zuletzt angesehen”-Karussells oder Empfehlungs-Widgets haben ähnliche Anforderungen: Sie brauchen eine korrekte Überschriftenstruktur und beschriftete Steuerelemente wie jeder andere Teil der Seite, auch wenn sie oft nachträglich über ein Skript eines Drittanbieters eingebunden werden, das nicht Teil der ursprünglichen Barrierefreiheitsprüfung des Themes war.
Eine praktische Checkliste zum Einstieg
Gehen Sie Ihre Produktseitenvorlage, Ihren Warenkorb und den kompletten Checkout-Prozess mit reiner Tastaturnavigation und einem Screenreader wie NVDA oder VoiceOver durch, von Anfang bis Ende, als würden Sie tatsächlich etwas kaufen. Beheben Sie zuerst Beschriftungs- und Fokusreihenfolgeprobleme im Checkout, da Sie dort eine Barriere einen Verkauf kostet, und arbeiten Sie sich dann nach außen zu Produkt- und Kategorieseiten vor. Testen Sie nach jeder Theme- oder Checkout-Anbieteränderung erneut, da genau dann Regressionen bei der Barrierefreiheit am häufigsten entstehen, ohne dass es jemand bemerkt.
Führen Sie ein einfaches Protokoll darüber, was Sie wann getestet haben, auch wenn es informell ist. Dieses Protokoll wird auf drei Arten wirklich nützlich: Es zeigt Ihnen, ob Probleme im Laufe der Zeit tatsächlich behoben werden statt nur erkannt zu werden, es gibt Ihnen etwas Konkretes zum Verweisen, falls ein Kunde oder eine Behörde jemals nach Ihren Praktiken zur Barrierefreiheit fragt, und es macht die nächste Überprüfung schneller, da Sie wissen, welche Vorlagen und Abläufe bereits abgedeckt wurden und welche noch Aufmerksamkeit brauchen.