Ein barrierefreier Online-Shop ist seit dem 28. Juni 2025 Pflicht. Zugleich ist er die große Ausnahme im Netz. Eine Untersuchung von 100 stark frequentierten Shops brachte im Januar 2026 ein ernüchterndes Ergebnis. Nur elf Prozent der Warenkorb- und Checkout-Seiten erfüllten überhaupt die WCAG-Mindeststandards. Das ist nicht nur ein rechtliches Problem. Vielmehr ist es ein direktes Geschäftsproblem. Denn jede Barriere im Bestellprozess ist ein abgebrochener Kauf. In diesem Ratgeber zeige ich Ihnen aus der Audit-Praxis, wo Shops konkret scheitern. Das beginnt im Checkout, geht über Varianten und Filter und reicht bis zum Cookie-Banner vor dem Laden. Sie bekommen die kritischen WCAG-Kriterien mit Nummer und die häufigsten Fehler mit ihren realen Quoten. Außerdem zeige ich Ihnen einen Praxis-Test für heute und einen klaren Weg zur rechtssicheren Umsetzung.

Warum ein barrierefreier Online-Shop kein Nice-to-have ist

Ein barrierefreier Online-Shop ist heute rechtlich verpflichtend und wirtschaftlich zwingend zugleich. Das BFSG und der dahinterstehende European Accessibility Act nennen E-Commerce-Dienstleistungen ausdrücklich. Ein Online-Shop fällt also ohne Wenn und Aber darunter. Was das für Pflichten, Haftung und Durchsetzung bedeutet, habe ich im Leitfaden zum BFSG für Unternehmen erklärt.

E-Commerce steht dabei besonders im Visier. Auswertungen aus dem prozessgetriebenen US-Markt zeigen ein klares Bild. Über drei Viertel aller Barrierefreiheits-Klagen treffen gezielt Online-Shops. Damit sind Shops die am häufigsten angegriffene Kategorie überhaupt. Der Grund ist simpel. Denn ein Shop hat einen klar definierten, geschäftskritischen Ablauf. Diesen kann man leicht testen, und sein Versagen lässt sich leicht belegen. Genau deshalb waren Online-Shops auch in Deutschland Ziel der ersten Abmahnwellen.

Die wirtschaftliche Seite ist noch überzeugender als die juristische. Rund jeder zehnte Mensch lebt mit einer Behinderung. Dazu kommt eine alternde Kundschaft mit nachlassendem Seh- und Bewegungsvermögen. Studien beziffern den jährlich verlorenen Umsatz durch unzugängliche Checkouts auf Milliardenhöhe. Außerdem zeigen sie eines deutlich. Ein großer Teil der betroffenen Nutzer verlässt einen unzugänglichen Shop sofort und kommentarlos. Sie sehen diesen Verlust nie. Denn er erscheint in Ihrer Statistik als ganz normale Absprungrate. Barrierefreiheit ist hier also kein Kostenposten, sondern direkt verkaufswirksam.

Die kritischsten Barrieren im Checkout

Der Checkout ist die gefährlichste Zone Ihres Shops. Denn hier blockiert jede Barriere unmittelbar den Umsatz und löst die meisten Klagen aus. Die häufigsten Fehler sind dabei keine Raritäten. Untersuchungen finden bei rund einem Drittel der Shops einen nicht vollständig per Tastatur bedienbaren Bestellprozess. Wer mit der Maus nicht arbeiten kann, kommt damit nicht bis zum Kaufabschluss.

Konkret stolpern Nutzer im Checkout über immer dieselben Dinge. Formularfelder ohne verknüpfte Beschriftung lassen den Screenreader nur „Eingabefeld“ ansagen. Der Nutzer weiß dann nicht, ob hier die Hausnummer oder die Kreditkartenprüfziffer hingehört (Erfolgskriterium 3.3.2, Beschriftungen oder Anweisungen). Schlägt die Validierung fehl, wird das Feld oft nur rot eingefärbt. Ohne textliche, zugeordnete Fehlermeldung bleibt aber unklar, was falsch ist (3.3.1 Fehlererkennung und 3.3.3 Fehlerempfehlung). In mehrstufigen Bestellprozessen springt der Fokus nach einem Schritt häufig an den Seitenanfang oder ins Leere. Statt zum nächsten relevanten Element zu wandern, geht er verloren (2.4.3 Fokus-Reihenfolge). Wie man Bestellformulare sauber aufbaut, vertiefe ich im Ratgeber zu barrierefreien Formularen.

Den Spitzenplatz der Frustfaktoren belegt seit Jahren das CAPTCHA. Ausgerechnet am letzten Schritt vor dem Kauf eine verzerrte Bildaufgabe zu verlangen, sperrt blinde Nutzer zuverlässig aus. Und es schickt sie zur Konkurrenz. Setzen Sie stattdessen auf unsichtbare, verhaltensbasierte Verfahren oder eine echte Audio-Alternative. Auch eingebettete Bezahl-Iframes von Drittanbietern sind ein blinder Fleck. Sie gehören ebenso geprüft wie Ihr eigener Code. Denn der Nutzer merkt nicht, wo Ihr Shop endet und der Zahlungsdienstleister beginnt.

Zwei weitere Stellschrauben entscheiden im Checkout über Abschluss oder Abbruch. Statten Sie Adress- und Zahlungsfelder mit den passenden autocomplete-Attributen aus. So füllen Browser und assistive Werkzeuge sie automatisch aus (Erfolgskriterium 1.3.5, Eingabezweck bestimmen). Für motorisch eingeschränkte Nutzer ist das ein großer Unterschied. Denn jede Eingabe kostet sie sonst mehrere Minuten Quälerei statt zwei Klicks. Verzichten Sie zudem auf den erzwungenen Konto-Zwang. Wer vor dem Kauf eine Registrierung mit Passwortvergabe verlangt, baut eine kognitive wie motorische Hürde auf. Viele Nutzer brechen an dieser Stelle schlicht ab. Ein Gast-Checkout senkt dagegen die Abbruchquote für alle. Das ist ein gutes Beispiel: Barrierefreie Entscheidungen sind fast immer auch konversionsfreundliche.

Produktseiten, Varianten und Filter

Schon vor dem Checkout entscheidet sich auf der Produktseite, ob ein Kauf zustande kommt. Und hier liegt die häufigste Barriere überhaupt. Bei rund vier von fünf untersuchten Shops ist die Varianten-Auswahl nicht zugänglich. Farb- oder Größenwähler bestehen aus klickbaren Kacheln ohne zugänglichen Namen und ohne Tastaturbedienung. Der Screenreader sagt dann „Schaltfläche“ statt „Farbe: Blau, ausgewählt“ an (Erfolgskriterium 4.1.2, Name, Rolle, Wert). Verschärfend kommt ein Punkt hinzu. Die getroffene Auswahl wird oft allein über die Farbe eines Rahmens signalisiert. Wer Farben nicht unterscheiden kann, erkennt also nicht, was gewählt ist (1.4.1, Benutzung von Farbe).

Produktbilder ohne aussagekräftigen Alternativtext sind der zweite Klassiker. Ein „Produktfoto“ hilft niemandem. „Blauer Laufschuh, Mesh-Obermaterial, seitliche Schnürung“ dagegen schon (1.1.1, Nicht-Text-Inhalt). Bewertungssterne, die nur als Grafik vorliegen, müssen ihren Wert ansagen („4 von 5 Sternen“). Auch der „In den Warenkorb“-Vorgang braucht eine hörbare Rückmeldung über eine Live-Region (4.1.3, Statusmeldungen). Sonst klickt der Nutzer mehrfach, weil er nicht weiß, ob etwas passiert ist. Filter und Facetten schließlich müssen vollständig mit der Tastatur bedienbar sein. Außerdem müssen sie ihre Ergebnisänderung ansagen. Wie dynamische Komponenten korrekt umgesetzt werden, behandle ich im Ratgeber zu ARIA in Webanwendungen. Die Kontrastfragen vertiefe ich im Beitrag zu barrierefreien Farben und Kontrasten.

Produktsuche, Mengenauswahl und Countdown – die unterschätzten Bausteine

Zwischen Produktseite und Kasse liegen drei Bausteine, die in Audits fast immer Lücken zeigen. Gemeint sind die Suche, die Mengenauswahl und zeitbasierte Anzeigen. Sie wirken auf den ersten Blick nebensächlich. Tatsächlich aber entscheiden auch sie über Abschluss oder Abbruch. Ich gehe sie hier der Reihe nach durch.

Die Produktsuche mit Live-Vorschlägen ist technisch ein Kombinationsfeld, eine sogenannte Combobox. Sie muss vollständig mit der Tastatur bedienbar sein. Der Nutzer wählt die Vorschläge also mit den Pfeiltasten aus, nicht nur per Mausklick. Eine Suche, deren Vorschläge man ausschließlich anklicken kann, sperrt Tastatur- und Screenreader-Nutzer aus. Auch die Escape-Taste sollte die Vorschlagsliste wieder schließen können. Hinzu kommt ein Detail, das viele übersehen. Denn die Trefferzahl muss angesagt werden, sonst bleibt unklar, ob die Suche überhaupt etwas gefunden hat.

Aus der Praxis – ein wenig bekannter Hebel: Hinterlegen Sie die Trefferzahl Ihrer Suche in einer Live-Region (aria-live="polite"). Sobald die Ergebnisse erscheinen, hört der Screenreader-Nutzer dann „128 Treffer für Laufschuh“. Ohne diese Ansage tippt er gewissermaßen ins Leere und weiß nicht, ob sich die Seite verändert hat. Dasselbe gilt für Filter, die die Ergebnisliste live umbauen (Erfolgskriterium 4.1.3, Statusmeldungen). Dieser eine Handgriff kostet kaum Aufwand und verändert das Sucherlebnis grundlegend.

Die Mengenauswahl ist die zweite stille Hürde. Die Plus- und Minus-Schaltflächen brauchen einen klaren Namen wie „Menge erhöhen“, nicht nur ein Symbol. Das Mengenfeld selbst muss ein echtes Eingabefeld sein. So kann der Nutzer die Anzahl auch direkt eintippen, statt nur zu klicken. Und der „Entfernen“-Button im Warenkorb braucht Kontext. „Entfernen“ allein hilft dem Screenreader-Nutzer nicht. „Entfernen: Blauer Laufschuh, Größe 42″ dagegen sagt ihm genau, was er löscht (Erfolgskriterium 2.4.4, Linkzweck im Kontext). Ändert sich danach die Zwischensumme, gehört auch diese Änderung angesagt.

Der dritte Baustein sind zeitbasierte Anzeigen. Ein Countdown wie „Angebot endet in 04:59″ fällt unter Erfolgskriterium 2.2.1 (Anpassbare Zeitvorgaben). Setzt eine echte Frist den Nutzer unter Druck, muss er sie verlängern oder abschalten können. Automatisch wechselnde Hinweise wie „Gerade kaufen 14 Personen“ fallen dagegen unter 2.2.2 (Pausieren, Stoppen, Ausblenden). Solche bewegten Inhalte müssen sich anhalten lassen. Andernfalls flackert die Seite unruhig und lenkt von der eigentlichen Aufgabe ab. Und ein „Nur noch 2 auf Lager“ darf seine Dringlichkeit nicht allein über die Farbe Rot transportieren (1.4.1, Benutzung von Farbe). Sonst geht die Botschaft an einem Teil Ihrer Kunden schlicht vorbei.

Welche Rolle Ihr Shop-System spielt

Ein großer Teil der Barrieren stammt nicht aus eigenem Code. Vielmehr stecken sie im Shop-System, im Theme und in den installierten Apps. Auswertungen zeigen messbare Unterschiede je nach Plattform. Shops auf einem der verbreitetsten Baukasten-Systeme wiesen im Schnitt rund 70 Fehler pro Startseite auf. Damit lagen sie über ein Drittel über dem Marktdurchschnitt. Der Grund ist nicht das System selbst. Vielmehr bringen Themes und Erweiterungen Barrieren mit, die der Betreiber nie selbst geschrieben hat.

Das ist die unbequeme Wahrheit für jeden Shop-Betreiber. Sie erben die Barrierefreiheit von jedem Baustein, den Sie einsetzen. Ein hübsches Theme zeichnet Überschriften beispielsweise rein optisch aus. Ein Bewertungs-Plugin rendert Sterne ohne Textalternative. Ein Cookie-Tool sperrt den Fokus ein. Und ein Karussell-Slider lässt sich nicht per Tastatur steuern. Jede dieser Komponenten kann für sich genommen einen Kauf verhindern. Und keine davon haben Sie programmiert.

Praktisch folgt daraus zweierlei. Erstens: Prüfen Sie Themes und Apps schon vor der Auswahl auf Barrierefreiheit. Fragen Sie den Anbieter konkret nach einer Konformitätsaussage, statt später teuer nachzubessern. Zweitens: Verlassen Sie sich nicht auf das Marketing-Versprechen „barrierefrei“ eines einzelnen Plugins. Prüfen Sie stattdessen das reale Zusammenspiel aller Bausteine. Denn erst die Kombination aus Plattform, Theme, Apps und eigenem Code ergibt das, was Ihre Kunden erleben. Genau dieses Zusammenspiel deckt nur ein Audit am fertigen Shop auf. Unser Tiefen-Audit Access Ready prüft deshalb am echten System, nicht an der isolierten Zusicherung eines Anbieters.

Die Hürde vor dem Shop: Cookie-Banner und Overlays

Die erste Barriere kommt oft, bevor der Shop überhaupt sichtbar ist: am Cookie-Banner. Viele Einwilligungs-Overlays legen sich nämlich über die Seite. Dabei fangen sie den Tastaturfokus nicht korrekt ein oder geben ihn nicht wieder frei. Tastaturfallen in solchen Dialogen finden Untersuchungen bei rund zwei Dritteln der Shops. Für einen Screenreader- oder Tastaturnutzer heißt das im schlimmsten Fall eines. Er erreicht die Schaltflächen „Akzeptieren“ oder „Ablehnen“ nie und bleibt am Eingang stehen.

Die Ironie dabei ist beträchtlich. Ein Banner, das aus Datenschutzgründen Pflicht ist, sperrt Menschen aus, die ein anderes Gesetz schützen soll. Dabei gilt für das Overlay technisch dasselbe wie für jeden Dialog. Der Fokus muss beim Öffnen hinein- und beim Schließen zurückwandern. Außerdem müssen die Bedienelemente einen klaren Namen tragen und mit Tabulator und Enter erreichbar sein (Erfolgskriterien 2.1.2 Keine Tastaturfalle und 2.4.3 Fokus-Reihenfolge). Wer den hübschesten Shop der Welt baut, ihn aber hinter einem unbedienbaren Consent-Layer versteckt, hat für einen Teil seiner Kunden gar keinen Shop. Genau hier setzt der Praxis-Test weiter unten an.

Ein zugängliches Einwilligungs-Banner ist dabei kein Hexenwerk. Es öffnet sich als echter modaler Dialog. Beim Erscheinen setzt es den Fokus auf das erste Bedienelement und hält ihn bis zur Entscheidung im Dialog. Ein Durchtabben „hinter“ das Banner gibt es also nicht. Die Schaltflächen tragen klare Texte wie „Alle akzeptieren“ und „Nur notwendige“ statt eines bloßen Symbols. Zudem ist „Ablehnen“ genauso leicht erreichbar wie „Akzeptieren“. Das verlangt ohnehin auch das Datenschutzrecht. Mit der Escape-Taste lässt sich der Dialog schließen. Nach der Wahl kehrt der Fokus an eine sinnvolle Stelle zurück. Achten Sie zusätzlich darauf, dass der dahinterliegende Inhalt als inaktiv gekennzeichnet ist. Sonst liest der Screenreader Banner und Seite vermischt vor.

Was ein barrierefreier Online-Shop wirtschaftlich bringt

Barrierefreiheit zahlt im Shop dreifach ein: mehr erreichbare Kunden, höhere Abschlussquoten und bessere Sichtbarkeit. Der erste Punkt ist dabei reine Reichweite. Ein erheblicher Teil der Bevölkerung wird heute an überwindbaren Hürden abgewiesen. Ein Großteil dieser Nutzer kehrt nicht zurück, sondern kauft beim nächsten Anbieter. Jeder dieser Kunden ist barer Umsatz, der woanders landet. Diesen stillen Abbruch erlebe ich in Audits immer wieder. Wie er sich konkret anfühlt, zeige ich anhand echter Nutzererfahrungen mit Screenreadern.

Der zweite Effekt ist die Conversion. Was für blinde oder motorisch eingeschränkte Nutzer funktioniert, senkt die Abbruchquote für alle. Dazu zählen klare Beschriftungen, eindeutige Fehlermeldungen und ein durchgängig bedienbarer Checkout. Ein Bestellprozess, der ohne Maus funktioniert, ist auch auf dem Smartphone und unter Stress robuster. Der dritte Effekt ist Sichtbarkeit. Denn semantisches HTML, gute Alternativtexte und eine saubere Struktur sind zugleich starke SEO-Signale. Das vertiefe ich im Ratgeber zu Barrierefreiheit und SEO. Und schließlich verlangen immer mehr Marktplätze und B2B-Einkäufer einen Nachweis der Barrierefreiheit. Wer ihn hat, gewinnt Zugang, den andere nicht bekommen.

Ein Beispiel aus der Praxis macht den Zusammenhang greifbar. Bei einem Mode-Shop, den wir begleitet haben, brach ein auffälliger Anteil der Nutzer im Lieferadressen-Schritt ab. Die Analyse zeigte die Ursache. Das Auswahlfeld für das Bundesland war ein nicht tastaturbedienbares Custom-Dropdown. Daran scheiterten nicht nur Screenreader-Nutzer. Auch alle, die per Tastatur oder mit ungenauer Maussteuerung arbeiteten, blieben hier hängen. Nach dem Umbau auf ein natives, korrekt beschriftetes Auswahlfeld sank die Abbruchquote deutlich. Und zwar über alle Nutzergruppen hinweg. Genau das ist der Kern: Eine Barriere, die einen blinden Nutzer aussperrt, kostet im Stillen auch sehende Kunden, die es eilig haben.

So testen Sie Ihren Shop in zwei Minuten

Einen ehrlichen ersten Eindruck bekommen Sie ohne jedes Werkzeug. Und dieser Test deckt oft die folgenreichste Lücke auf, die alle übersehen.

Aus der Praxis – der Tastatur-Test am Eingang: Legen Sie die Maus weg und öffnen Sie Ihren Shop. Versuchen Sie zuerst, allein mit der Tabulator-Taste das Cookie-Banner zu erreichen. Lösen Sie dann mit Enter „Akzeptieren“ oder „Ablehnen“ aus. Schaffen Sie das nicht, hört Ihr Shop für jeden Tastatur- und Screenreader-Nutzer genau hier auf. Das gilt, egal wie gut der Rest ist. Funktioniert es, navigieren Sie weiter. Können Sie ein Produkt finden, eine Variante wählen, es in den Warenkorb legen und bis zur Zahlung durchklicken? Und zwar alles ohne Maus? Notieren Sie jede Stelle, an der Sie hängenbleiben oder nicht erkennen, was passiert. Die meisten Shop-Betreiber scheitern schon am Banner. Sie sind überrascht, wie früh der Weg endet. Dieser Test ersetzt kein Audit. Aber er macht das Problem in zwei Minuten greifbar.

So machen Sie Ihren Online-Shop rechtssicher

Der verlässliche Weg führt über drei Schritte: Status feststellen, mit echten Nutzern beheben lassen, dauerhaft absichern. Lassen Sie sich dabei nicht auf die Abkürzung ein. Ein eingeblendetes Overlay-Widget verspricht die Heilung per Klick. Es verändert aber nur die Oberfläche, nicht den Code darunter. Die Varianten-Auswahl, die der Screenreader nicht versteht, versteht er auch mit Widget nicht. Branchenerfahrung zeigt: Eine echte Behebung im Quellcode ist in 14 bis 30 Tagen machbar. Sie ist der einzige Weg, der vor Gericht und im Alltag trägt. Zudem behebt sie das Problem dort, wo es entsteht.

Andere Anbieter verkaufen Ihnen ein Skript und lassen Sie mit der Haftung allein. Wir bei IFDB begleiten den ganzen Weg. Und wir prüfen mit einem Panel echter Nutzerinnen und Nutzer assistiver Technologien. Denn die kaufentscheidenden Barrieren wie unbediente Varianten oder ein stiller Warenkorb erkennen automatische Scanner nicht. Den schnellen Status Ihres Shops liefert der kostenlose Access Score in Minuten. Die belastbare Prüfung samt rechtssicherem Zertifikat bekommen Sie über das Tiefen-Audit Access Ready. Jeder Relaunch und jede neue Aktion kann zudem neue Barrieren einbauen. Punkt-zu-Punkt-Audits sind deshalb binnen Wochen veraltet. Darum hält das Monitoring Access Guard Ihren Shop dauerhaft konform. Den strukturierten Einstieg bietet zudem unsere Checkliste zur barrierefreien Website. So wird aus einem Shop, der Kunden an unsichtbaren Hürden verliert, einer, durch den alle bis zur Kasse kommen.