Warum wir digitale Barrieren im E-Commerce abbauen müssen
Stell dir vor, du möchtest online einkaufen - doch die Navigation ist unübersichtlich, lässt sich nicht bedienen und wichtige Produktinformationen sind nicht zugänglich. Dies erleben Millionen von Menschen täglich.
Für Menschen mit Seh- oder Hörbehinderungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen sind viele Websites eine Hürde.
E-Commerce Betreiber, die Barrierefreiheit ignorieren, schließen damit potenzielle Kunden aus und setzen sich ab 2025 auch einem rechtlichen Risiko aus. Mit dem European Accessibility Act (EAA) wird digitale Barrierefreiheit in der EU nämlich zur Pflicht.
Was ändert sich mit dem European Accessibility Act (EAA)?
Ab dem 28. Juni 2025 müssen die meisten Online-Shops in der EU ihre digitalen Angebote barrierefrei gestalten. In Deutschland wird der EAA durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt. Dabei basiert die Umsetzung auf den WCAG-Richtlinien (Web Content Accessibility Guidelines), die Barrierefreiheit in drei Stufen definieren (A, AA, AAA).Mikrounternehmen sind von der Verpflichtung ausgenommen. Das betrifft Betriebe mit:
Weniger als 10 Mitarbeitern
Einem Jahresumsatz von unter 2 Millionen Euro
Bei größeren Unternehmen wird jedoch keine Ausnahme gemacht. Sie müssen sicherstellen, dass ihre gesamte Customer Journey barrierefrei ist. Dies beginnt bei der Produktsuche und zieht sich über den Warenkorb bis hin zur Bezahlung.
Was bedeutet Barrierefreiheit im E-Commerce?
Barrierefreiheit im E-Commerce bedeutet, dass alle Menschen einen Online-Shop unabhängig von körperlichen oder kognitiven Einschränkungen nutzen können. Unter anderem betrifft dies folgende Bereiche:
1. Klare Strukturen und gute Lesbarkeit
Ein gut lesbarer Online-Shop beginnt mit einem einfachen, logischen Aufbau. Blinde oder sehbehinderte Nutzer navigieren mit Screenreadern durch die Seite. Dabei werden z.B Texte und Bedienelemente in Sprache oder Brailleschrift umgewandelt.
Was kann einfach umgesetzt werden?
Hoher Kontrast zwischen Text und Hintergrund erleichtert das Lesen.
Dynamische Schriftgrößen ermöglichen eine flexible Anpassung.
Logische HTML-Strukturen helfen Screenreadern, Inhalte korrekt zu erfassen.
Fehlende Struktur führt dazu, dass Screenreader Inhalte in falscher Reihenfolge vorlesen oder Elemente gar nicht zugänglich sind. Ein schlechter Seitenaufbau kann so den Einkauf unmöglich machen. Wie eine optimierte Seitenarchitektur nicht nur die Barrierefreiheit verbessert, sondern auch die Conversion-Rate steigern kann, erfährst du in unserem Artikel zur Landingpage-Optimierung.
2. Navigation ohne Maus – für alle erreichbar
Viele Menschen mit motorischen Einschränkungen können keine Maus benutzen. Ein Online-Shop muss deshalb komplett per Tastatur steuerbar sein. Das gilt besonders für:
Produktfilter
Suchfunktionen
Formulare
Kauf- und Bezahlprozesse
Tastaturbefehle wie das Navigieren mit der Tab-Taste müssen problemlos funktionieren. Wer eine Webseite ausschließlich für Maussteuerung optimiert, verschließt sie für viele potenzielle Kunden.
3. Alternative Inhalte für Bilder, Videos und Formulare
Bilder, Infografiken oder Videos sind oft zentrale Elemente von Online-Shops. Doch ohne aussagekräftige Alternativtexte bleiben sie für blinde oder sehbehinderte Menschen unsichtbar.
Alt-Texte für Bilder: Beschreiben den Inhalt präzise und verständlich. Ein „Bild eines roten Sneakers“ ist wenig hilfreich. Besser: „Roter Sneaker mit weißer Sohle, atmungsaktivem Mesh-Gewebe und rutschfestem Profil.“
Untertitel für Videos: Für gehörlose oder schwerhörige Menschen unverzichtbar.
Textbasierte Alternativen für interaktive Inhalte: Slider, Animationen oder Diagramme müssen auch in Textform zugänglich sein.
4. Verständliche Sprache – einfache Texte für alle
Komplexe Formulierungen sind für viele Nutzer eine Hürde. Und das nicht nur für Menschen mit Einschränkungen. Eine barrierefreie Website verwendet:
Kurze, prägnante Sätze
Einfache Begriffe ohne Fachjargon
Eindeutige Handlungsaufforderungen („Jetzt kaufen“ statt „Prozess starten“)
Gute Verständlichkeit sorgt nicht nur für eine bessere Nutzererfahrung, sondern verbessert auch die SEO-Performance, weil klare Sprache von Suchmaschinen bevorzugt wird.
So gestaltest du deinen Online-Shop barrierefrei
Die gute Nachricht: Viele Barrieren lassen sich mit einfachen Maßnahmen beseitigen. Du musst deine Website nicht von Grund auf neu bauen. Oft reichen gezielte Optimierungen, um das Einkaufserlebnis für alle zugänglicher zu machen. Ein Accessibility-Audit hilft dir dabei, Schwachstellen zu erkennen und gezielt zu verbessern.
Hier sind fünf zentrale Stellschrauben, mit denen du deinen Online-Shop schnell und effektiv barrierefrei gestalten kannst:
1. Kontraste & Schriftgrößen optimieren – für bessere Lesbarkeit
Helle Schrift auf hellem Hintergrund? Undenkbar. Menschen mit Sehbehinderungen oder Farbenblindheit brauchen eine klare visuelle Abgrenzung zwischen Text und Hintergrund.
Was du tun kannst:
Hoher Farbkontrast: Verwende ein Kontrastverhältnis von mindestens 4,5:1 (empfohlen von der WCAG – Web Content Accessibility Guidelines).
Flexible Schriftgrößen: Nutzer müssen die Schriftgröße ohne Qualitätsverlust anpassen können. Vermeide starre Schriftgrößen in Pixeln (z. B. px) und nutze relative Einheiten wie em oder %.
Gut lesbare Schriftarten: Dekorative oder zu verspielte Schriften erschweren das Lesen. Setze deshalb unbedingt auf klare, serifenlose Schriften wie z.B Arial, Verdana oder Roboto.
2. Steuerung per Tastatur ermöglichen – für eine bessere Navigation
Nicht jeder Nutzer kann eine Maus bedienen. Menschen mit motorischen Einschränkungen oder Sehbehinderungen navigieren oft nur per Tastatur oder Screenreader.
Was du tun kannst:
Teste deine Website nur mit der Tastatur: Kannst du mit der Tab-Taste durch das Menü, die Produktseiten und den Checkout navigieren? Falls nicht, gibt es Barrieren.
Fokushervorhebung aktivieren: Wenn sich Nutzer durch eine Seite tabben, muss erkennbar sein, welches Element gerade fokussiert ist (z. B. durch eine deutliche Markierung oder Umrandung).
Dropdown-Menüs und Pop-ups zugänglich machen: Viele Shops verwenden Menüs oder Module, die nur mit der Maus bedienbar sind. Stelle sicher, dass sie sich auch per Tastatur öffnen und schließen lassen.
Tipp: Screenreader-Nutzer verlassen sich auf HTML-Strukturen. Nutze semantische HTML-Tags (<button>, <nav>, <main> u.v.m.) anstelle von generischen <div>-Elementen, um die Navigation zu erleichtern.
3. Alternative Inhalte bereitstellen – für seh- und hörbehinderte Nutzer
Bilder, Videos und interaktive Elemente sind essentiell für ein Online Shopping Erlebnis. Doch für blinde oder gehörlose Menschen bleiben sie oft unsichtbar.
Was du tun kannst:
Alt-Texte für Bilder hinterlegen: Jede Produktabbildung braucht eine sinnvolle Beschreibung. Statt „Schuhe“ sollte dort stehen: „Schwarze Sneakers aus atmungsaktivem Mesh mit weißer Sohle und rutschfestem Profil“.
Untertitel für Videos bereitstellen: Gehörlose Nutzer können Produktvideos ohne Untertitel nicht verstehen. Verwende daher entweder eingebrannte (Open Captions) oder optionale Untertitel, die ein und aus gestellt werden können.
Transkripte für Audio-Elemente anbieten: Falls du Audio-Inhalte in deinem Shop verwendest, erstelle eine geschriebene Zusammenfassung oder ein vollständiges Transkript.
4. Formulare klar beschriften – für eine fehlerfreie Nutzung
Bestell- und Anmeldeformulare sind oft eine der größten Hürden für Menschen mit Seh- oder motorischen Einschränkungen. Fehlende oder missverständliche Beschriftungen können dazu führen, dass Nutzer den Checkout nicht abschließen können.
Was du tun kannst:
Eindeutige Labels verwenden: Jeder Eingabebereich (Name, E-Mail, Adresse) sollte mit einer klaren und sichtbaren Beschriftung versehen sein. Und nicht nur als Platzhaltertext, der verschwindet, wenn man tippt.
Automatische Fehlererkennung einbauen: Wenn ein Nutzer eine falsche E-Mail-Adresse eingibt, sollte eine verständliche Fehlermeldung erscheinen („Bitte eine gültige E-Mail-Adresse eingeben“) statt nur „Fehler“.
Genügend Klickfläche für Buttons bieten: Gerade auf mobilen Geräten sind winzige Buttons problematisch. Halte sie mindestens 48 x 48 Pixel groß, damit sie auch mit motorischen Einschränkungen gut bedienbar sind.
Tipp: Nutze das aria-label-Attribut, um Screenreader-Nutzern zusätzliche Hinweise für Formulareingaben zu geben.
5. Tests mit echten Nutzern durchführen – die beste Qualitätssicherung
Automatische Tools wie der Google Lighthouse Accessibility Test oder der WAVE Accessibility Checker sind hilfreich, aber sie erkennen nicht immer alle realen Probleme der Nutzer mit Beeinträchtigungen.
Was du tun kannst:
Teste deine Website mit echten Nutzern mit Behinderungen: Nur so erfährst du, wo sie tatsächlich auf Barrieren stoßen.
Nutze Screenreader selbst: Installiere NVDA (Windows) oder VoiceOver (Mac) und erlebe deine Website aus der Perspektive eines blinden Nutzers.
Führe regelmäßige Barrierefreiheits-Checks durch: Technik und Inhalte ändern sich ständig – prüfe regelmäßig, ob deine Seite noch barrierefrei ist.
Weitere Informationen zu den einzelnen WCAG Guidelines findest du hier.
Fazit: Jetzt handeln!
Unternehmen, die frühzeitig handeln, profitieren nicht nur von einer besseren Nutzererfahrung und höheren Umsätzen, sondern vermeiden auch rechtliche Risiken. Wer Barrierefreiheit ignoriert, verliert Kunden und riskiert Abmahnungen.
Warum warten? Der beste Zeitpunkt, deinen Shop barrierefrei zu gestalten, ist jetzt!
