Mann mit Sehbehinderung nutzt Brailledisplay für barrierefreies Online-Shopping
© Black Forest Labs / Flux

E-Commerce ohne Barrieren – so geht’s

Das Barrierefreiheitsstärkungsgesetz ist in Kraft. Digitale Angebote müssen jetzt barrierefrei gestaltet sein. Was das heißt und warum sich das positiv aufs Geschäft auswirkt, erläutern Marco Klötzel und Jeanette Bohn von Q Beyond in ihrem Gastbeitrag.

Marco KlötzelMarco KlötzelAbteilungsleiter DevOps & Quality Assurance, q.beyond AG
5 Min.· Aktualisiert am
Teilen
Ob Online-Shop, Website und mobile Apps, über die Produkte und Dienstleistungen vertrieben werden, ob E-Books, Chatbots, Zahlungsterminals oder Terminbuchungssysteme – verschiedene digitale Angebote fallen seit dem 28. Juni 2025 unter das Barrierefreiheitsstärkungsgesetz (BFSG).

Das heißt, dass sämtliche vorhandene Hürden für Menschen mit motorischer, kognitiver, visueller, auditiver oder sprachlicher Behinderung aus dem Weg zu schaffen sind. Wobei damit nicht nur an die rund acht Millionen Menschen in Deutschland mit Schwerbehinderung gedacht ist. Auch ältere Menschen oder temporär durch einen Unfall eingeschränkte Personen profitieren von den Regelungen.

Handlungsbedarf haben alle Unternehmen, die digitale Produkte und Dienste für Verbraucherinnen und Verbraucher anbieten. Ausgeschlossen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und entweder einem Jahresumsatz von höchstens zwei Millionen Euro oder einer Jahresbilanzsumme von höchstens zwei Millionen Euro. Bringen diese Kleinstunternehmen hingegen Produkte auf den Markt, die ausdrücklich unter das BFSG fallen, greift keine Sonderregelung.4 Säulen der Barrierefreiheit
Um die Barrierefreiheit umzusetzen, gibt es klare Leitplanken. Die Web Content Accessibility Guidelines (WCAG 2.2), auf die die europäische Norm EN 301 549 verweist, sind der international anerkannte Standard. An ihren vier Prinzipien orientiert sich das BFSG:

Wahrnehmbarkeit: Inhalte müssen für alle Nutzer greifbar sein. Etwa müssen Bilder durch Alternativtexte beschrieben werden, Videos Untertitel enthalten oder Farbkontraste ausreichend stark sein.

Bedienbarkeit: Die Funktionalität von digitalen Diensten darf sich nicht auf einzelne Eingabemethoden beschränken. Auch die vollständige Nutzung per Tastatur oder Spracheingabe muss möglich sein.

Verständlichkeit: Sprache muss einfach verständlich sein, die Navigation durchs Angebot selbsterklärend. Informationen ebenso wie Abläufe stehen hier im Mittelpunkt.

Robustheit: Assistive Technologien wie Screenreader müssen Berücksichtigung finden. Heißt, dass Inhalte Standards bei Syntax, der HTML-Nutzung und Co. erfüllen.Wie wichtig diese Vorgaben sind, zeigt ein einfaches Beispiel: Bleibt ein „Weiter“-Button im Bestellprozess beispielsweise für Screenreader unsichtbar oder lässt er sich mit der Tab-Taste nicht ansteuern, bricht der Kaufprozess ab. Halten sich Verantwortliche an die Vorgaben der WCAG 2.2, können sie die digitalen Kundenprozesse hingegen für alle spürbar verbessern.

Technik: Funktionalität ohne Hürden
Geht es an die praktische Umsetzung, ist schnell klar: Barrierefreiheit beginnt mit dem Code. Automatisierte Tools wie „Wave“ oder „Axe Dev Tools“ helfen, erste Schwachstellen aufzudecken – etwa fehlende Alternativtexte oder unzureichende Kontraste. Für eine belastbare Bewertung braucht es jedoch manuelle Tests, etwa mit Screenreadern wie „NVDA“ oder „Jaws“ oder mit den Bedienungshilfen auf iOS und Android. Denn die Technik kann nur feststellen, ob ein ALT-Text vorhanden ist, nicht aber, ob dieser sinnvoll ist.

Checkliste Technik (Auszug)
• Tastatur-Navigation: Alle Funktionen müssen per Tabulator erreichbar sein.
• Fokus-Indikatoren: Aktive Elemente müssen sichtbar hervorgehoben werden.
• Screenreader-Test: Inhalte müssen korrekt vorgelesen und Buttons eindeutig beschriftet sein.
• Semantischer Code: Überschriften, Listen und Links korrekt auszeichnen.

Design: Orientierung für alle Nutzer
Gestaltung entscheidet, ob sich Besucher zurechtfinden. Kritisch sind dabei Kontraste, Schriftgrößen und Animationen. Inhalte müssen gleichfalls bei Sehschwächen oder Farbenblindheit erkennbar sein, Animationen steuerbar und niemals gesundheitlich riskant – blinkende oder blitzende Inhalte sind möglichst zu vermeiden oder zumindest unter gewissen Schwellenwerten zu halten. Ebenso wichtig: ein konsistentes, vorhersehbares Layout, das Orientierung schafft und nicht ablenkt. Wiederkehrende Hilfen innerhalb der Navigation sind laut WCAG 2.2 gleichfalls von Bedeutung.

Sinnvoll ist es, das Design mit gängigen Tools wie dem „Web AIM Contrast Checker“ zu testen und anschließend in realen Nutzungsszenarien zu prüfen.

Checkliste Design (Auszug)
• Farbkontraste: Texte und Bedienelemente müssen klar vom Hintergrund unterscheidbar sein.
• Schriftgrößen: Inhalte müssen bis 200 Prozent vergrößerbar sein, ohne dass Informationen oder Funktionen verloren gehen. Ein Umbruch des Layouts ist zulässig – und oft sogar nötig –, solange Texte, Buttons und Bedienelemente vollständig lesbar und erreichbar bleiben.
• Animationen: Autoplay sollte vermieden werden. Bewegtbilder sollten jederzeit pausier- oder abschaltbar sein.
• Einheitliches Layout: Navigation und Buttons immer an vertrauten Stellen platzieren.

Inhalte: Klare Sprache
Die verständlichste Technik und das schönste Design nützen nichts, wenn Inhalte unklar oder unzugänglich sind. Jede Information sollte so formuliert sein, dass sie ohne Vorwissen verstanden wird – die Stichwörter: einfache Sprache. Dazu gehören beschreibende Alternativtexte, selbsterklärende Formularhinweise und eindeutige Fehlermeldungen. Entscheidend ist die Nutzerperspektive: Meldungen müssen nicht nur vorhanden, sondern auch hilfreich sein.

Hier sind Lesbarkeitsanalysen oder Nutzertests unverzichtbar, um sicherzustellen, dass Sprache, Formulare und Fehlermeldungen verständlich sind.

Checkliste Inhalte (Auszug)
• Alternativtexte: Bilder und Grafiken sollten durch Alternativtexte eindeutig beschrieben werden.
• Formulare: Pflichtfelder müssen klar markiert sein. Hilfetexte können schwerere Sachverhalte erläutern.
• Fehlermeldungen: Konkrete Korrekturhinweise müssen verwendet werden, beispielsweise „Bitte gültige E-Mail eingeben“ statt „Fehler“.
• Einfache Sprache: Kurze, klare Sätze, keine unnötigen Fachbegriffe tragen zum besseren Verständnis bei.

Fazit: Pflichten umsetzen, Vorteile erhalten
Gut neun Prozent der Deutschen leben mit einer Schwerbehinderung, viele weitere Personen mit kleineren Beeinträchtigungen. In beiden Fällen können Hürden in digitalen Angeboten zur Ausgrenzung führen. Deshalb sollten sich Händler vom Vorurteil verabschieden, dass das BFSG lediglich eine weitere Pflicht im Regulariendschungel darstellt, und die zahlreichen Benefits erkennen.

Schließlich bieten barrierefreie digitale Angebote (potenziellen) Kunden echten Mehrwert. Technische Checks sind ein guter Startpunkt, die eigentliche Qualität entsteht aber durch menschliche Bewertung und Erfahrung. Barrierefreiheit bedeutet nicht nur, Code-Standards einzuhalten, sondern ein spürbar nutzerfreundliches Erlebnis für alle zu schaffen.

Teilen
Marco Klötzel
Geschrieben vonMarco Klötzel

Abteilungsleiter DevOps & Quality Assurance, q.beyond AG

Marco Klötzel unterstützt seit 2014 das Team der q.beyond AG und ihrer Tochterunternehmen. Als Abteilungsleiter für DevOps und Quality Assurance verantwortet er die Optimierung von Projekten durch automatisierte Prozesse und hohe Qualitätsstandards. Für etailment schrieb er gemeinsam mit Jeanette Bohn über barrierefreien E-Commerce.

Alle Beiträge
Morning Briefing

Alles, was heute zählt — jeden Morgen in Ihrem Postfach.

Das Morning Briefing kuratiert die wichtigsten News aus E-Commerce und Handel. Kompakt, einordnend, werktäglich ab 7 Uhr.

  • 10.800+ Abonnenten
  • Werktäglich ab 7 Uhr
  • Jederzeit abbestellbar

Mit der Anmeldung stimmen Sie unserer Datenschutzerklärung zu. Abmeldung jederzeit möglich.