Barrierefreiheit im Online-Shop: Was 2025 wichtig wird

Barrierefreiheit in Online-Shops ist aus den verschiedensten Gründen kein Nice-to-Have, sondern ein absolut wichtiges Thema – ab Mitte 2025 sogar ein Muss. Zum einen erschließen sich Händler mit barrierefreien Online-Shops große neue Kundengruppen, die ohne entsprechende Maßnahmen nicht erreichbar wären. Zum anderen sollte digitale Teilhabe als Menschenrecht gelten und Inklusion auch in der Online-Welt eine Selbstverständlichkeit sein. Darüber hinaus tritt am 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft, das Unternehmen dazu verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten. Hier erfahren Sie, was das Gesetz bedeutet, was Sie als Shop-Betreiber tun müssen und wie Ihnen eine Progressive Web App als Frontend dabei hilft, die Anforderungen schnell, einfach und flexibel zu erfüllen.

• BFSG – was genau ist das?

• Checkliste: Anforderungen an einen barrierefreien Webshop

• Welche technologischen Voraussetzungen muss eine Shop-Software erfüllen?

• Die Intershop PWA 7.0 und ihre neuen Funktionalitäten für BFSG-Konformität

• Fazit: Digitale Barrierefreiheit ist eine Investition in Zukunftsfähigkeit

BFSG – was genau ist das?

Das BFSG setzt die europäische Richtlinie zur Barrierefreiheit (European Accessibility Act, EAA) in deutsches Recht um. Grundlage für beide Regularien ist der internationale Standard WCAG 2.2 AA (Web Content Accessibility Guidelines 2.2 Level AA) des World Wide Web Consortium (W3C). Darin ist unter anderem genau definiert, wie Websites und andere digitale Inhalte gestaltet sein sollen, um zu gewährleisten, dass sie für Menschen mit und ohne Einschränkungen möglichst einfach zu nutzen sind. Das Dokument enthält zwölf sogenannte Richtlinien, die sich aus vier Grundprinzipien ableiten lassen: wahrnehmbar, bedienbar, verständlich und robust. Konkretisiert werden die zwölf Richtlinien durch 61 Erfolgskriterien, die eine barrierefreie Gestaltung erfüllen sollte. Das deutsche BFSG gilt explizit auch für viele Webshops. Und selbst Online-Anbieter, für die eine BFSG-Konformität noch nicht verpflichtend ist, tun gut daran, sie zur erfüllen, weil dies den Erwartungen der Kunden von heute entspricht.

Checkliste: Anforderungen an einen barrierefreien Webshop

Um zu klären, worauf Betreiber von Webshops bei der Umsetzung des BFSG bzw. der WCAG 2.2 AA achten müssen, sehen wir uns nachfolgend einzelne Anforderungen etwas genauer an und zeigen ganz konkret, wie man sie erfüllt. Im nächsten Abschnitt erklären wir dann, wie sich diese Anforderungen mit Hilfe einer modernen Progressive Web App (PWA) wie der Intershop PWA 7.0 technisch umsetzen lassen.

• Logische Struktur und Navigation: Die Navigation einer Shop-Website sollte nicht überladen sein, sondern mit wenigen relevanten Bereichen im Hauptmenü auskommen, die sich logisch aus dem Angebot des Shops ergeben. Unter diesen Hauptmenüpunkten können sich durch einen Mausklick weitere Unterpunkte öffnen lassen, aber auch hier sollten sich Shop-Betreiber auf das Wesentliche beschränken und beim Aufsetzen des Shops genau überlegen, was an welche Stelle gehört.

• Klare, ruhige und übersichtliche visuelle Gestaltung: Bewegtbild-Inhalte, flackernde Grafiken oder plötzlich sich öffnende Drop-Down-Menüs können Nutzer stören und verwirren. Insbesondere Menschen, die unter Epilepsie oder ADHS leiden sind davon betroffen. Aber auch ältere Menschen oder solche, die an diese Art der Darstellung nicht gewöhnt sind, empfinden das Nutzererlebnis unter diesen Bedingungen als anstrengend, ablenkend oder sogar stressig. Zwischenüberschriften, Absätze durch Leerzeilen und Listen helfen dabei, Texte sinnvoll zu strukturieren und zu gliedern.

• Verständliche Sprache: Alle Texte, die in Webshops eingesetzt werden, sollten in klarer, einfacher und gut verständlicher Sprache verfasst sein. Statt Fremdwörtern sollten Online-Anbieter gängige Begriffe aus der Alltagssprache verwenden und die Sätze kurz und prägnant halten. Lange Sätze mit vielen Nebensätzen, die zudem ineinander verschachtelt sind, gilt es zu vermeiden. Das betrifft alle Arten von Texten, sowohl eher allgemein gehaltene auf Startseiten als auch detaillierte Produktbeschreibungen oder Anleitungen zu Produkten und Prozessen.

• Kontraste und Lesbarkeit: Damit Schrift gut lesbar ist, muss sie sich deutlich vom jeweiligen Hintergrund absetzen. Das bedeutet nicht nur, dass Bilder als Schrifthintergründe ungünstig sind, sondern auch, dass einfarbige Hintergründe deutlich heller oder dunkler als die Schrift davor sein müssen. So ist beispielsweise weiße Schrift vor einem hellblauen Hintergrund bereits für Menschen ohne Einschränkungen beim Sehen nur schwer erkennbar. Bei ungünstigen Lichtverhältnissen oder eingeschränkter Sehfähigkeit sind Texte dann unlesbar. Auch die Schriftgröße muss ausreichend sein und Links sollten nicht nur farblich, sondern auch durch Unterstreichung kenntlich gemacht werden.

• Barrierefreie Formulare beim Check-Out: Alle Formulare – bei Webshops ist dies im Allgemeinen der Check-Out – müssen barrierefrei nutzbar sein. Eingabefelder, Buttons und auch Fehlermeldungen müssen eindeutig gekennzeichnet sein, damit sie leicht zu erkennen und zu verstehen sind und Nutzer mit und ohne Einschränkungen optimal bei Benutzung und Eingabe unterstützen. Verdeckt angezeigte Passwörter müssen sich per Befehl sichtbar machen lassen, fehlende oder fehlerhafte Eingaben in Formularzeilen sollten unmittelbar erkennbar sein, indem sie hervorgehoben und prominent angezeigt werden.

• Screenreader-Kompatibilität: Textinhalte müssen so gestaltet sein, dass sie von Vorlese-Softwares erfasst und wiedergegeben werden können. So ist gewährleistet, dass die Inhalte eines Webshops auch Menschen zugänglich sind, die nicht selbst lesen können, sei es wegen physischer oder kognitiver Einschränkungen. Screenreader-Kompatibilität setzt voraus, dass Websites bzw. Webshops in ihrem Quellcode (also auf der Ebene der Software im Hintergrund) bestimmte Tags (ARIA-Labels) enthalten, die solche Vorlese-Softwares sinnvoll durch die Inhalte auf dem Bildschirm leiten. Im Abschnitt zur Progressive Web App (PWA) greifen wir diesen Aspekt noch einmal genauer auf.

• Alternative Inhalte: Bilder, Icons, Grafiken oder Bewegtbild-Inhalte benötigen Untertitel oder Transkripte, die wiederum durch Vorlese-Softwares erfasst und wiedergegeben werden, damit Menschen mit eingeschränktem Sehen sie wahrnehmen können. Gleiches gilt für akustische Inhalte: Hier müssen Shop-Betreiber Textalternativen anbieten, die es auch Gehörlosen ermöglichen, alle relevanten Informationen zu erhalten.

• Robuste Web-Technologie: Die Richtlinie WCAG 2.2 AA definiert „robust“ als die Fähigkeit eines Webshops, störungsfrei und verlässlich mit den unterschiedlichsten Assistenztechnologien, Benutzeragenten und auch zukünftigen Technologien zusammenzuarbeiten. Der zugrundeliegende Code sollte also so geschrieben sein, dass er von Browsern und Hilfsmitteln aller Art auch langfristig problemlos interpretiert und störungsfrei genutzt werden kann.

• Tastatur-Navigation und Sprachsteuerung: Für Personen mit motorischen Einschränkungen, die keine Maus oder ähnliches bedienen können, aber auch für Menschen mit Sehbehinderung, müssen Webshops eine Navigation per Tastatur bieten – und zwar für alle Funktionen und Inhalte. Häufig erlaubt es die Tab-Taste, von Inhalt zu Inhalt zu springen, wobei hier die Reihenfolge wiederum im Quellcode definiert ist (siehe Abschnitt zur PWA). Auch bestimmte Tastenkombinationen für einzelne Aktionen sind möglich. Insgesamt sollen Nutzer also mit Hilfe ihrer Computertastatur barrierefrei durch den Shop navigieren können. Das gleiche gilt für die Sprachsteuerung, bei der der Benutzer per Sprachbefehl durch die Website navigieren und dafür entsprechende Hilfs-Softwares einsetzen, die wiederum von der Website unterstützt werden müssen.

• Einsatz von ARIA-Labels und semantischem HTML: ARIA-Labels (Accessible Rich Internet Applications) tragen grundlegend dazu bei, Websites mit Hilfstechnologien wie etwa Screenreadern nutzbar zu machen. Es handelt sich dabei um Attribute im Quell-Code, die einem HTML-Element zusätzliche Informationen für Nutzer hinzufügen, die bestimmte Teile von Websites visuell nicht wahrnehmen können. Befindet sich auf einer Website beispielsweise ein Button zum Schließen der Seite, der mit einem „X“ gekennzeichnet ist, so wird dieser von Vorleseprogrammen unter Umständen nicht erkannt und deshalb auch nicht vorgelesen. Ein ARIA-Label würde dann im Quellcode näher definieren, was ein Screenreader vorlesen soll. In diesem Fall würde der Screenreader „Button zum Schließen der Website“ vorlesen, wenn der Nutzer per Tastatursteuerung auf das Element gelangt.

Welche technologischen Voraussetzungen muss eine Shop-Software erfüllen?

Damit ein Webshop die oben beschriebenen Anforderungen für Barrierefreiheit erfüllt, müssen möglicherweise verschiedene technische bzw. softwareseitige Veränderungen daran vorgenommen werden – die genannten ARIA-Labels sind ein Beispiel dafür.

Je nach Software-Architektur des Shops sind solche Änderungen leichter oder schwieriger umzusetzen, was sich wiederum unmittelbar auf die daraus entstehenden Anpassungskosten und die benötigte Zeit auswirkt. Ältere Webshops mit überholten Technologien und Architekturen erfordern dabei wesentlich umfangreichere Umbauarbeiten. Ein Grund dafür ist, dass bei ihnen Frontend und Backend – also die Benutzeroberfläche und die nicht sichtbaren Inhalte und Prozesse des Webshops im Hintergrund – nicht voneinander getrennt, sondern eng miteinander verknüpft sind. Mit der Folge, dass Änderungen am Frontend immer auch substanzielle Änderungen im Backend des Shops erfordern.

API-basierte Headless-Architekturen schaffen Flexibilität – auch für Barrierefreiheit

So genannte API-basierte (Application Programming Interface) Architekturen, bei denen Backend und Frontend unabhängig voneinander existieren und nur durch Schnittstellen (APIs) miteinander verbunden sind, ermöglichen Veränderungen am Frontend, ohne dass das Backend davon betroffen ist. Das Backend enthält die gesamte Verwaltungs- und Datenbanklogik des Webshops, das Frontend lässt sich davon unabhängig nach dem Geschmack, den Bedürfnissen und den Notwendigkeiten einer Marke, eines Unternehmens, einer Zielgruppe oder eines Verkaufskanals gestalten.

Man spricht hier auch von Headless-Architekturen, weil sich über die Schnittstellen verschiedenste Frontend-Applikationen („Head“) mit dem Backend verknüpfen lassen – etwa neue Touchpoints wie Online-Marktplätze, Sprachassistenten, IoT-Geräte oder Progressive Web Apps (PWAs). Unternehmen können dadurch schneller auf Marktveränderungen reagieren, Websites leistungsfähiger gestalten und innovative Funktionen risikofrei einführen – auch solche, mit denen sich die Barrierefreiheit eines Webshops umsetzen lässt.

Die Vorteile einer PWA als Frontend – und was sie mit Barrierefreiheit zu tun hat

Der Einsatz einer Progressive Web App als Frontend in einem Webshop bietet auch jenseits von Barrierefreiheit eine ganze Reihe an Vorteilen: PWAs sorgen im Vergleich mit nativen Apps für eine größere Reichweite, weil ihre Inhalte auch von Suchmaschinen indexiert werden. Nutzer von Mobilgeräten profitieren von wesentlich kürzeren Ladezeiten, weil Service-Worker ein effizientes Caching ermöglichen. So lassen sich relevante Daten im Hintergrund aktualisieren oder schon vor einem eigentlichen Zugriff zwischenspeichern. Das führt außerdem dazu, dass Daten auch offline verfügbar sind und ein Webshop weiter nutzbar bleibt – gerade in Weltgegenden mit geringer Netzabdeckung oder schwankenden Leistungen ein entscheidender Vorteil.

Mit Blick auf die Barrierefreiheit bieten PWAs die Möglichkeit, schnell und problemlos neue Funktionalitäten im Frontend zu realisieren, ohne dabei aufwändige Änderungen am Backend vornehmen zu müssen. Wer also bereits heute einen Webshop betreibt, der über eine Headless-Architektur mit einer PWA als Frontend verfügt, wird wesentlich schneller, einfacher und kostengünstiger dazu in der Lage sein, BFSG-konform zu werden. Je nach PWA und deren aktueller Version kann aber auch hier ein erheblicher Programmieraufwand entstehen, um alle im ersten Teil dieses Artikels aufgeführten Anforderungen des BFSG zu erfüllen. Intershop hat das Szenario bereits vor langer Zeit antizipiert und seine hauseigene PWA 7.0 exakt auf die in den WCAG 2.1 AA-Richtlinien definierten und im BFSG für Deutschland umgesetzten Anforderungen zugeschnitten. Nutzer der Intershop PWA 7.0 erhalten out-of-the-box als Standard alle Funktionalitäten und Eigenschaften, mit denen sich ihr Webshop völlig reibungslos und schnell exakt an die neuen Vorgaben anpassen lässt.

Die Intershop PWA 7.0 und ihre neuen Funktionalitäten für BFSG-Konformität

Die Neuerungen an der Intershop-PWA 7.0 haben das Ziel, allen Nutzern von Webshops, die auf Intershop-Software basieren, einen leichteren Zugang zu Online-Inhalten und eine bessere Nutzererfahrung zu bieten – insbesondere solchen Usern, die auf Hilfstechnologien angewiesen sind. Mit den vorgenommenen Veränderungen und Verbesserungen an der Intershop-PWA unterstreichen wir unser Engagement für digitale Inklusion. Und natürlich stellen wir so auch sicher, dass unsere Produkte den Barrierefreiheitsstandards der WCAG 2.2 AA und dem BFSG entsprechen, so dass unsere Kunden dadurch ebenfalls gesetzeskonform am Markt agieren können.

Hier eine Liste mit den konkreten Verbesserungen, die als Grundeinstellungen der Intershop-PWA geliefert werden:

• Als Standardeinstellung gibt es bei der Passwort-Eingabe eine Schaltfläche zum Anzeigen des eingegebenen Passwortes in Form eines Auge-Symbols.

• Die Sticky-Header-Funktion ist standardmäßig ausgeschaltet. So wird beim Einsatz von Screenreadern die Navigation nicht bei jeder neuen Seite vorgelesen.

• Falsche Eingaben in Formularen werden deutlich markiert und auf dem sichtbaren Teil des Bildschirms angezeigt.

• Aussagekräftige Hauptüberschriften (H1-Überschriften). Die Hauptüberschriften sind klarer definiert (auch im Quellcode), was sie für Screenreader optimiert und Inhalte leichter verständlich macht. Aber auch Suchmaschinen finden die Seiten besser.

• Barrierefreie und eindeutige Bezeichnungen für Pop-Ups aller Art. Fenster wie Login-Dialoge, Cookie-Meldungen und andere Pop-Ups erhalten einen unmissverständlichen Namen im Quellcode, den Screenreader vorlesen. Beispielsweise „Warenkorb öffnen“, „Dialog schließen“ oder „Cookie-Einstellungen“.

• Animierte Schaltflächen bzw. Buttons werden ersetzt. Bewegliche oder blinkende grafische Elemente weichen visuell ruhigeren Alternativen, um so das Nutzererlebnis weniger anstrengend zu machen. Vor allem Menschen mit Epilepsie oder ADHS profitieren davon.

• Bessere Unterstützung von Vorlesefunktionen. Elemente wie Schaltflächen oder Links haben im Quellcode klar beschriebene Eigenschaften, damit Screenreader sie unmissverständlich vorlesen können. Nutzer von Screenreadern wissen so genauer, worauf sie klicken. Wo zuvor nur „Schaltfläche“ im Code stand, steht jetzt beispielsweise „Warenkorb“ oder „Zur Kasse gehen“.

• Verbesserte Tastatur-Navigation. Mit Hilfe der verschiedenen Funktions-Tasten (Tab, Enter, Cursor) lassen sich Seiten wesentlich einfacher navigieren. Und zwar so, dass sie vollständig per Tastatur zu bedienen sind – was in der Vergangenheit nicht immer vollumfänglich möglich war.

• Präzisere Gruppenbeschriftungen in Formularen. Zusammengehörende Formularfelder (z. B. Rechnungsadresse und Lieferadresse) sind ab sofort übersichtlich und mit aussagekräftigen Titeln in Gruppen zusammengefasst.

• Direkter Link zum Hauptinhalt. Ein visuell versteckter, aber im Quellcode für Screenreader oder Tastatursteuerung erkennbarer Link führt Nutzer dieser Hilfstechnologien direkt zum Hauptinhalt der Seite – etwa zum Produktkatalog. So wird das langwierige Navigieren durch andere Seiteninhalte bis zum eigentlichen Ziel vermieden.

• Links in den Standard-Einstellungen sind nicht mehr nur farblich abgesetzt. Für Menschen mit eingeschränkter Farbwahrnehmung sind Hyperlinks nicht mehr nur farblich abgesetzt, sondern z. B. auch unterstrichen oder gefettet. Vergrößerte Schaltflächen für Links und andere Buttons. Alle Elemente, die anklickbar sind, werden visuell größer gestaltet, so dass sie auch bei eingeschränkter Sehfähigkeit gut erkennbar sind.

• Deutlichere Farbkontraste. Alle Standard-Farbeinstellungen der Intershop-PWA 7.0 sind darauf ausgelegt, dass sich Texte durch starke Kontraste von den Hintergründen klar abheben und so gut lesbar sind – auch bei heller Umgebung und insbesondere für Menschen mit Sehschwächen.

• Korrekte Reihenfolge der Überschriften. Die Überschriften auf der Seite (H1, H2, H3 etc.) sind jetzt logisch und sauber geordnet. Das ermöglicht es, mit Hilfstechnologien leichter durch die Inhalte zu navigieren – etwa beim Springen von einer Kategorie zur nächsten.

• Sichtbare Tastatur-Navigation. Wenn User sich mit der Tastatur durch die Inhalte der Seite bewegen (Tab-Taste), wird klarer hervorgehoben, welches Element gerade aktiv ist.

• Klarere Struktur für Hilfstechnologien. Der wichtigste Inhaltsbereich jeder einzelnen Seite ist jetzt im Code korrekt als „Hauptinhalt“ markiert (<div role=“main“> wird durch semantisches <main>-Element ersetzt). Screenreader erkennen dadurch sofort, wo der Hauptteil der Seite ist – User können schneller an die entsprechende Stelle springen.

• Zusätzliche ARIA-, lang- und title-Attribute. Die Seiten enthalten jetzt im Code zusätzliche Hinweise für Screenreader, z. B. über Sprache, Beschriftungen oder Titel von Bereichen. Das erleichtert Navigation und Verständlichkeit enorm – besonders für Menschen, die auf Hilfstechnologien angewiesen sind.

Fazit: Digitale Barrierefreiheit ist eine Investition in Zukunftsfähigkeit

Die Anforderungen des BFSG mögen auf den ersten Blick wie eine zusätzliche Hürde wirken – in Wahrheit sind sie eine Chance: für mehr Inklusion, eine bessere User Experience und einen erweiterten Kundenkreis. Wer frühzeitig handelt, verschafft sich nicht nur einen klaren Wettbewerbsvorteil, sondern trägt aktiv zur digitalen Teilhabe bei.

Moderne Technologien wie die Intershop PWA 7.0 ermöglichen es, die Vorgaben an Barrierefreiheit flexibel, effizient und zukunftssicher umzusetzen – ohne tiefgreifende Eingriffe in das Backend. Insbesondere Headless-Architekturen bieten die nötige Agilität, um auf gesetzliche Änderungen und wachsende Nutzeranforderungen schnell reagieren zu können.

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess – und eine Haltung, die das digitale Erlebnis für alle verbessert.

Accessibility Check: Unterstützung für Intershop-Plattformkunden

Den Nutzern der Intershop Commerce Plattform steht ein spezielles Servicepaket zur Verfügung: der Accessibility Check. Intershop-Experten analysieren bestehende Progressive Web Apps (PWA) und Responsive Starter Stores (RSS) auf Barrierefreiheit. Die Ergebnisse bilden die Grundlage für gezielte Optimierungsempfehlungen, um die Einhaltung gesetzlicher Vorgaben sicherzustellen.

Mehr Informationen zur Intershop PWA, zum Accessibility Check und zur Umsetzung barrierefreier Webshops gibt es auf Anfrage – das Intershop-Team steht für Rückfragen gerne bereit.