JTL-Shop barrierefrei machen: BFSG-Checkliste für NOVA und JTL-Wawi

Ab welcher Version das NOVA-Template barrierefrei ist, warum Kindtemplates und Plugins trotzdem Barrieren erzeugen und wie Sie Alt-Texte über JTL-Wawi pflegen.

Ein JTL-Shop ist nicht automatisch barrierefrei, aber die Grundlage stimmt: Laut JTL ist das Standard-Template NOVA ab JTL-Shop 5.5.0 barrierefrei, mit Screenreadern kompatibel und vollständig per Tastatur bedienbar. Ob Ihr Shop die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt, entscheidet sich trotzdem an Kindtemplates, Plugins, Bildern und Inhalten. Diese Checkliste zeigt, wo Sie ansetzen.

Das BFSG gilt seit dem 28. Juni 2025 für Onlineshops, die an Verbraucher verkaufen. Maßstab ist die harmonisierte Norm EN 301 549, die für Webinhalte auf die WCAG 2.1 in den Stufen A und AA verweist. Welche Pflichten insgesamt gelten, lesen Sie in BFSG für Onlineshops: Diese Pflichten gelten seit Juni 2025. Der Artikel ist eine technische Anleitung und keine Rechtsberatung.

Was JTL selbst mitbringt

JTL hat mit JTL-Shop 5.5, angekündigt im Mai 2025, das integrierte NOVA-Template für die Barrierefreiheit überarbeitet. In seiner FAQ zum BFSG schreibt JTL, NOVA sei ab JTL-Shop 5.5.0 barrierefrei, kompatibel mit Screenreadern und komplett per Tastatur bedienbar. Bezugsgröße sind die Erfolgskriterien der WCAG 2.1 auf den Stufen A und AA.

Ebenso deutlich sagt JTL, wo die Grenze liegt: Sie als Shopbetreiber sind für die Barrierefreiheit Ihres gesamten Onlineauftritts verantwortlich. Das schließt ausdrücklich Module und Funktionen von Drittanbietern ein, etwa Buchungskalender oder Bezahl-Plugins. Untertitel und Transkripte für Videos müssen Sie selbst einrichten, und Overlays bezeichnet JTL als nur eingeschränkt wirksam und nicht als Dauerlösung.

Wer ist wofür verantwortlich?

Schritt 1: Version prüfen und aktualisieren

Prüfen Sie im Backend, welche JTL-Shop-Version läuft.

• JTL-Shop 5.5 oder neuer: Das überarbeitete NOVA-Template ist enthalten. Spielen Sie Updates regelmäßig ein, weil JTL weitere Korrekturen nachliefert.
• JTL-Shop 5.4 oder älter: Die Überarbeitung fehlt. Planen Sie das Update, testen Sie es vorher auf einer Kopie des Shops und prüfen Sie, ob Ihre Plugins mit der neuen Version kompatibel sind.
• JTL-Shop 4: Für das alte Evo-Template gibt es diese Arbeiten nicht. Ein Update auf JTL-Shop 5 ist hier die Voraussetzung für alles Weitere.

Schritt 2: Kindtemplate und fremde Templates prüfen

Das ist der Punkt, an dem viele JTL-Shops scheitern, obwohl sie aktuell sind. Die meisten Shops nutzen ein Kindtemplate von NOVA oder ein gekauftes Template. Ein Kindtemplate überschreibt einzelne Template-Dateien. Jede überschriebene Datei liefert weiter Ihr altes Markup aus und bekommt die Barrierefreiheitsarbeiten aus 5.5 nicht.

So gehen Sie vor:

• Lassen Sie sich auflisten, welche Template-Dateien Ihr Kindtemplate überschreibt, und gleichen Sie diese mit den aktuellen NOVA-Dateien ab. Besonders wichtig sind Header, Navigation, Artikelliste, Artikeldetails, Warenkorb und Bestellvorgang.
• Fragen Sie beim Anbieter eines gekauften Templates nach, ob es auf JTL-Shop 5.5 angepasst wurde und welche Aussagen er zur Barrierefreiheit macht.
• Prüfen Sie eigenes CSS auf outline: none oder outline: 0. Damit verschwindet der Tastaturfokus, auch wenn NOVA ihn korrekt mitbringt.

Ein sichtbarer Fokus lässt sich im Kindtemplate mit wenigen Zeilen ergänzen:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Schritt 3: Alt-Texte über JTL-Wawi pflegen

In JTL-Shops kommen die Artikelbilder aus JTL-Wawi. Den Alternativtext hinterlegen Sie laut JTL über das Artikelattribut img_alt. Er wird bei der Synchronisation in den Shop übertragen. Dafür legen Sie in JTL-Wawi ein Textattribut mit diesem Namen an und weisen es den Artikeln zu.

• Beschreiben Sie, was für den Kauf zählt: „Edelstahl-Thermoskanne, 1 Liter, matt schwarz, mit Drehverschluss“ statt der Artikelnummer.
• Nutzen Sie für große Sortimente den Datenimport oder die Ameise in JTL-Wawi, statt jeden Artikel einzeln zu öffnen.
• Bilder in Seiten, die Sie mit dem OnPage Composer bauen, bekommen ihren Alt-Text direkt im Bild-Portlet.
• Rein dekorative Bilder bekommen einen leeren Alt-Text.

Schritt 4: Farben und Kontraste

Farben und Schriften legen Sie in den Einstellungen des Templates und im Kindtemplate fest. Prüfen Sie jede Kombination mit einem Kontrastrechner:

• Normaler Text: mindestens 4,5:1 zum Hintergrund.
• Große Schrift (ab 24 Pixel oder ab etwa 19 Pixel fett): mindestens 3:1.
• Rahmen von Eingabefeldern, Icons und Fokusmarkierungen: mindestens 3:1.

Typische Fehler in JTL-Shops sind Sonderpreis-Badges in hellem Rot, Lieferstatus-Ampeln, die nur über Farbe funktionieren, hellgraue Streichpreise und Buttons in der Markenfarbe mit zu hellem Text. Die Lieferampel ist ein guter Prüfstein: Steht neben der Farbe auch ein Text wie „Sofort lieferbar“, ist sie auch ohne Farbwahrnehmung verständlich.

Schritt 5: OnPage Composer und eigene Inhalte

Mit dem OnPage Composer bauen Redakteure Startseite, Landingpages und Kategorietexte. Hier entstehen Barrieren, ohne dass jemand am Code arbeitet.

• Überschriften: Nutzen Sie die Ebenen H1 bis H4 für die Gliederung, nicht für die Schriftgröße.
• Text in Bildern: Aktionen und Rabatte gehören als echter Text auf die Seite, nicht in ein Bannerbild.
• Slider: Automatisch wechselnde Slider brauchen eine Pause-Funktion und müssen per Tastatur bedienbar sein.
• Linktexte: „Hier klicken“ oder „Mehr“ sagt Screenreader-Nutzenden nichts. Schreiben Sie, wohin der Link führt.

Schritt 6: Plugins, Zahlungsarten und Cookie-Hinweis

JTL nennt Bezahl-Plugins ausdrücklich als Ihre Verantwortung. Dasselbe gilt für Filter, Wunschzettel, Bewertungs-Widgets, Chat-Fenster, Newsletter-Popups und Consent-Lösungen.

• Testen Sie jedes Plugin, das im Shop etwas anzeigt, mit der Tastatur: erreichbar, Fokus sichtbar, mit Escape schließbar?
• Gehen Sie den Bestellvorgang einmal komplett ohne Maus durch, inklusive Auswahl der Zahlungsart und eingebetteter Zahlungsfenster.
• Prüfen Sie, ob Fehlermeldungen im Bestellformular als Text erscheinen und nicht nur als roter Rahmen.
• Der Cookie-Hinweis muss per Tastatur erreichbar sein, beide Schaltflächen brauchen ausreichenden Kontrast, und er muss bei 400 % Zoom bedienbar bleiben.
• Deaktivieren und entfernen Sie Plugins, die Sie nicht mehr brauchen.

Schritt 7: Erklärung zur Barrierefreiheit veröffentlichen

JTL weist darauf hin, dass Sie eine Barrierefreiheitserklärung im Shop bereitstellen müssen. Das BFSG verlangt die Informationen nach Anlage 3 in Ihren AGB oder auf andere deutlich wahrnehmbare Weise. Legen Sie dafür eine eigene Seite an und verlinken Sie sie im Footer. Welche Angaben hineingehören, zeigt unser Muster für die Erklärung zur Barrierefreiheit.

Die Checkliste im Überblick

Häufige Fragen

Ist JTL-Shop barrierefrei?

Das Standard-Template NOVA ist laut JTL ab JTL-Shop 5.5.0 barrierefrei. Ihr Shop ist es damit noch nicht automatisch: Kindtemplates, fremde Templates, Plugins, Bilder und Inhalte verantworten Sie selbst.

Reicht ein Update auf JTL-Shop 5.5?

Das Update ist die Voraussetzung, aber selten ausreichend. Wenn Ihr Kindtemplate Dateien von NOVA überschreibt, kommen die Verbesserungen dort nicht an. Dazu kommen Alt-Texte, Kontraste und Plugins.

Wo pflege ich Alt-Texte für Artikelbilder?

In JTL-Wawi über das Artikelattribut img_alt. Der Text wird beim Abgleich in den Shop übertragen. Für Bilder im OnPage Composer tragen Sie den Alt-Text direkt im Bild-Portlet ein.

Hilft ein Barrierefreiheits-Plugin?

Plugins können einzelne Aufgaben erleichtern. Overlays, die Barrieren zur Laufzeit überdecken sollen, nennt auch JTL nur eingeschränkt wirksam. Warum, erklären wir in Accessibility-Overlays und das BFSG.

Nächster Schritt

Prüfen Sie in 30 Sekunden kostenlos, welche Barrieren Ihr JTL-Shop hat: Jetzt kostenlosen BFSG-Check starten. Der Check lädt Startseite, eine Kategorie- und eine Produktseite in einem echten Browser und zeigt Kontrastfehler, fehlende Alt-Texte, fehlende Beschriftungen und einen unsichtbaren Tastaturfokus mit der jeweiligen Fundstelle. Er ersetzt keine manuelle Prüfung und keine Rechtsberatung.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.