Stellt Euch vor, ein Teil Eurer potenziellen Kundschaft stößt auf unüberwindbare Hürden in Eurem Onlineshop – einfach, weil er nicht barrierefrei gestaltet ist. Das ist nicht nur schade für Menschen mit Beeinträchtigung, sondern auch ein verpasstes Geschäft für Euch – und ab 28.06.2025 sogar Verstoß gegen das neue Barrierefreiheitsstärkungsgesetz (BFSG).

Barrierefreiheit im Onlineshop ist kein nice-to-have, sondern bald rechtlich vorgeschrieben – und ein wichtiger Faktor für ein positives Einkaufserlebnis und mehr Reichweite. Mit der neuen Version 5.5 von JTL-Shop könnt Ihr Euren Shop jetzt für alle zugänglich machen. Im integrierten NOVA-Template sind bereits alle nötigen Voraussetzungen vorhanden. Was Ihr bei dem Thema beachten und welche Einstellungen im Backend Ihr konkret vornehmen müsst, erfahrt Ihr in diesem Beitrag.

Jetzt JTL-Shop 5.5 downloaden

Darum ist Barrierefreiheit wichtig:

Barrierefreiheit bedeutet, dass Euer Onlineshop von Menschen mit unterschiedlichen Einschränkungen problemlos genutzt werden kann. Dazu gehören z.B.:

Sehbehinderte und blinde Menschen: Sie verlassen sich auf Screenreader, die Bildschirminhalte vorlesen, oder auf Braillezeilen.
Menschen mit motorischen Einschränkungen: Sie nutzen möglicherweise keine Maus, sondern Tastatur oder spezielle Eingabegeräte.
Menschen mit kognitiven Beeinträchtigungen: Klare und einfache Sprache sowie eine intuitive Navigation sind für sie entscheidend.
Ältere Menschen: Auch sie profitieren von einer gut lesbaren Schrift, ausreichend großen Bedienelementen und einer einfachen Bedienung.

Ein barrierefreier Shop ist also nicht nur inklusiv, sondern verbessert auch die Benutzerfreundlichkeit für all Eure Kunden. Zudem kann es sich positiv auf Euer SEO-Ranking auswirken, da Suchmaschinen Wert auf eine gute User-Experience legen.

Gesetzliche Vorgaben: Das BFSG

Das Barrierefreiheitsstärkungsgesetz (BFSG) und die zugehörige Verordnung (BFSGV) treten ab 28.06.2025 in Kraft und betreffen den Großteil aller Onlineshops direkt.

Einige Fakten zum Geltungsbereich des Gesetzes:

Betroffen sind Onlineshops, die sich an Verbraucher richten (B2C)
B2B Shops sind also von den Vorgaben derzeit nicht betroffen, sie müssen aber Geschäfte mit Verbrauchern ausschließen.
Onlinehändler mit weniger als 10 Mitarbeitern und weniger als 2 Mio EUR Umsatz oder Bilanzsumme sind derzeit auch noch ausgenommen.
Reine Präsentationsseiten (z.B. ein Blog) sind nicht betroffen.
Blogs innerhalb eines Onlineshops sind jedoch betroffen.

Wichtig: Barrierefreiheitserklärung

Neben den konkreten Maßnahmen im Shop, haben Onlinehändler auch noch die Pflicht aufzuklären, welche Anforderungen in Bezug auf Barrierefreiheit sie konkret erfüllen. Das kann in den AGB erfolgen oder als separate Barrierefreiheitserklärung.

Ältere Frau mit Brille in großem Raum am Laptop

Konkrete Maßnahmen für mehr Barrierefreiheit im JTL-Shop

Nun aber zu den praktischen Schritten, die Ihr in Eurem JTL-Shop umsetzen könnt:

1. Aussagekräftige Alternativtexte für Bilder:

Bilder transportieren Emotionen und Informationen. Für Menschen, die sie nicht sehen können, sind Alternativtexte (Alt-Texte) unerlässlich. Beschreibt präzise, was auf dem Bild zu sehen ist und welche Funktion es hat.

Gut: <img src=“rotes-sofa.jpg“ alt=“Rotes, dreisitziges Sofa mit hellen Holzfüßen“>
Schlecht: <img src=“bild1.jpg“ alt=“Bild“> oder <img src=“rotes-sofa.jpg“ alt=““> (leere Alt-Texte nur für rein dekorative Bilder verwenden)

Achtet darauf, dass die Alt-Texte informativ und kontextbezogen sind. Bei Produktbildern können beispielsweise Farbe, Material und wichtige Details genannt werden.

Kostenfreies Webinar

So machst du deinen JTL-Shop barrierefrei

Wir zeigen Euch praxisnah, wie Ihr Euren Handel mit JTL-Shop 5.5 barrierefrei gestaltet, und was Ihr sonst noch tun müsst, um die gesetzlichen Vorgaben zu erfüllen. Außerdem lernt Ihr eine automatisierte Plugin-Lösung kennen, die Euch einen Großteil der Arbeit abnimmt.

Jetzt anmelden

2. Klare und strukturierte Überschriften:

Überschriften (<h1> bis <h6>) strukturieren Eure Inhalte und erleichtern die Navigation für Screenreader-Nutzer. Verwendet sie hierarchisch sinnvoll: <h1> für die Hauptüberschrift der Seite, <h2> für wichtige Abschnitte usw.

Richtig:
HTML
<h1>Damenmode</h1>
<h2>T-Shirts</h2>
<h3>Baumwoll-T-Shirts</h3>
Falsch: Überschriften nur zur optischen Hervorhebung von Text verwenden.

3. Tastaturnavigation optimieren:

Viele Nutzer sind auf die Tastatur angewiesen, um durch eine Webseite zu navigieren. Stelle sicher, dass alle interaktiven Elemente (Links, Buttons, Formularfelder) mit der Tab-Taste erreichbar sind und der Fokus deutlich sichtbar ist.

Prüft: Könnt Ihr alle wichtigen Funktionen Eures Shops (Navigation, Produktauswahl, Warenkorb, Checkout) ausschließlich mit der Tastatur bedienen?
Achtet auf: Eine logische Tab-Reihenfolge und einen gut sichtbaren Fokus-Indikator (z.B. ein farbiger Rahmen um das aktive Element).

4. Verständliche Formulare:

Formulare sollten klar beschriftet sein und eindeutige Anweisungen enthalten. Verwende das <label>-Element, um Formularfelder mit ihren Beschriftungen zu verknüpfen. Dies hilft Screenreadern, den Zweck des jeweiligen Feldes zu erkennen.

Gut:
HTML
<label for=“name“>Name:</label>
<input type=“text“ id=“name“ name=“name“>
Schlecht: Platzhaltertexte als alleinige Beschriftung verwenden.

Gebt außerdem klare Fehlermeldungen aus, wenn Eingaben ungültig sind, und weist darauf hin, wie Fehler behoben werden können.

5. Ausreichender Farbkontrast:

Ein guter Farbkontrast zwischen Text und Hintergrund ist entscheidend für die Lesbarkeit, insbesondere für Menschen mit Sehbehinderungen. Es gibt verschiedene Tools, mit denen Ihr den Kontrast Eurer Farben überprüfen könnt (z.B. der WebAIM Contrast Checker).

Empfehlung: Achtet auf ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für große Textelemente.

6. Klare und einfache Sprache:

Vermeide unnötig komplizierte Wörter, lange Sätze und Fachbegriffe, die nicht jeder versteht. Eine klare und einfache Sprache kommt all Euren Kunden zugute.

Tipp: Lest Eure Texte laut vor – klingt es natürlich und verständlich?

Mockup Barrierefreiheit E-Commerce

7. Barrierefreie Videos und Audioinhalte:

Wenn Ihr Videos in Eurem Shop einbindet, stellt Untertitel oder Transkripte bereit. Für Audioinhalte sind Transkripte wichtig.

8. Dynamische Inhalte berücksichtigen:

Achtet darauf, dass auch dynamisch erzeugte Inhalte (z.B. durch AJAX- oder JavaScript-Interaktionen) barrierefrei sind. Screenreader sollten über Änderungen informiert werden. Verwendet ARIA-Attribute (Accessible Rich Internet Applications), um die Rolle, den Status und die Eigenschaften von dynamischen Elementen zu beschreiben.

9. Testen, testen, testen!

Der wichtigste Schritt ist das Testen Eures Shops auf Barrierefreiheit. Nutzt verschiedene Tools und Methoden:

Automatische Tests: Es gibt verschiedene Webanalyse-Tools und Browser-Erweiterungen, die automatisiert auf Barrierefreiheitsprobleme prüfen (Liste mit möglichen Tools: https://www.w3.org/WAI/test-evaluate/tools/list).
Manuelle Tests: Navigiert mit der Tastatur durch Euren Shop, schaltet Bilder aus und nutzt einen Screenreader (z.B. NVDA, VoiceOver), um die Benutzererfahrung zu simulieren.
Nutzer-Tests: Wenn möglich, bezieht Menschen mit Behinderungen in Eure Tests ein, um wertvolles Feedback aus erster Hand zu erhalten.

JTL-Shop 5.5 und Barrierefreiheit: Was ist bereits möglich?

Der JTL-Shop wurde in der neuen Version 5.5 und mit dem integrierten NOVA-Template stark auf Barrierefreiheit optimiert, sodass Ihr damit bereits eine ideale Ausgangsposition habt.

Achtet bei der Auswahl von Themes und Plugins darauf, dass diese ebenfalls auf Barrierefreiheit optimiert sind – einige Entwickler berücksichtigen diese Aspekte bereits.

Der zertifizierte JTL-Servicepartner WebStollen beispielsweise prüft bereits sämtliche Plugins, die im Frontend wirken, auf Barrierefreiheit.

Kontinuierliche Optimierung und mehr Stabilität

Mit der Version 5.5 wurde der JTL-Shop nicht nur im Hinblick auf Barrierefreiheit überarbeitet – auch unter der Haube hat sich einiges getan: Insgesamt wurden 141 Tickets bearbeitet, die zur technischen Optimierung, besseren Performance und höheren Stabilität des Shopsystems beitragen.

Dabei ging es vor allem um Feinschliff und technische Weiterentwicklung: kleinere Anpassungen, die JTL-Shop noch robuster und zukunftsfähiger machen.

Wenn Ihr Euch für alle Details interessiert, lohnt sich ein Blick in den JTL-Issue-Tracker. Dort könnt Ihr alle Änderungen transparent und im Detail nachverfolgen.

Hinweis zum E-Mail-Versand mit Outlook oder Gmail

Wenn Ihr Euren Shop mit einem Outlook- oder Gmail-Konto eingerichtet habt, denkt daran:

Diese Konten müssen neu mit JTL-Shop verbunden werden – unabhängig vom Update auf Version 5.5.

Hintergrund ist eine technische Änderung auf Seiten der E-Mail-Anbieter. Eine ausführliche Anleitung zur Neueinrichtung findet Ihr im JTL-Guide.

Barrierefreiheit als Chance nutzen

Barrierefreiheit ist mehr als nur eine Pflicht – sie ist eine Chance, Euren Kundenkreis zu erweitern, die Benutzerfreundlichkeit zu verbessern und ein positives Image aufzubauen.

Mit dem Update auf JTL-Shop 5.5 geht Ihr bereits den entscheidenden ersten Schritt: Das integrierte NOVA-Template bringt alle technischen Voraussetzungen mit, um Euren Shop barrierefrei zu gestalten. Damit spart Ihr Zeit und Aufwand bei der Umsetzung und könnt direkt mit der inhaltlichen Optimierung starten – zum Beispiel mit passenden Alt-Texten, klarer Struktur oder verständlicher Sprache.

Je früher Ihr Euch mit dem Thema beschäftigt, desto besser: Ab dem 28.06.2025 gelten die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) verbindlich für viele Onlineshops. Nutzt die Gelegenheit, jetzt aktiv zu werden – nicht nur, um Abmahnungen zu vermeiden, sondern auch, um ein starkes Signal für Inklusion und Nutzerfreundlichkeit zu setzen.

JTL-Shop 5.5 downloaden

Falls Ihr Unterstützung bei der Umsetzung der Maßnahmen benötigt, bieten JTL-Partner wie Webstollen speziell dafür folgende Leistungen an: