🔍 Barrierefreiheit im Onlineshop: So machst du deinen JTL-Shop 5.5 BFSG-konform

Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Es setzt die Vorgaben des European Accessibility Act (EAA) in deutsches Recht um und verpflichtet viele Unternehmen dazu, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Für Betreiber von Onlineshops bedeutet das: Neue Anforderungen, die rechtzeitig umgesetzt werden müssen – inklusive einer verpflichtenden Barrierefreiheitserklärung, die regelmäßig aktualisiert wird und nachvollziehbare Maßnahmen dokumentieren muss.

Aber: Nicht alle Shopbetreiber sind betroffen.
Kleinstunternehmen – also Unternehmen mit weniger als 10 Mitarbeitenden und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro – sind vom Gesetz teilweise ausgenommen (bund.de).

Die Umsetzung von Barrierefreiheit ist für viele Shopbetreiber eine echte Herausforderung – vor allem, wenn bestehende Shopsysteme oder Templates bislang nicht darauf ausgelegt sind. Typische Stolpersteine sind dabei:

• Technische Anpassungen: Ältere Shopversionen erfüllen viele Anforderungen nicht von Haus aus. Ein Update auf JTL-Shop 5.5 oder höher ist aus unserer Sicht daher unerlässlich – nur so stehen wichtige technische Grundlagen überhaupt zur Verfügung.

• Design-Anforderungen: Elemente wie Slider, Hover-Menüs oder Farbverläufe müssen oft angepasst werden, damit sie auch mit Tastatur und Screenreader sinnvoll nutzbar sind.

• Fehlende Ressourcen: Viele kleinere Shops haben weder das Know-how noch die Kapazitäten, sich tief in die technischen und redaktionellen Anforderungen einzuarbeiten. Dabei geht es nicht nur um Code – auch die Inhalte müssen mitgedacht werden (z. B. Alt-Texte, einfache Sprache, klare Struktur).

Trotz der Herausforderungen bringt Barrierefreiheit zahlreiche Vorteile für Shopbetreiber mit sich:

• Bessere Benutzerfreundlichkeit für alle Kunden, nicht nur für Menschen mit Behinderungen.

• Höhere Reichweite: Eine barrierefreie Website spricht eine breitere Zielgruppe an.

• SEO-Vorteile: Google bevorzugt barrierefreie Seiten, was zu besseren Rankings führen kann.

• Weniger rechtliche Risiken: Durch die Einhaltung des BFSG sind Betreiber vor Abmahnungen und Strafen geschützt.

Das BFSG und die WCAG 2.1 AA-Konformitätsstufe basieren auf vier grundlegenden Prinzipien, die sicherstellen, dass digitale Angebote für alle Nutzer zugänglich sind. Diese Prinzipien sind Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit und sind essenziell für Onlineshop-Betreiber, um eine nutzerfreundliche und gesetzeskonforme Website zu gestalten.

Wahrnehmbarkeit: Webseiten sollten Informationen und Inhalte so aufbereiten, dass sie für alle Nutzer zugänglich sind. Dazu zählen alternative Texte für Bilder und Videos sowie eine klare und verständliche Darstellung von Textinhalten.

Bedienbarkeit: Die Navigation und Interaktion auf einer Webseite muss für alle Nutzer leicht verständlich und intuitiv nutzbar sein. Dazu gehört, dass alle Funktionen auch über die Tastatur und mit Bildschirmlesern problemlos bedient werden können. Zudem sollten Hyperlinks eindeutige und beschreibende Bezeichnungen haben, um ihre Funktion klar zu vermitteln.

Verständlichkeit: Webseiteninhalte sollten klar strukturiert und leicht verständlich sein. Dies bedeutet, dass auf komplexe Fachbegriffe verzichtet und der Schreibstil sowie das Layout so gestaltet werden, dass sie für eine möglichst breite Zielgruppe zugänglich sind.

Robustheit: Webseiten müssen technisch stabil sein und aktuelle Webstandards einhalten. Dadurch wird sichergestellt, dass die Barrierefreiheit über verschiedene Browser, Endgeräte und assistive Technologien hinweg gewährleistet bleibt.

Damit ein Onlineshop barrierefrei und BFSG-konform ist, müssen verschiedene technische und gestalterische Maßnahmen umgesetzt werden. Diese betreffen vor allem die Struktur, Interaktionselemente und die Kompatibilität mit assistiven Technologien.

1. Barrierefreie Navigation & Interaktion

• Tastatursteuerung sicherstellen: Alle Menüpunkte, Formulare und interaktiven Elemente müssen über die Tabulator-Taste erreichbar sein.
  
  
• Sichtbare Fokus-Anzeige: Es muss erkennbar sein, welches Element gerade mit der Tastatur angesteuert wird.
  
  
• Dropdown-Menüs optimieren: Dropdowns sollten sich mit der Tastatur öffnen und schließen lassen, ohne dass eine Maus benötigt wird.
  
  
• Eindeutige Linkbeschriftungen: Links wie „Hier klicken“ vermeiden und stattdessen beschreibende Texte verwenden (z. B. „Mehr zu unseren Versandoptionen“).

2. Formulare & Checkout-Prozesse optimieren

• Korrekte Beschriftungen für Eingabefelder: Jedes Feld sollte eine klare und sichtbare Beschreibung haben (z. B. „E-Mail-Adresse“ statt nur „E-Mail“).
  
  
• Fehlermeldungen verständlich formulieren: Statt nur „Fehler!“ sollte eine konkrete Anweisung gegeben werden (z. B. „Bitte geben Sie eine gültige Postleitzahl ein“).
  
  
• Pflichtfelder sinnvoll kennzeichnen: Nicht nur mit einem Sternchen (*) markieren, sondern zusätzlich im Klartext (z. B. „Pflichtfeld“).

3. Medien & Inhalte zugänglich machen

• Bilder mit Alt-Texten versehen: Produktbilder, Icons und Infografiken sollten eine kurze, aber aussagekräftige Beschreibung enthalten.
  
  
• Videos mit Untertiteln ausstatten: Tutorials oder Produktvideos sollten eine Möglichkeit zur Textanzeige bieten.
  
  
• Transkripte für Audioinhalte bereitstellen: Podcasts oder Sprachnachrichten sollten als Textversion verfügbar sein.

4. Anpassbare Darstellung & Lesbarkeit

• Textgröße skalierbar machen: Nutzer sollten die Möglichkeit haben, Schriftgrößen ohne Layout-Probleme zu vergrößern.
  
  
• Mindestkontrast von 4,5:1 bzw. 3:1 einhalten: Texte und Bedienelemente müssen sich ausreichend vom Hintergrund abheben.
  
  
• Keine ausschließlich farbbasierte Informationsvermittlung: Fehlermeldungen oder Rabatte sollten nicht nur durch Farben, sondern auch durch Symbole oder Text kenntlich gemacht werden.

5. Technische Umsetzung & Kompatibilität

• Korrekte HTML-Struktur verwenden: Wichtige Bereiche wie Navigation, Hauptinhalt und Footer müssen mit semantischen HTML-Tags ausgezeichnet sein.
  
  
• ARIA-Attribute für assistive Technologien einbinden: Diese helfen Screenreadern, interaktive Elemente korrekt zu interpretieren.
  
  
• Automatische Inhalte deaktivierbar machen: Nutzer sollten die Möglichkeit haben, Animationen oder automatische Slider zu pausieren oder zu stoppen.

Diese Maßnahmen helfen nicht nur, den Shop barrierefrei und rechtskonform zu gestalten, sondern verbessern auch die allgemeine Benutzerfreundlichkeit und SEO-Performance. 🚀

Mit JTL-Shop Version 5.5.0 wurde die Grundlage geschaffen, um zentrale Anforderungen an Barrierefreiheit technisch überhaupt umsetzen zu können. Dazu zählen unter anderem:

• eine verbesserte Bedienbarkeit per Tastatur

• die Kompatibilität mit Screenreadern

• strukturierte Formularbeschriftungen nach aktuellen Standards

Die Version ist bereits offiziell verfügbar und bildet die Voraussetzung für viele aktuelle Entwicklungen – unter anderem auch für das Barrierefreiheits-Widget in NIU Plus.

Eine Übersicht aller Änderungen findet ihr im Issue-Tracker von JTL.

Barrierefreiheit im E-Commerce ist kein kurzfristiger Trend, sondern eine dauerhafte Verantwortung. Das BFSG macht diese Verantwortung ab dem 28. Juni 2025 zur gesetzlichen Pflicht – für viele, aber nicht alle Shopbetreiber.

Wichtig ist: Es geht nicht um Perfektion, sondern um nachweisbare Bemühungen. Wer jetzt beginnt, seinen Shop Schritt für Schritt barriereärmer zu gestalten, ist gut vorbereitet – rechtlich und strategisch.

Bis dahin, Dein Team von Dreizack Medien.