Shopify Barrierefreiheit – Mit inklusiver UX zu besserer Customer Experience & mehr Conversions

Wie wäre es mit folgender grandioser Marketingidee: Du erklärst deinen Store zur Zone für große Menschen. Rein darf nur, wer mindestens 1,80 Meter groß ist. Nachzuweisen unter Vorlage des Personalausweises. Das wird auf Social Media einschlagen wie eine Bombe!

Klingt bescheuert, sagst du? Ist es auch, denn immerhin hast du dich gerade um grob geschätzte 60 Prozent aller potenziellen (erwachsenen) Kund:innen gebracht. Vom Shitstorm, der dich erwartet, ganz zu schweigen.

Aber: Wenn anhand dieses Beispiels so deutlich wird, dass künstliche Zugangsbeschränkungen für einen Onlineshop eine blöde Idee sind, warum ist Barrierefreiheit im E-Commerce dann immer noch eher Ausnahme als Regel?

Du meinst, das klingt mindestens genauso bescheuert? Immerhin gilt seit Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) und inzwischen ist so gut wie jede Webseite barrierefrei? Falsch gedacht!

In diesem Beitrag erklären wir dir, warum viele Onlinestores immer noch nicht komplett zugänglich für alle sind und mit schlechter Customer Experience potenzielle Kundschaft verprellen. Außerdem zeigen wir, wie du deinen eigenen Shopify Shop barrierefrei aufstellst – ein wichtiger Schritt in Richtung besserer Nutzererfahrung. Denn Barrierefreiheit ist längst nicht alles, sondern Teil einer ganzheitlichen Customer Experience, die wiederum nur ein Baustein auf dem Weg zur Zukunft des digitalen Handels ist: Connected Cloud Commerce.

Starten wir durch!

Barrierefreiheit: Weit mehr als nur ein Gesetz

Also, was ist los im E-Commerce? Das BFSG ist nun schon länger in Kraft. Wer als Unternehmen seinen Onlineauftritt immer noch nicht barrierefrei gestaltet hat, wird abgemahnt oder sogar stillgelegt. All das ist in unserem Beitrag zum Thema detailliert nachzulesen.

Das Problem ist Folgendes: Als demokratisch verabschiedetes Gesetz ist das BFSG ein Kompromiss, eine Lösung auf dem kleinsten gemeinsamen Nenner. Sein Ziel ist es, das Internet für Menschen mit schweren Einschränkungen zugänglicher zu machen. Gleichzeitig sollen Onlinehändler:innen keine gewaltigen Steine in den Weg gelegt werden. Ihre Geschäfte gehen im Idealfall ungehindert weiter.

So weit, so logisch. Allerdings lässt das Gesetz so etliche Menschen auf der Strecke – nämlich all jene, die nur leicht eingeschränkt sind, aber sich über eine auf ihre Bedürfnisse zugeschnittene Webseite ebenfalls freuen würden.

Denke zum Beispiel an circa 40 Millionen Brillenträger:innen in Deutschland (Quelle: Allensbach-Studie), die auf eine augenfreundliche Schriftgröße angewiesen sind. Klar, die könnten sich leicht selbst helfen. Strg-Taste plus Mausrad, um die Webseite zu zoomen. Aber wissen die das auch?

Laut der Bertelsmann Stiftung fühlen sich 37 Prozent der Menschen unsicher im Umgang mit digitalen Medien (plus all die Jugendlichen, die sich zwar nicht unsicher fühlen, aber unsicher sind). Und was ist mit den sieben Millionen (Quelle: DGKJP) Legastheniker:innen? Denen nutzt ein großer Text herzlich wenig, wenn die Buchstaben vor ihren Augen tanzen, weil der Font schlecht gewählt ist.

Kurzum: Da draußen sind Millionen von Menschen, die sich ebenfalls einen barrierefreien Zugang wünschen, aber durch das BFSG nur wenig Berücksichtigung finden.

100 % Barrierefreiheit im E-Commerce – Was hat ein Unternehmen davon?

Es mag nach furchtbar viel zusätzlichem Aufwand klingen, wenn du deinen Shop jetzt auch noch für marginalisierte Randgruppen wie Kurzsichtige optimieren sollst. Allerdings versteckt sich hinter den Maßnahmen jede Menge Potenzial. Zum Beispiel:

• Millionen neuer Kund:innen: Nochmal: Ein Großteil der deutschen Bevölkerung hat im Alltag mit kleineren Einschränkungen zu kämpfen. Von der Farbsehschwäche bis zur Fotophobie. All diese Menschen könnten deine Kund:innen sein, wenn du sie mit deinem UX-Design nicht von einem Einkauf abhältst.
• Höhere Kundenfreundlichkeit: Klar, der Mann mit der Hornhautverkrümmung ist es gewohnt, seine Brille heben zu müssen, wenn er etwas trotz Sehhilfe wieder mal nicht lesen kann. Aber was wäre, wenn er es gar nicht müsste? Vielleicht fällt es ihm zunächst gar nicht auf – aber wenn, dann ist er begeistert von deinem Shop.
• Besserer Social Proof: Und stell dir weiter vor, eine Legasthenikerin könnte zum ersten Mal shoppen, ohne Kopfschmerzen vom Lesen zu bekommen. Was macht sie jetzt? Es weitererzählen! Im Freundeskreis, auf Social Media und wer weiß, wo sonst noch. So ein Imagegewinn ist sonst nur für teuerstes Marketing zu haben.
• Alleinstellungsmerkmal: Wenn du für eine barrierefreie User Experience sorgst, deine Marktbegleiter selbige aber vernachlässigen – was glaubst du, wo die Menschen lieber einkaufen? Vor allem, wenn du deine Barrierefreiheit noch ein wenig promotest.

Insgesamt ergibt sich so ein eindeutiges Bild: Maximale Barrierefreiheit ist im E-Commerce ein massiver wirtschaftlicher Vorteil.

Shopify Barrierefreiheit und UX-Design: Wie hängt das zusammen?

Es ist bereits ein wenig durchgeklungen, aber nochmal auf den Punkt: Eine barrierefreie Webseite beginnt immer beim Design der User Experience (UX). Denn falls hier geschludert wird oder Form vor Funktion kommt, entstehen sofort die ersten Hürden. Zu den Basics eines inklusiven UX-Designs gehören zum Beispiel:

• Farben & Kontraste: Rote Schrift auf schwarzem Grund geht gar nicht. Auch nicht für den Hardcore Gothic Shop! Sogar Robert Smith trägt inzwischen eine Brille.
• Schriftgröße: Das Minimum sind 14 px. Alles darunter wirkt für etliche Menschen wie Fliegendreck und nicht wie Buchstaben.
• Abstände & Bildgrößen: Nicht zu groß, nicht zu überladen, nicht zu viel Abstand zwischen den einzelnen Elementen. Sonst verliert sich die innere Logik der Seite und sie wirkt nur noch verwirrend.
• Zahme Pop-ups: Ein Mini-X zum Schließen eines Pop-ups ist ein No-Go. Besser ist es, wenn es ausreicht, irgendwo neben dem Pop-up zu klicken. Im Idealfall verzichtest du ganz auf die sich ungebeten öffnenden Fenster.

Klingt alles ziemlich simpel und einfach umzusetzen, oder? Dennoch die Frage:

Wie steht es um barrierefreies UX-Design bei Shopify?

Die positive Nachricht direkt vorneweg: Gute Shopify-Themes setzen alle oben genannten Punkte ungefragt und ohne weiteres Zutun in die Tat um. Du musst dich hier also um gar nichts kümmern. Außer natürlich, du hast dich, als dein Store gebaut wurde, gegen ein gutes Theme entschieden.

Wir haben es schon öfter erwähnt, können es aber gar nicht oft genug sagen: Wer am Shopify Theme spart, spart am falschen Ende! Die besten Vorlagen bringen so viele Funktionen, Features und Möglichkeiten mit sich, dass ihr Preis absolut gerechtfertigt ist. Daher unser dringender Appell: Hol dir dein Theme nie von einem billigen Drittanbieter. Setze auch nicht auf günstige Shopify Themes. Orientiere dich immer im oberen Preissegment und investiere einmal 300+ Euro in dein Theme. Es lohnt sich!

Allerdings: Auch die besten Shopify Themes kommen erst allmählich in einer barrierefreien Welt an. Was viele von ihnen immer noch nicht beherrschen, sind zum Beispiel:

• Pausierbare Bewegtelemente: Alles, was sich bewegt – Videos, Animationen, Announcement Bars – muss sich manuell pausieren lassen. Zum einen, damit User:innen die Inhalte in ihrem eigenen Tempo wahrnehmen können. Zum anderen, weil bewegte Elemente auf manche Menschen störend bis unangenehm wirken.
• Manuelle Slider: Auch Bild-Slider sollten sich pausieren und manuell weiterklicken lassen. Wieder spielt die Geschwindigkeit, in der Menschen Informationen wahrnehmen können, eine große Rolle: Wer schlecht sieht, braucht mehr Zeit, um ein Bild zu deuten oder einen Text zu lesen.
• Keyboard-Fokus-Indikatoren: Eine barrierefreie Webseite lässt sich auch komplett per Keyboard bedienen. Blöd also, wenn der Fokus-Indikator aus Designgründen ausgeblendet wird. Hier sollte es immer die Option geben, ihn deutlich anzuzeigen.
• Zeitkontrolle für interaktive Aufgaben: Kein Theme-Problem per se, aber dennoch wichtig: Aus Sicherheitsgründen arbeiten Checkouts oft mit einem Timer; eine Qual für alle, die im Netz nicht ausreichend schnell unterwegs sind. Deshalb sollte sich die Zeit bis zum Timeout verlängern oder sogar ganz abschalten lassen.

Fazit: Mit dem richtigen Shopify Theme rückst du deinen Store bereits ein gutes Stück Richtung Barrierefreiheit. Alle möglichen Features werden allerdings nicht abgedeckt; es besteht Handlungsbedarf.

Wie sieht der aus?

Auf dem Weg zur Barrierefreiheit im E-Commerce: Erste Maßnahmen auf Shopify

Um schnell für mehr Zugänglichkeit in deinem Store zu sorgen, führt dein Weg wie so oft über Tools und Apps. Ein kurzer Blick in den Shopify App Store führt zu Lösungen wie BFSG BITV Web‑Barrierefreiheit, SEA Accessibility EAA ADA WCAG oder dem AccessEz‑ Accessibility Widget.

Und auch wenn die Namen der Tools alles andere als zugänglich oder barrierefrei sind, erweitern sie deinen Store um Funktionen, die Zugänglichkeit, Wahrnehmbarkeit und Lesbarkeit für viele Menschen verbessern. Sei es, indem sie es User:innen erlauben, einen Kontrastmodus zu aktivieren, sämtliche bewegte Elemente auszublenden oder auf einen Legasthenie-freundlichen Font umzuschalten.

Dazu nutzen alle derzeit verfügbaren Apps sogenannte Overlays – also designverändernde Strukturen, die sich wie eine Folie über die ursprüngliche Webseite legen. Bunte Folien verändern unter anderem die Farben einer Webseite, während intransparente Folien ganze Elemente ausblenden.

Overlays besitzen den Vorteil, dass sie den Quellcode einer Webseite nicht oder kaum antasten. Einmal installiert und eingerichtet, können Besucher:innen sich den Store ganz an ihre Bedürfnisse anpassen – und genau hier beginnen die Probleme.

Denn stell dir vor, jemand mit einer starken Sehbeeinträchtigung steuert deinen Shop an. Was hat diese Person davon, dass sie über Schaltflächen die Schriftgröße oder den Kontrast deiner Seiten anpassen kann, wenn sie den entsprechenden Button nicht erkennt? Jemand anderes ist möglicherweise auf Tastatursteuerung angewiesen, muss diese aber erst mit einem Mausklick im Menü aktivieren. Was für eine Farce!

Deutlich sinnvoller wäre es, wenn dein Store nicht nur ein Overlay besitzt, sondern seine Funktionen automatisch und aufgrund der Browsereinstellungen der Besucher:innen aktivieren kann. Theoretisch ist das möglich, erfordert aber Programmierkenntnisse.

Auftritt für die Profis!

Komplett zugänglich: Schritt für Schritt zum barrierefreien Shopify Store

Wenn du deinen Onlineshop nicht nur absolut rechtssicher barrierefrei aufstellen willst, sondern deinen Kund:innen die bestmögliche User Experience bieten möchtest, gehst du am besten so vor:

1. Suche dir einen auf Barrierefreiheit spezialisierten Dienstleister

Diese Dienstleister bieten dir nicht nur die bereits erwähnten Overlay-Tools an. Vor allem unterziehen sie deinen Store einem gründlichen Audit und überprüfen ihn an allen möglichen und unmöglichen Stellen auf einen barrierefreien Zugang. Dafür benötigen sie keinen Zugang zu sensiblen Bereichen deines Unternehmens. Du musst lediglich vorübergehend ein Skript aktivieren, beziehungsweise ein Plugin installieren. Anbieter aus Deutschland für eine solche Dienstleistung sind zum Beispiel Eye-Able aus Leipzig oder AccessGO aus Berlin.

Nach der Analyse bekommst du eine umfassende To-do-Liste mit allen Schwachpunkten deines Stores. Mit selbiger geht es dann so weiter:

2. Beauftrage eine gute Shopify Plus Agentur mit der Umsetzung der To-dos

Um deinen Store im nächsten Schritt komplett barrierefrei zu machen, wendest du dich am besten an die Agentur, die deinen Shop entwickelt hat und hoffentlich immer noch betreut. Schließlich kennt sich niemand so gut mit deinem Auftritt im Web aus, wie seine Schöpfer:innen.

Unserer Erfahrung nach sind die durch den Barrierefreiheitsdienstleister (Es lebe die deutsche Sprache! Wir nennen sie ab jetzt BFDs.) monierten Punkte meist keine große Herausforderung. Oft ist es reine Fleißarbeit, selten wird es kompliziert, niemals komplex. In der Regel reicht es, wenn du der Agentur deines Vertrauens einfach die To-do-Liste in die Hand drückst und sie direkt in das Tool deines BFDs einlädst. Rechne im Schnitt mit fünf bis zehn Personentagen an Developer-Kapazität, und die Sache ist erledigt.

Die Kooperation mit einer Agentur hat übrigens auch den Vorteil, dass dort nicht nur Entwickler:innen sitzen, sondern oft ein ganzes Netzwerk aus den unterschiedlichsten Profis zur Verfügung steht. Sollte dir dein BFD zum Beispiel angekreidet haben, dass deine Texte sich so gut lesen wie ein typisches deutsches Amtsschreiben, dann sind deine Expert:innen für Text nur eine Mail weit weg.

3. Lasse alles weiterhin überwachen

Die Arbeit an einer Webseite ist bekanntlich nie abgeschlossen. Du musst nur eine neue Kategorieseite erstellen, eine Landingpage basteln oder ein Video platzieren, und plötzlich gibt es wieder Probleme mit der Barrierefreiheit.

Um die Compliance an alle gängigen Gesetze, Richtlinien und Best Practices dauerhaft zu gewährleisten, empfehlen wir daher, einen Vertrag über einen Monitoring-Service mit deinem BFD abzuschließen.

Sollte es zu Auffälligkeiten kommen, wirst du umgehend informiert und kannst den Job dann direkt an die ITler deiner Lieblingsagentur weiterreichen. Maximale Effizienz, minimale Störfelder – ganz im Sinne aller Beteiligten.

E-Commerce barrierefrei: Alles Wichtige auf einen Blick

Na, noch alle Fakten beisammen? Falls nicht, kommt hier die kompakte Übersicht:

• Barrierefreiheit im E-Commerce ist mehr als nur ein Gesetz. Für dich versteckt sich hier das Potenzial auf massiven Umsatzzuwachs und hervorragenden Social Proof, indem du deinen Store für möglichst viele Menschen zugänglich machst.
• Ein gutes Shopify Theme erfüllt automatisch viele Voraussetzungen für den barrierefreien Onlinehandel. Allerdings gibt es auch bei den besten Themes immer noch Schwachstellen, die händisch abgestellt werden müssen.
• Für eine optimale Umsetzung hat sich ein Audit durch einen Dienstleister für Barrierefreiheit bewährt. Die technische Umsetzung übernimmt dann deine Shopify Plus Agentur. Für langfristige Compliance empfiehlt sich ein permanentes Monitoring.

Wenn dich jetzt interessiert, wie so ein barrierefreier Store in der Praxis aussieht, haben wir noch zwei Beispiele für dich:

Da wäre zunächst der Shop für elektronischen Bürobedarf von FrancoTyp: Maximale Lesbarkeit, klar voneinander abgesetzte Bilder, hoher Kontrast, selbsterklärende Navigation, aufgeräumte Menüs. Die meisten Menschen finden sich hier problemlos zurecht und können alle Inhalte problemlos wahrnehmen.


Noch weiter geht es bei der bekannten Schuhmarke Wilding: Auch hier ist alles sauber strukturiert und einfach lesbar, unterstützt durch aussagekräftige Bildelemente. Richtig krass wird es aber, wenn du auf den Button oben rechts klickst. Der, auf dem „Visuelle Hilfe“ steht. Probiere es gerne selbst aus. Ach, und hast du den Pause-Knopf in der Announcement-Bar bemerkt? Das ist auch kein Standard.

Als letzter Tipp: Barrierefreie Customer Experience als Teil einer großen Cloud-Commerce-Landschaft

Barrierefreiheit ist nur einer von vielen Bausteinen, die deinen Store noch besser, kundenfreundlicher und performanter machen – vor und hinter den Kulissen. Kontinuierlicher Ausbau und das Verbinden unterschiedlicher Cloud-Lösungen sind die Schlagwörter – und genau dafür sind wir die richtigen Ansprechpartner.

Etwa, indem wir zunächst mit einem vergleichsweise großen Schritt starten: der Migration deines Business zu Shopify. Dort angekommen bauen wir deinen Store komplett neu auf. Als Teil deiner kompletten digitalen Infrastruktur, maximal skalierbar und bereit für Zukunft und Expansion. Ein kurzer Kontakt zu unserem Migrationsteam genügt und wir starten dein Umzugsprojekt.

Solltest du dagegen schon bei Shopify sein, unterziehen wir deinen Store einer Generalüberholung. Weg mit all dem alten Ballast, her mit Software und Schnittstellen, die dein Unternehmen langfristig wachsen lassen. Wende dich dazu an unsere Relaunch Crew.

Passend dazu als allerletzten Denkanstoß: Weißt du, wer in einem inoffiziellen Audit durch Eye-Able richtig bescheiden abgeschnitten hat? Amazon! 23 von 100 möglichen Punkten; letzter Platz. Die völlig überfrachteten PDPs sind aber auch ein Graus. Ihre 30 Jahre sieht man der Plattform inzwischen echt an. Das kannst du besser und wirbst dann mit: “Mit der Machete durch den Amazonas? Wir zeigen dir, wie komfortabel Shopping sein kann!”