Barrierefreie Frontend-Entwicklung: Die Möglichkeiten eures Shopsystems

Barrierefreie Websites sind gesetz(t). Zumindest ab dem 28. Juni 2025, denn dann tritt das Barrierefreiheitsstärkungsgesetz in Kraft.

Wenn euer Onlineshop also jetzt noch nicht für alle Nutzenden zugänglich ist, hat euer Entwicklungsteam noch einiges zu tun. Dabei sind sie aber natürlich nicht auf sich allein gestellt. Für zahlreiche E-Commerce-Systeme werden immer wieder neue Updates herausgebracht, die euch als Systemnutzer erleichtern, die Kriterien zur Barrierefreiheit zu erfüllen.

Erfahrt in diesem Beitrag, welche Grundlagen die Lösungen Adobe Commerce, Salesforce Commerce Cloud, SAP Commerce Cloud, commercetools, Intershop, Shopify und Shopware 6 für die barrierefreie Webentwicklung bereits liefern und welche Ziele die Anbieter für die Zukunft verfolgen.

Diese Möglichkeiten sollten fester Bestandteil eurer Roadmap sein. Wie ihr eine zielführende Roadmap aufstellt und welche Maßnahmen ihr selbst noch übernehmen solltet, erfahrt ihr hier.

1. 1. 1. In 3 Schritten zum barrierefreien Onlineshop
      2. Barrierefreie Website mit Adobe Commerce
      3. Barrierefreie Website mit Salesforce Commerce Cloud
      4. Barrierefreie Website mit SAP Commerce Cloud
      5. Barrierefreie Website mit commercetools
      6. Barrierefreie Website mit Intershop
      7. Barrierefreie Website mit Shopify
      8. Barrierefreie Website mit Shopware 6
      9. Barrierefreie Webentwicklung für positive User Experience: Success Story

In 3 Schritten zum barrierefreien Onlineshop

Bis zum 28. Juni bleibt nicht mehr viel Zeit. Das ist allerdings kein Grund zur Panik. Im Gegenteil. Erstellt eine Roadmap, bevor ihr selbst Anpassungen an eurer Website umsetzt. Diese sollte die Updates eures E-Commerce-Lösungsanbieters für die barrierefreie Webentwicklung mit einbeziehen. Erst dann könnt ihr Maßnahmen identifizieren, die eure Entwicklungs- oder Content-Teams selbstständig übernehmen müssen.

1. Schritt: Aktualisiert euer System

Wird euer Frontend durch ein Commerce-System bereitgestellt und entspricht es weitestgehend dem Standard? Dann prüft zunächst, ob ein aktuelles Release vorliegt oder ansteht. Plant dieses unbedingt in eure zeitliche Roadmap mit ein, wenn es Updates hinsichtlich Barrierefreiheit enthält.

Habt ihr Frontend-Frameworks, Plug-ins oder Module anderer Hersteller im Einsatz, verhält es sich ähnlich. Findet heraus, ob Updates für die barrierefreie Webentwicklung vorliegen. Sollte für das Plugin kein Update existieren oder geplant sein, könnt ihr es durch eine andere Lösung ersetzen beziehungsweise das Framework anpassen.

Habt ihr euer System frontendseitig stark angepasst, ohne bisher auf Aspekte der Barrierefreiheit zu achten, ist der Aufwand etwas größer. Notwendige Anpassungen werden dann in der Regel nicht durch die Updates eures Systemherstellers korrigiert. In diesem Fall müsst ihr alle Anpassungen selbst übernehmen. Fehlte es bei euch im Unternehmen diesbezüglich an Know-how, könnt ihr euch im Zuge eines UX Consulting & Training Unterstützung von Accessibility-Expertinnen und -Experten holen.

2. Schritt: Prüft euer Frontend

Sobald ihr die anstehenden Releases eingespielt oder alle notwendigen Anpassungen vorgenommen habt, solltet ihr euer Frontend in Bezug auf die Barrierefreiheit testen.

Bei der Planung neuer Features gilt für euch aber ab sofort: Digitale Barrierefreiheit ist gesetz(t). Realisiert ihr neue Services direkt barrierefrei, braucht es später keine Anpassungen und ihr sorgt sofort uneingeschränkt für positive Nutzererlebnisse.

3. Schritt: Sensibilisiert euer Content-Team

Ob eure Inhalte barrierefrei sind, lässt sich nicht in allen Teilen entwicklungsseitig beeinflussen. Auch euer Content-Team muss sich den Anforderungen digitaler Barrierefreiheit bewusst sein. Unter anderem müssen sie auf folgende Aspekte achten:

• Alternative Texte (Alt-Texte) für Bilder pflegen: Diese Beschreibungen ermöglichen auch Usern mit Sehbeeinträchtigungen, den Inhalt von euren Bildern zu verstehen.
• Überschriften (Headings) richtig verwenden: Überschriften sollten absteigend entsprechend mit h1, h2, h3, usw. gekennzeichnet sein. So sind diese besser lesbar und für die Navigation mittels Screenreader strukturiert.
• Textkontrast und Farbwahl bewusst wählen: Texte sollten stets ausreichend vom Hintergrund abheben, damit alle sie lesen können.
• Reine Textgrafiken vermeiden: Platziert wichtige Informationen nie ausschließlich in reinen Textgrafiken (z. B. PNGs). Platziert stattdessen den Text direkt im HTML.
• Formulare und interaktive Elemente zugänglich machen: Labels, ARIA-Attributen und Tastaturzugänglichkeit sorgen dafür, dass Formulare und interaktive Elemente wie z.B. Schaltflächen von allen genutzt werden können.
• Aussagekräftige Linktexte verwenden: Als Content-Team solltet ihr stets aussagekräftige Linktexte verwenden, anstatt generische wie »Hier klicken«. Das macht es all euren Nutzern leichter sich zu orientieren.
• Barrierefreiheit überprüfen: Testet z. B. mithilfe von Online-Tools oder Screenreadern regelmäßig die Barrierefreiheit eurer Inhalte.

Warum diese Punkte so wichtig sind und welches die größten Hürden bei der Umsetzung sind, erfahrt ihr im Beitrag »Accessibility: Die Checkliste für eure barrierefreie Website«.

Barrierefreie Website mit Adobe Commerce

Adobe Commerce stellt euch online einen Conformance Report zur Verfügung. Dort seht ihr zu den jeweiligen WCAG-Kriterien den entsprechenden Support-Status in den Bereichen Admin Backoffice, den Adobe Standard-Themes Luma und Venia. Die Web Content Accessibility Guidelines (WCAG) beinhalten konkrete Maßnahmen, die den Zugang von Webinhalten für alle Nutzende verbessern.

Ausschnitt aus dem Conformance Report von Adobe 

Die verschiedenen Statusdefinitionen Supports, Partially Supports, Does Not Support, Not Applicable und Not Evaluated zeigen euch an, inwieweit eure jeweiligen Shop-Bereiche die einzelnen Kriterien erfüllen.

Für euch ist in diesem Bericht Folgendes wichtig:

• Status und Anmerkungen für Luma (Standard-Shop)
• die Statusdefinitionen Supports und Partially Supports 

Die Statusdefinitionen Does Not Support, Not Applicable und Not Evaluated werden nicht betrachtet, da sie entweder im Shop (Luma) oder in der gesamten Software nicht zum Tragen kommen. Ebenso werden Admin Backoffice und Venia aus Gründen der geringen Relevanz ausgeklammert.

In Bezug auf Luma wird ein sehr großer Teil der WCAG-Kriterien in den Leveln A und AA erfüllt, fällt also unter die Statusdefinition Supports. (Das Level AAA wird in der Auflistung nicht berücksichtigt.) 16 Kriterien werden als Partially Supports eingeordnet. Davon sind zwölf vom Level A und nur 4 vom Level AA.

Das ist insgesamt schon mal ein sehr guter Stand. Wenn man dann noch berücksichtigt, dass die Liste von 2021 ist und seitdem in so gut wie jedem Release Updates bezüglich Barrierefreiheit enthalten ist, ist die aktuelle Ausgangslage sogar noch besser.

Auch wenn Adobe Commerce keinen fixen Zeitpunkt definiert hat, zu dem alle noch offenen Punkte angepasst sein sollen: Es gibt das Bekenntnis zur kontinuierlichen Verbesserung, das sich in den regelmäßigen Aktualisierungen bestätigt.

Was ihr trotz dieser regelmäßigen Verbesserungen auf dem Weg zu einem barrierefreien Webshop sonst noch tun müsst, erfahrt ihr im nächsten Abschnitt.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Trotz kontinuierlicher Aktualisierungen seitens Adobe Commerce, sind weiterhin auch durchaus wichtige Shop-Features nicht barrierefrei. So ist zum Beispiel die Hauptnavigation nicht per Keyboard nutzbar.

Aufgabe eures Frontend-Teams ist es, die noch bestehenden Partially Supports-Elemente konform zu machen, insofern dies von Adobe Commerce nicht bis zum Stichtag erfüllt wird. Den größten Aufwandstreiber stellt hier die Aufbereitung der Hauptnavigation dar.

Darüber hinaus müssen selbstprogrammierte bestehende Shop-Features oder Module von Drittanbietern angepasst werden, insofern diese noch nicht barrierefrei sind. Gemeint sind hier vor allem reaktive Elemente wie Pop-ups oder Akkordeons. Stellt sicher, dass diese über die Tastatur bedienbar sind, beispielsweise durch Feature-spezifische Tastenkombinationen, die sonst nicht verwendet werden. Weitere wichtige Aspekte sind, dass eure Elemente von Screenreader lesbar sind und es Alternativen für beispielsweise Drag-and-Drops gibt.

Auch gestalterische Anpassungen des Shop-Themes sind Aufgabe eurer Frontend-Entwicklerinnen und -Entwickler. Darunter fallen zum Beispiel stärkere Farbkontraste und besser lesbare Schriften.

Sind Module und Themes die Lösung für die barrierefreie Webentwicklung bei Adobe?

Accessibility-Module

Im Adobe Commerce Marketplace bieten Hersteller Module an, die versprechen, euren bestehenden Shop gesetzeskonform barrierefrei zu gestalten. Und das Ganze ohne viel Aufwand und zu vergleichsweise geringen Kosten. Darüber hinaus gibt es Anbieter, die Plattform-unabhängige Lösungen für barrierefreie Webentwicklung anbieten.

Hierbei handelt es sich um sogenannte Overlay-Lösungen, die allerdings nicht dafür sorgen, dass eure Webseite beziehungsweise euer Onlineshop die gesetzlichen Anforderungen erfüllt. Im Gegenteil. Sie erzeugen nicht selten neue Probleme für eure Nutzenden. Zum Beispiel greifen sie in das Standardverhalten der Client-Anwendung ein und verhindern somit, dass Anwendungen beispielsweise beim Einsatz eines Screenreaders nicht mehr wie gewohnt funktionieren.

Solche Overlay-Lösungen schützen euch also nicht vor eventuellen rechtlichen Konsequenzen. In den USA werden Unternehmen bereits seit längerem verklagt, die auf Overlay-Lösungen setzen.

Themes

Der Anbieter Hyvä wirbt damit, sein Theme, das technisch und optisch komplett vom Luma-Standard abweicht, bereits barrierefrei umgesetzt zu haben. Ein Test mit NVDA-Screenreader zeigt, dass tatsächlich schon einiges besser ist als im Luma-Standard. Allerdings finden sich auch hier noch offene Punkte, die angepasst werden müssten. Dazu gehört unter anderem die Tab-Reihenfolge, die nicht immer stimmt, wenn man mit der Tastatur navigiert oder die fehlende Ansage im Check-out-Prozess, wenn man in den nächsten Schritt wechselt.

Bevor ihr allerdings von diesem Theme profitieren könntet, muss euer Entwicklungsteam, das auf Hyvä aufgesetzte Design eigenständig umsetzen.

Im Adobe Commerce Marketplace sind darüber hinaus keine weiteren Themes gelistet, die ausdrücklich Barrierefreiheit unterstützen.

Themes von Drittanbietern liefern somit ebenfalls keine simpel zu integrierende Sofortlösung.

Barrierefreie Website mit Salesforce Commerce Cloud

Barrierefreie Website mit Salesforce B2C Commerce Cloud

Salesforce B2C Commerce versucht bei der Storefront-Referenzarchitektur SFRA das Level AA einzuhalten. Es wird aber auch explizit kommuniziert, dass ihr als Händler alleinig für die Einhaltung der Barrierefreiheitskriterien verantwortlich seid.

Auf der Lernplattform Trailhead bietet Salesforce allerdings hilfreiche Informationen, mit denen ihre eure digitalen Angebote für alle zugänglich macht.

Barrierefreie Website mit Salesforce B2B Commerce Cloud

Das Barrierefreiheitsstärkungsgesetz zielt explizit auf die Rechte von Endkunden ab und schließt somit die digitalen Angebote von B2B-Unternehmen aus. Seid ihr im B2B tätig und ist eure Website noch nicht barrierefrei, hat das also keine rechtlichen Konsequenzen. Potenzial verschenkt ihr trotzdem.

Schließlich sind auch eure Geschäftskunden Menschen, die sowohl körperlich als auch situativ beeinträchtigt sein können. Bemüht ihr euch also rechtzeitig um digitale Barrierefreiheit im B2B, könnt ihr nicht nur eure Kundenbindung stärken, sondern eure Zielgruppe erweitern.

Der Salesforce Accessibility Conformance Report gibt einen Überblick über die jeweiligen WCAG-Kriterien und den entsprechenden Support-Status für die Salesforce Commerce B2B-Produkte. Die Standardkomponenten, -templates und Möglichkeiten zur Anpassung lassen aber oft noch etwas zu wünschen übrig. Beispielsweise sind die meisten interaktiven Inhalte nicht über die Tastatur bedienbar.

Das CSS-Framework: Lightning Design System bietet ein zugängliches Markup, das euch als Grundlage für die Anwendungsentwicklung dient. Um sicherzustellen, dass barrierefreie Komponenten erstellen werden, müsst ihr jedoch die Barrierefreiheitsrichtlinien für die interaktiven Komponenten befolgen. Dazu gehört beispielsweise das Tastaturverhalten.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Die von Salesforce bereitgestellten Features sind nicht alle und auch nicht in allen Bereichen barrierefrei. Deswegen ist es die Aufgabe eures Frontend-Teams, Komponenten zu erstellen, die mindestens den gleichen Funktionsumfang wie die von Salesforce besitzen, aber zusätzlich den Bereich der Accessibility abdecken.

Auch optische Anpassungen an Komponenten und dem Layout, die ihr nicht über die Standard-Salesforce-Konfiguration editieren könnt, müssen eure Entwicklerinnen und Entwickler vornehmen. Dazu gehören beispielsweise Schatten, Icons, Positionierungen, Schriftarten und Farben.

Auch wenn ihr Module von Drittanbietern nutzt, die noch nicht barrierefrei sind, müsst ihr diese anpassen. Insbesondere betrifft dies reaktive Elemente wie Modallayer, Akkordeons, Slider, Datepicker und ähnliche Komponenten.

Barrierefreie Website mit SAP Commerce Cloud

Die Composable Storefront von SAP Commerce gewährleistet ab Version 5.0 die Umsetzung zahlreicher WCAG-Kriterien. Darunter beispielsweise Aspekte zu der Keyboardsteuerung, der Anwendung von Screenreadern oder der Möglichkeit, flackernde und blinkende Inhalte auszuschließen.

Unter Accessibility Compliance ist eine Übersicht zu den erfüllten Kriterien zu finden.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Wollt ihr Komponenten weiterentwickeln, liegt es in eurer Verantwortung, diese barrierefrei zu gestalten. Folgende Aspekte solltet ihr dabei ganz besonders berücksichtigen:

• Semantisches HTML verwenden: So kennzeichnet ihr klar die Struktur und Bedeutung von Inhalten und erleichtert damit die Navigation für Screenreader und andere assistive Technologien.
• Tastaturzugänglichkeit sicherstellen: Alle interaktiven Elemente (z. B. Formulare, Schaltflächen) müssen per Tastatur bedienbar sein. Das ist entscheidend für Menschen mit motorischen Beeinträchtigungen.
• Textalternativen bereitstellen: Stellt sicher, dass alle Bilder, Videos und andere nicht-textbasierte Inhalte alternative Texte haben. Diese Beschreibungen ermöglichen es auch Menschen mit Sehbeeinträchtigungen, euren Inhalt zu verstehen.
• Aria-Attribute verwenden: So könnt ihr zusätzliche Informationen beispielsweise für dynamische Inhalte oder komplexe Widgets bereitstellen. Die dann wiederrum von assistiven Technologien leichter zu verstehen sind.
• Barrierefreiheit testen: Auch bei der Entwicklung, ebenso wie bei der Contentpflege gilt es eure Websites regelmäßig auf Barrierefreiheit zu testen. Zum Beispiel mit automatischen Tools oder manuellen Überprüfungen.

Barrierefreie Website mit commercetools

Da commercetools darauf ausgerichtet ist, Unternehmen eine flexible E-Commerce-Plattform zu bieten, stellt die Plattform selbst keine spezifischen Barrierefreiheitsstandards bereit. Aber sie bietet euren Entwicklungsteams die Flexibilität, diese Standards umzusetzen. Bei ihnen liegt auch die Verantwortung für die Implementierung barrierefreier Funktionen.

Dazu bietet die Plattform APIs und Entwicklerwerkzeuge, die es ermöglichen, barrierefreie Anwendungen zu erstellen. Das Framework für die Entwicklung, das Deployment und die Wartung von Commerce-Websites, unterstützt wiederverwendbare UI-Komponenten für die Erstellung barrierefreier Anwendungen.

Barrierefreie Website mit Intershop

Derzeit wird digitale Barrierefreiheit im Basis-Template von Intershop nicht berücksichtigt. Das liegt vor allem daran, dass das Template ohnehin selten im Ursprungszustand genutzt wird. Verfügt ihr also über eine solche Individualentwicklung, müssen eure Entwicklungsteams auch die Kriterien zur Barrierefreiheit selbstständig anpassen.

Die Intershop Support-Seite stellt dazu konkrete Maßnahmen mit Beispielen und Codesequenzen bereit, die euch dabei helfen, eure digitalen Angebote barrierefrei zu machen.

Bei der Progressive Web App (PWA) von Intershop verhält es sich etwas anders. Diese wird unter Berücksichtigung der Barrierefreiheit stetig weiterentwickelt.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Handelt es sich um eine Individualentwicklung, müssen bei Template-Überladungen Anpassungen händisch vorgenommen werden. Verbreitet ist dazu die freie, individuelle Modularisierung.

Dazu solltet ihr bei der Aufgabenstellung konkrete Kriterien für die Accessibility definieren. Das kann zum Beispiel der Ansagetext für den Screenreader sein. So sollte auch beispielsweise im Design-Prozess klar sein, welche TAB-Reihenfolge für die Keyboardsteuerung hinterlegt sein soll. Der Einbau von sogenannten Bypass Elementen ermöglicht zusätzlich schnell in den Inhalts- oder Footerbereich zu springen.

Barrierefreie Website mit Shopify

Shopify bekennt sich in einem »Accessibility Statement« zur Barrierefreiheit seiner Software. Als Grundlage wird WCAG 2.1 verwendet. Ziel ist es, Inhalte und Features auf Level AA zu bekommen. Um das zu erreichen, testet und entwickelt Shopify sein Produkt kontinuierlich weiter. Ein fixer Zeitpunkt, an dem alles umgesetzt sein soll, wird allerdings nicht genannt.

Das aktuelle Standard Theme »Dawn« bietet bereits einen sehr guten Support für die barrierefreie Webentwicklung. Aktuell gibt es im Check-out noch einige Punkte, die sich noch im Status: Partially Supports befinden. Beispielsweise wird der Inhalt der Seitenleiste nach dem Inhalt der Fußzeile ausgespielt.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Insbesondere beim Check-out gibt es beispielsweise mit den Formularen noch einige Hürden in der Bedienung. Die Aufgabe eurer Frontend-Entwicklerinnen und -Entwickler ist es also, für Konformität bei den noch bestehenden Partially Supports-Elementen zu sorgen.

Auch bei Shopify gilt es darüber hinaus, selbstprogrammierte Shop-Features wie Pop-ups und Akkordeons oder Module von Drittanbietern anzupassen, falls diese noch nicht barrierefrei sind.

Sind Module und Themes die Lösung für die barrierefreie Webentwicklung bei Shopify

Accessibility-Module

Auch im Shopify App Store bieten Hersteller Module an, die versprechen, euren bestehenden Shop gesetzeskonform barrierefrei zu gestalten.

Diese Overlay-Lösungen sorgen aber meist für neue Probleme. Daher solltet ihr euch ausschließlich auf die Updates von Shopify und die Fähigkeiten eures Entwicklungsteams verlassen.

Themes

Shopify nimmt in seinem Theme-Store nur Themes auf, die einen Lighthouse Accessibility Score von mindestens 90 haben. Das Lighthouse-Tool analysiert dazu den Quelltext, simuliert die Ausführung unter verschiedenen Ausgangbedingungen und prüft somit die Barrierefreiheit.

Diese Anforderung des Theme-Stores bildet also bereits eine solide Basis, so dass ihr im Idealfall nicht mehr viel anpassen müsst. Wollt ihr jedoch ein eigenes Design verwenden, seid ihr selbstständig dafür verantwortlich, dieses barrierefrei zu gestalten und zu implementieren.

Barrierefreie Website mit Shopware 6

Auf der Shopware Informationsseite zu Barrierefreiheit steht zwar, dass noch nicht alle WCAG 2.1, Level AA Kriterien erfüllt sind; welche das konkret betrifft, wird allerdings nicht deutlich.

Bewegt man sich mit dem Screenreader ein wenig durch den Shop, finden sich schon einige offensichtliche Stellen, wo Nacharbeiten notwendig sind.

Diese möchte Shopware bis Ende 2024 beheben und vollständige Konformität in Sachen Barrierefreiheit erlangen.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Die Aufgabe eures Frontend-Teams ist es also, die Elemente konform zu machen, die noch nicht bis zum Stichtag erfüllt werden. Den größten Aufwandstreiber stellt hier, ebenso wie bei Adobe, die Aufbereitung der Hauptnavigation dar. Diese ist aktuell standardmäßig noch nicht per Keyboard nutzbar.

Fehlt es bei euch im Unternehmen an Know-how bei der Anpassung noch nicht barrierefreier Features, könnt ihr auch hier externe Unterstützung von Expertinnen und Experten im Bereich Shopware holen.

Barrierefreie Webentwicklung für positive User Experience: Success Story

Barrierefreie Frontend-Entwicklung ist Pflicht. Gleichzeitig ist die Anpassung eures Onlineshops eine Chance, die User Experience für all eure Nutzenden zu verbessern. Diesen Vorteil hat der europäische Marktführer im Direktvertrieb von Eis- und Tiefkühlspezialitäten bofrost* bereits früh erkannt. Im Zuge des Onlineshop Relaunch hat das Unternehmen die Zugänglichkeit der Angebote verbessert und den Traffic auf der Seite weiter gesteigert.

Füllt jetzt das Formular aus und erhaltet kostenfrei tiefere Einblicke in diese Success Story.