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. 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.

Grundlegende Fragen und hilfreiche Tipps zu digitaler Barrierefreiheit findet 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 zwar insgesamt ein sehr guter Stand, allerdings scheint Adobe aktuell keine Weiterentwicklung für das Luma-Theme zu planen. Daher ist es durchaus sinnvoll, über die Verwendung des Drittanbieter-Themes Hyvä  nachzudenken, das weitgehend barrierefrei ist. Auch die Entwicklung eines eigenen Themes ist eine gute Allernative für die uneingeschränkte Gestaltung des eigenen Adobe-Webshops.

Ob Luma, Hyvä oder Eigenentwicklung, welche Maßnahmen ihr für die Realisierung der jeweiligen Lösung vornehmen müsst, erfahrt ihr im nächsten Absatz.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Habt ihr euch für eine der drei Optionen entschieden, müsst ihr diese in eure bestehende Shopumgebung integrieren und individuelle Anpassungen vornehmen.

Standard Luma-Theme:

In 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. 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.

Hyvä-Theme:

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.
Bevor ihr allerdings von diesem Theme profitieren könntet, muss euer Entwicklungsteam das auf Hyvä aufgesetzte Design eigenständig umsetzen und an die Corporate Identity (CI) eures Unternehmens anpassen. Je nachdem, welche weiteren Anforderungen ihr an euren Shop oder eure Website habt, kann es sein, dass ihr weitere Features integrieren oder bestehende anpassen müsst.
Das Theme bietet also schon eine gute Grundlage für euren barrierefreien Webauftritt, dennoch muss euch bewusst sein, dass es keine simpel zu integrierende Sofortlösung ist. Verfügt ihr selbst nicht über die notwendige Expertise im Unternehmen, könnt ihr euch von Digitalexpertinnen und -experten beraten und unterstützen lassen.

Zur Leistungsseite Adobe Commerce

Eigenentwickeltes Theme:

Für ein eigenes, barrierefreies Theme müsst ihr zunächst die Grundarchitektur definieren. Eine klare, semantische HTML-Struktur sorgt dafür, dass Screenreader und andere assistive Technologien die Inhalte später korrekt interpretieren können. Aber nicht nur aussagekräftige HTML-Tags verbessern die Barrierefreiheit, sondern auch gezielt gesetzte ARIA-Attribute. Sie stellen sicher, dass auch interaktive Elemente zugänglich sind und sich beispielsweise mittels Tastatur bedienen lassen. Dabei spielen auch client-seitige Funktionalitäten, welche mit JavaScript umgesetzt werden, eine wichtige Rolle
Im Anschluss gilt es natürlich auch, euer individuelles Design so zu gestalten, dass die Inhalte für alle Nutzenden konsumierbar sind. Dazu gehören ausreichende Farbkontraste, flexible Schriftgrößen und skalierbare Elemente.

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

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.

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

Bei Shopware gab es im Laufe des Jahres 2024 zahlreiche Updates, um die Storefront barrierefreier zu gestalten. Schließlich hat sich der Shopsystem-Anbieter zum Ziel gesetzt, die WCAG 2.1 Norm vollständig zu erfüllen.

Insbesondere die Navigation über die Seite mittels Tastatur ist jetzt reibungslos möglich. So geht beispielsweise der Fokus auf ein Element auch nach einer Aktion wie bspw. dem Neuladen der Seite nicht verloren.

Aber auch die Sprach- und Währungsauswahl für Nutzende mit Bildschirmlesegeräten wurde verbessert. Sie werden umfassend über die aktuell ausgewählte Sprache oder Währung informiert und können somit die Auswahl entsprechend ihren Bedürfnissen anpassen. Weitere wichtige Updates findet ihr bei Shopware.

In der aktuellen Version 6.6 (Stand Februar 2025) sind die bisher vorgenommenen Anpassungen bereit verfügbar und müssen lediglich über ein Feature-Flag aktiviert werde. Das soll für eine gute Abwärtskompatibilität sorgen und euch Zeit geben, notwendige Anpassungen vorzunehmen.

Da im Shopware-Umfeld viele Plug-ins im Einsatz sind, werden außerdem sämtliche Plug-in-Hersteller aufgefordert, ihre Produkte mit Lighthouse zu testen. So sollen Verschlechterungen gegenüber dem Standard-Shop vermieden werden.

Welche Aufgaben fallen in den Bereich der Frontend-Entwicklung?

Sollte es Shopware nicht gelingen, bis zum 26. Juni alle Elemente barrierefrei zu gestalten, ist es Aufgabe der Frontend-Entwicklung diese entsprechend anzupassen.  Die betroffenen Elemente könnt ihr durch einen Audit identifizieren.

Darüber hinaus müsst ihr natürlich auch individuell bestehende Shop-Features anpassen, falls diese noch nicht barrierefrei sind. Gemeint sind hier vor allem reaktive Elemente wie Pop-ups und Akkordeons. Diese müssen unter anderem per Tastatur bedienbar sein, ohne dass es einer Bedienungsanleitung bedarf (zum Beispiel durch Feature-spezifische Tastenkombinationen, die es sonst nirgendwo gibt), Screenreader müssen die Elemente sinnvoll benennen können und ihr solltet Alternativen für zum Beispiel Drag & Drop anbieten.

Dabei dürft ihr auch bestehende Plug-ins von Drittanbietern nicht vergessen, insofern diese nicht wie von Shopware gewünscht rechtzeitig aktualisiert wurden.

Falls außerdem optische Anpassungen des Shop-Themes notwendig sind (Farben, Schriften, Fokusstyles usw.), sollten ihr diese rechtzeitig umsetzen.

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

Da Shopware inzwischen zum größten Teil barrierefrei ist, braucht es eigentlich keine zusätzlichen Fertiglösungen.

Dennoch bieten im Shopware Store Hersteller Plug-ins an, die versprechen, einen bestehenden Shop gesetzeskonform barrierefrei zu gestalten – ohne viel Aufwand und mit vergleichsweise geringen Kosten. Zusätzlich gibt es Anbieter, die plattformunabhängige Lösungen anbieten und ebenfalls mit großen Versprechungen locken.

Auch hierbei handelt es sich allerdings um Overlay-Lösungen, die nicht sicherstellen, dass eure Webseite oder euer Webshop die gesetzlichen Anforderungen des BFSG wirklich erfüllt. Meistens sorgen solche Lösungen sogar für neue Probleme bei den Endanwenderinnen und -anwendern. Verlasst euch also lieber auf die Updates von Shopware und die Fähigkeit eurer oder extern erfahrener Entwicklungsteams.

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.