Barrierefreiheit im JTL-Shop: Anforderungen, typische Probleme und praktische Umsetzung

Was Barrierefreiheit in einem Onlineshop praktisch bedeutet

Digitale Barrierefreiheit soll ermöglichen, dass Menschen einen Onlineshop auch mit unterschiedlichen körperlichen, sensorischen oder kognitiven Voraussetzungen nutzen können. Dazu gehören beispielsweise Menschen, die ausschließlich mit der Tastatur arbeiten, Bildschirminhalte vergrößern, einen Screenreader verwenden oder Schwierigkeiten mit komplexen Bedienabläufen haben.

Barrieren können an sehr unterschiedlichen Stellen entstehen. Ein Menü lässt sich möglicherweise mit der Maus öffnen, aber nicht mit der Tastatur. Eine Fehlermeldung wird farbig markiert, erklärt jedoch nicht, welches Feld korrigiert werden muss. Produktvarianten unterscheiden sich nur durch Farbfelder. Ein Dialog öffnet sich, der Tastaturfokus verbleibt aber unsichtbar im Hintergrund. Solche Probleme betreffen nicht nur einzelne Inhalte, sondern können den gesamten Bestellprozess unterbrechen.

Für einen JTL-Shop bedeutet Barrierefreiheit deshalb, dass mindestens folgende Stationen zusammenhängend betrachtet werden:

• Startseite und Hauptnavigation
• Kategorieseiten, Suche und Filter
• Produktseiten, Bilder und Varianten
• Warenkorb und Mengenänderungen
• Anmeldung, Kundenkonto und Gastbestellung
• Adress- und Kontaktformulare
• Versand- und Zahlungsarten
• Bestellübersicht und Bestellabschluss
• Bestellbestätigung und bereitgestellte Dokumente

Ein Shop kann auf den ersten Blick übersichtlich und modern wirken, während zentrale Funktionen für bestimmte Nutzer dennoch nicht erreichbar oder nicht verständlich sind. Deshalb muss die praktische Bedienung ebenso geprüft werden wie die optische Darstellung und die technische Struktur.

Für welche Onlineshops das BFSG relevant sein kann

Das Barrierefreiheitsstärkungsgesetz, kurz BFSG, ist seit dem 28. Juni 2025 vollständig anzuwenden. Es betrifft unter anderem bestimmte Dienstleistungen im elektronischen Geschäftsverkehr und kann damit auch für Onlineshops relevant sein, die sich an Verbraucher richten.

Ob ein konkreter JTL-Shop unter die gesetzlichen Anforderungen fällt, hängt von mehreren Faktoren ab. Dazu gehören insbesondere die angebotenen Leistungen, die Zielgruppe, das Geschäftsmodell und die Unternehmensgröße. Ein reiner B2B-Shop kann anders zu beurteilen sein als ein Shop, der Verträge mit Verbrauchern anbahnt oder abschließt.

Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, können nach dem BFSG von den entsprechenden Pflichten ausgenommen sein. Als Kleinstunternehmen gelten grundsätzlich Unternehmen mit weniger als zehn Beschäftigten und entweder einem Jahresumsatz von höchstens 2 Millionen Euro oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro.

Diese Ausnahme sollte nicht mit einer pauschalen Befreiung aller kleinen Händler verwechselt werden. Die konkrete rechtliche Einordnung hängt vom jeweiligen Angebot und Unternehmen ab. Außerdem kann eine bessere Zugänglichkeit auch unabhängig von einer gesetzlichen Verpflichtung sinnvoll sein. Sie erleichtert die Nutzung, reduziert Bedienprobleme und kann die allgemeine Qualität des Shops verbessern.

Wichtiger Hinweis: Dieser Beitrag erläutert technische und praktische Aspekte der Barrierefreiheit im JTL-Shop. Er ersetzt keine individuelle Rechtsberatung und keine rechtliche Prüfung des konkreten Geschäftsmodells.

Die vier Grundprinzipien barrierefreier Onlineshops

Die Web Content Accessibility Guidelines ordnen Anforderungen an barrierefreie Webangebote vier Grundprinzipien zu. Inhalte und Funktionen sollen wahrnehmbar, bedienbar, verständlich und robust sein. Diese Einteilung eignet sich auch für die systematische Prüfung eines JTL-Shops.

Tastaturbedienung und sichtbarer Fokus

Eine der wichtigsten manuellen Prüfungen besteht darin, den JTL-Shop ohne Maus zu bedienen. Alle wesentlichen Funktionen sollten mit der Tastatur erreichbar und nutzbar sein.

Mit der Tabulatortaste wird üblicherweise zwischen interaktiven Elementen gewechselt. Dabei muss jederzeit erkennbar sein, welches Element den aktuellen Fokus besitzt. Wird die Fokusmarkierung im Template entfernt oder durch ein sehr unauffälliges Design ersetzt, können Nutzer nicht mehr nachvollziehen, wo sie sich innerhalb der Seite befinden.

Im JTL-Shop betrifft die Tastaturbedienung insbesondere:

• Hauptnavigation und Untermenüs
• Suchfeld und Suchvorschläge
• Kategoriefilter und Sortierung
• Varianten und Konfigurationsoptionen
• Bildergalerien und Produktslider
• Mengenfelder und Warenkorbfunktionen
• Formulare und Auswahlfelder
• Cookie-Dialoge, Pop-ups und Modals
• Versand- und Zahlungsarten
• Bestellbutton und Bestellabschluss

Die Reihenfolge des Fokus sollte dem sichtbaren und logischen Aufbau der Seite folgen. Springt der Fokus unvorhersehbar zwischen Kopfbereich, Seiteninhalt und ausgeblendeten Komponenten, erschwert dies die Nutzung erheblich.

Kontraste, Schriftgrößen und vergrößerte Darstellung

Texte, Schaltflächen, Eingabefelder und Statusinformationen müssen sich ausreichend vom Hintergrund unterscheiden. Dabei sollte nicht nur der normale Fließtext betrachtet werden.

In Onlineshops entstehen Kontrastprobleme häufig bei hellgrauen Hinweisen, deaktivierten Varianten, Platzhaltertexten, Preiszusätzen, Breadcrumbs oder sekundären Schaltflächen. Auch die sichtbare Fokusmarkierung und Fehlermeldungen müssen deutlich erkennbar sein.

Schriftgrößen sollten nicht starr so festgelegt werden, dass Nutzer Inhalte nicht sinnvoll vergrößern können. Bei einer vergrößerten Darstellung dürfen Texte nicht abgeschnitten werden, Schaltflächen nicht übereinanderliegen und wichtige Funktionen nicht aus dem sichtbaren Bereich verschwinden.

Eine responsive Darstellung allein garantiert noch keine Barrierefreiheit. Auch auf dem Smartphone können zu kleine Bedienelemente, eng platzierte Links oder verdeckte Inhalte die Nutzung erschweren.

Alternativtexte für Produktbilder und grafische Inhalte

Alternativtexte helfen dabei, den wesentlichen Inhalt eines Bildes zu vermitteln, wenn dieses nicht gesehen oder nicht geladen werden kann. Im JTL-Shop beginnt diese Aufgabe häufig bereits bei der Pflege der Produktdaten.

Ein sinnvoller Alternativtext beschreibt die Information, die das Bild im jeweiligen Zusammenhang vermittelt. Bei einem Produktbild können beispielsweise Produkttyp, Modell, Farbe oder dargestellte Perspektive relevant sein. Eine bloße Wiederholung langer Keywordlisten ist dagegen weder für Nutzer noch für Suchmaschinen sinnvoll.

Es sollte unterschieden werden zwischen:

• informativen Bildern, die einen beschreibenden Alternativtext benötigen
• funktionalen Grafiken, deren Funktion verständlich benannt werden muss
• rein dekorativen Elementen, die assistive Technologien nicht unnötig ausgeben sollten
• komplexen Grafiken, für die gegebenenfalls eine zusätzliche Erklärung erforderlich ist

Da Produktbilder und Bildinformationen häufig aus der JTL-Wawi an den Shop übertragen werden, sollte die Datenpflege von Anfang an berücksichtigt werden. Weitere Zusammenhänge zwischen Warenwirtschaft und Shopinhalten erläutert unser Beitrag über JTL-Wawi-Produktdaten und ihre Wirkung im Onlineshop.

Formulare, Feldbeschriftungen und Fehlermeldungen

Formulare gehören zu den häufigsten Stellen, an denen Nutzer einen Bestellprozess abbrechen. Barrierefreiheit und allgemeine Benutzerfreundlichkeit überschneiden sich hier besonders deutlich.

Ein Platzhalter innerhalb eines Feldes ersetzt keine eindeutige Beschriftung. Sobald der Nutzer mit der Eingabe beginnt, verschwindet der Platzhalter häufig. Dadurch ist später nicht mehr sicher erkennbar, welche Information erwartet wurde. Eingabefelder sollten deshalb sichtbar und technisch korrekt beschriftet sein.

Bei einer fehlerhaften Eingabe reicht es nicht aus, das betroffene Feld nur rot zu umranden. Die Meldung sollte konkret erklären:

• welches Feld betroffen ist
• warum die Eingabe nicht akzeptiert wurde
• welches Format oder welche Angabe benötigt wird
• wie der Fehler korrigiert werden kann

Nach dem Absenden eines fehlerhaften Formulars sollte der Nutzer direkt zur Fehlermeldung oder zum ersten betroffenen Feld geführt werden können. Bereits korrekt eingetragene Daten sollten möglichst erhalten bleiben.

Navigation, Menüs, Modals und Akkordeons

Moderne JTL-Shops nutzen häufig Megamenüs, mobile Offcanvas-Navigationen, Akkordeons, Pop-ups und dynamisch eingeblendete Dialoge. Diese Komponenten müssen nicht nur optisch funktionieren, sondern ihren Zustand und ihre Bedienung technisch verständlich vermitteln.

Besondere Aufmerksamkeit benötigen Cookie-Dialoge und Marketing-Pop-ups. Sie dürfen keine wichtigen Funktionen verdecken und müssen selbst vollständig bedienbar sein. Auch ein individuell eingebundener Consent- oder Trackingprozess ist Teil der tatsächlichen Shopnutzung. Weitere technische Zusammenhänge finden Sie in unserem Beitrag zum Consent-gesteuerten Tracking im JTL-Shop.

Kategorien, Filter und Produktvarianten

Kategorieseiten und Produktkonfigurationen enthalten häufig dynamische Funktionen, die bei einer automatischen Prüfung nur unvollständig erfasst werden.

Filter müssen eindeutig beschriftet und mit der Tastatur bedienbar sein. Ausgewählte Filter und die daraus resultierenden Änderungen sollten erkennbar bleiben. Wird eine Trefferliste nach einer Auswahl dynamisch aktualisiert, darf der Nutzer nicht die Orientierung verlieren.

Bei Varianten ist besonders darauf zu achten, dass Informationen nicht ausschließlich über Farben vermittelt werden. Eine Auswahl aus roten, blauen und schwarzen Farbfeldern benötigt zusätzliche verständliche Bezeichnungen. Nicht verfügbare Varianten sollten klar gekennzeichnet sein, ohne dass die Information nur durch eine blassere Darstellung vermittelt wird.

Auch Größen, Materialausführungen, Konfigurationen und Kombinationen müssen logisch auswählbar sein. Dies gilt besonders bei Produkten mit vielen Varianten oder abhängigen Auswahlmöglichkeiten.

Eine saubere technische und inhaltliche Umsetzung unterstützt nicht nur die Zugänglichkeit, sondern auch die Orientierung und Conversion. Weitere Hinweise finden Sie im Beitrag über Varianten, Filter und Merkmale im JTL-Shop.

Barrierefreiheit in Warenkorb und Checkout

Der Checkout verbindet zahlreiche Formulare, dynamische Aktualisierungen und externe Dienste. Bereits eine einzelne nicht bedienbare Komponente kann verhindern, dass eine Bestellung abgeschlossen wird.

Im Warenkorb sollte geprüft werden, ob Nutzer:

• Artikelmengen verändern können
• Artikel eindeutig entfernen können
• Preisänderungen und Summen nachvollziehen können
• Gutscheincodes eingeben und Rückmeldungen verstehen können
• zum Einkauf oder zur Kasse weitergehen können

Im eigentlichen Checkout gehören unter anderem Adressfelder, abweichende Lieferadressen, Versandarten, Zahlungsarten, Checkboxen, Pflichtinformationen und der Bestellbutton zur Prüfung. Fehlermeldungen müssen verständlich und den jeweiligen Eingaben zugeordnet sein.

Externe Zahlungsdienste oder eingebettete Authentifizierungsverfahren können zusätzliche Barrieren verursachen. Auch wenn diese Komponenten nicht vollständig vom Shopbetreiber entwickelt werden, sind sie Teil des tatsächlichen Bestellwegs und sollten bei der Auswahl und Prüfung berücksichtigt werden.

Optimierungen im Checkout wirken sich häufig zugleich auf die allgemeine Benutzerfreundlichkeit aus. Weitere Ansatzpunkte behandelt unser Beitrag zur Conversion-Optimierung im JTL-Shop.

Kundenkonto, Anmeldung und Passwortfunktionen

Auch Funktionen außerhalb einer einzelnen Bestellung gehören zur Nutzung des Shops. Dazu zählen Registrierung, Anmeldung, Passwortwiederherstellung, Adressverwaltung und Bestellübersicht.

Felder und Schaltflächen müssen eindeutig benannt sein. Anforderungen an Passwörter sollten vor der Eingabe verständlich erklärt werden. Fehlermeldungen dürfen nicht nur allgemein mitteilen, dass etwas nicht funktioniert hat, sondern sollten eine sinnvolle Korrektur ermöglichen, soweit dies mit den Sicherheitsanforderungen vereinbar ist.

Auch zeitlich begrenzte Hinweise, Bestätigungsdialoge oder Sicherheitsabfragen dürfen Nutzer nicht ohne ausreichende Orientierung aus dem Prozess werfen.

PDF-Dokumente und eingebundene Inhalte

Barrierefreiheit endet nicht an der eigentlichen Shopoberfläche. Bedienungsanleitungen, Produktdatenblätter, Formulare, Videos und andere eingebundene Inhalte können ebenfalls Teil des Angebots sein.

Ein optisch gut gestaltetes PDF ist nicht automatisch barrierefrei. Damit Inhalte strukturiert erfasst werden können, benötigen Dokumente unter anderem eine sinnvolle Lesereihenfolge, korrekt ausgezeichnete Überschriften, verständliche Linktexte, geeignete Alternativtexte und eine technisch erkennbare Dokumentstruktur.

Bei Videos können je nach Inhalt Untertitel, Transkripte oder zusätzliche Beschreibungen erforderlich sein. Eingebettete Karten, Produktkonfiguratoren und externe Widgets sollten ebenfalls auf Tastaturbedienung, Beschriftung und Fokusführung geprüft werden.

Ein Shop kann daher nicht allein anhand seines Templates abschließend bewertet werden. Alle Inhalte und Dienste, die Kunden während der Nutzung erreichen, müssen in die Betrachtung einbezogen werden.

Template, OPC-Inhalte und individuelle Anpassungen

Im JTL-Shop entsteht die sichtbare und bedienbare Oberfläche aus mehreren technischen und redaktionellen Ebenen. Jede dieser Ebenen kann Barrieren verhindern oder neu verursachen.

Ob eine Anforderung besser durch das Template oder durch ein Plugin umgesetzt wird, hängt von Funktion, Wartbarkeit und Updateverhalten ab. Unser Beitrag JTL-Shop-Plugin oder Templateanpassung erläutert die grundsätzliche Abgrenzung.

Bei neuen Shopprojekten sollte Barrierefreiheit nicht erst nach dem Go-live geprüft werden. Sie gehört bereits in Konzeption, Templateauswahl, Inhaltsplanung und Qualitätssicherung. Faymax Consulting unterstützt Unternehmen bei der Erstellung und technischen Umsetzung eines JTL-Shops.

Plugins können unterstützen, lösen aber nicht den gesamten Shop

Plugins können einzelne Funktionen verbessern oder zusätzliche Bedienhilfen bereitstellen. Daraus folgt jedoch nicht automatisch, dass der gesamte Shop barrierefrei oder rechtlich konform ist.

Ein Plugin kann beispielsweise Darstellungsoptionen ergänzen, einzelne Komponenten korrigieren oder Prüfhinweise bereitstellen. Es kann aber nicht pauschal alle Inhalte, individuellen Templateänderungen, externen Zahlungsprozesse, Produktdaten und redaktionellen Fehler erfassen.

Vor der Installation sollte daher geklärt werden:

• welches konkrete Problem das Plugin lösen soll
• ob es die zugrunde liegende Struktur tatsächlich verbessert
• ob es mit dem eingesetzten Template kompatibel ist
• ob es sich vollständig mit der Tastatur bedienen lässt
• wie es sich auf Performance und andere Erweiterungen auswirkt
• wie Updates und langfristige Wartung gewährleistet werden

Für spezielle Anforderungen kann eine gezielte individuelle JTL-Shop-Pluginentwicklung sinnvoll sein. Erweiterungen mit direktem Bezug zur JTL-Wawi, Datenbank oder internen Prozessen werden im Bereich JTL-Pluginentwicklung eingeordnet.

Warum Overlay- und Schnelllösungen nicht ausreichen

Sogenannte Accessibility-Overlays versprechen häufig eine schnelle Verbesserung durch ein zusätzlich eingebundenes Skript oder Bedienmenü. Solche Funktionen können einzelne Hilfen bereitstellen, ersetzen aber keine systematische Prüfung und Behebung der zugrunde liegenden Probleme.

Ein Overlay kann strukturelle Fehler häufig nicht zuverlässig lösen. Dazu gehören beispielsweise:

• fehlende oder falsch zugeordnete Formularbeschriftungen
• unlogische Fokusreihenfolgen
• nicht bedienbare Navigationen
• unverständliche Fehlermeldungen
• falsch aufgebaute Dialoge und Akkordeons
• Probleme in Varianten, Filtern oder Produktkonfiguratoren
• Barrieren innerhalb externer Zahlungsdienste
• unzugängliche PDFs und eingebundene Dokumente

Die sinnvolle Reihenfolge lautet daher: Probleme prüfen, Ursachen identifizieren, Komponenten gezielt korrigieren und anschließend erneut testen. Eine zusätzliche Bedienhilfe kann dieses Vorgehen ergänzen, aber nicht ersetzen.

Automatische Prüfungen und ihre Grenzen

Automatische Testwerkzeuge sind ein sinnvoller Bestandteil der Prüfung. Sie können bestimmte technische Auffälligkeiten schnell auf vielen Seiten erkennen. Eine vollständige Bewertung des Shops liefern sie jedoch nicht.

Automatische Prüfungen können unter anderem Hinweise liefern auf:

• fehlende Alternativtexte
• bestimmte Kontrastprobleme
• fehlende oder leere Beschriftungen
• doppelte oder fehlerhafte HTML-IDs
• bestimmte strukturelle HTML-Probleme
• einzelne fehlerhafte ARIA-Angaben

Sie können jedoch nicht zuverlässig beurteilen, ob ein Alternativtext den Bildinhalt sinnvoll beschreibt, eine Navigation verständlich aufgebaut ist oder eine Fehlermeldung einem Kunden tatsächlich weiterhilft. Auch die logische Fokusreihenfolge und der vollständige Bestellablauf müssen praktisch getestet werden.

Technische Prüfungen überschneiden sich teilweise mit Bereichen der technischen SEO. Saubere Strukturen, verständliche Inhalte und robuste Komponenten können sowohl die Verarbeitung durch Suchmaschinen als auch die Nutzung durch Menschen und assistive Technologien unterstützen. Barrierefreiheit und SEO sind dennoch eigenständige Prüfbereiche und dürfen nicht gleichgesetzt werden.

So sollte ein JTL-Shop geprüft werden

Eine belastbare Prüfung kombiniert automatisierte Analysen mit manuellen Tests. Dabei sollte nicht nur eine Auswahl einzelner Seiten betrachtet werden, sondern auch der vollständige Kaufprozess.

Zusätzlich sollten verschiedene Bildschirmgrößen, Vergrößerungsstufen und bei Bedarf assistive Technologien einbezogen werden. Ein Test mit nur einem Browser und einer einzigen Bildschirmauflösung bildet die tatsächliche Nutzung nicht ausreichend ab.

Welche Probleme zuerst behoben werden sollten

Nicht jede festgestellte Abweichung besitzt dieselbe praktische Auswirkung. Eine sinnvolle Priorisierung beginnt bei Problemen, die zentrale Funktionen blockieren.

Eine mögliche Reihenfolge ist:

1. Bestellabschluss und Zahlungsprozess
2. Formulare, Anmeldung und Adresspflege
3. Navigation, Suche und Produktzugang
4. Varianten, Filter und Warenkorbfunktionen
5. Fokusführung und Tastaturbedienung
6. Beschriftungen, Fehlermeldungen und Statusinformationen
7. Kontraste, Vergrößerung und responsive Darstellung
8. Bildinformationen, PDFs und redaktionelle Inhalte

Die genaue Priorisierung hängt vom jeweiligen Shop ab. Ein nicht bedienbares Zahlungsmodul ist dringlicher als ein weniger aussagekräftiger Alternativtext in einem untergeordneten Ratgeberbeitrag. Beide Themen sind relevant, ihre Auswirkungen auf die Nutzung unterscheiden sich jedoch deutlich.

Barrierefreiheit bei Updates und neuen Inhalten erhalten

JTL-Shop, Template und Plugins werden regelmäßig aktualisiert. Gleichzeitig entstehen neue Landingpages, Ratgeber, Kategorien und Produktdaten. Jede dieser Änderungen kann die Bedienbarkeit beeinflussen.

Für den laufenden Betrieb sind deshalb klare Prozesse sinnvoll:

• neue Komponenten vor der Veröffentlichung mit der Tastatur prüfen
• Formulare und Checkout nach technischen Änderungen testen
• Alternativtexte bereits bei der Bildpflege berücksichtigen
• Überschriften und Linktexte bei OPC-Inhalten sinnvoll strukturieren
• Plugins vor und nach Updates auf zentrale Funktionen kontrollieren
• externe Zahlungs- und Consent-Dienste regelmäßig überprüfen
• bekannte Probleme und umgesetzte Korrekturen dokumentieren

Auch umfangreiche Hilfsinhalte und Erklärungen können die Verständlichkeit eines Shops verbessern. Wie solche Inhalte zugleich Kunden, Suchmaschinen und KI-Systemen helfen, erläutert unser Beitrag über Hilfsinhalte in Onlineshops.

Bei regelmäßigen technischen Kontrollen kann eine laufende JTL-Support- und Shopbetreuung verhindern, dass Probleme erst nach Kundenbeschwerden oder abgebrochenen Bestellungen auffallen.

Wie Faymax Consulting bei der Barrierefreiheit unterstützt

Faymax Consulting betrachtet Barrierefreiheit im JTL-Shop nicht als einzelne Designkorrektur. Wir prüfen den vollständigen Nutzungspfad von Navigation, Suche und Produktauswahl über Warenkorb und Formulare bis zum Checkout.

Dabei können je nach Shop unter anderem folgende Bereiche berücksichtigt werden:

• Template und Child-Template
• Navigation und mobile Menüführung
• Kategorieseiten, Filter und Sortierung
• Produktseiten und Varianten
• Formulare und Fehlermeldungen
• Warenkorb und Checkout
• OPC-Inhalte und redaktionelle Strukturen
• Plugins und individuelle Funktionen
• externe Dienste und eingebundene Inhalte
• technische Priorisierung notwendiger Anpassungen

Je nach Ursache kann eine Anpassung im Template, eine Korrektur bestehender Inhalte, die Überarbeitung einer individuellen Funktion oder die Entwicklung einer gezielten Erweiterung erforderlich sein. Nicht jedes Problem benötigt ein zusätzliches Plugin. Ebenso lassen sich nicht alle Barrieren durch redaktionelle Änderungen beseitigen.

Das Ziel ist eine technisch nachvollziehbare und wartbare Verbesserung des Shops. Eine pauschale Zusicherung vollständiger Rechtssicherheit oder dauerhafter Konformität allein durch einen automatischen Test, ein Plugin oder ein Overlay wäre dagegen nicht seriös.

Häufige Fragen zur Barrierefreiheit im JTL-Shop