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

Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Dieses Gesetz setzt die Anforderungen des European Accessibility Act (EAA) in deutsches Recht um und verpflichtet Unternehmen, digitale Produkte und Dienstleistungen barrierefrei zu gestalten. Für Onlineshops bedeutet dies neue Anforderungen, die frühzeitig umgesetzt werden sollten.

Allerdings sind nicht automatisch alle Onlineshops von der Verordnung betroffen: Kleinstunternehmen (Unternehmen, die weniger als zehn Personen beschäftigen und entweder einen Jahresumsatz von höchstens 2 Millionen Euro erzielen oder dessen Jahresbilanzsumme sich auf höchstens 2 Millionen Euro beläuft) sind vom Gesetz teilweise ausgenommen (Quelle: bund.de).

Die Umsetzung von Barrierefreiheit kann für Onlineshop-Betreiber eine Herausforderung darstellen, insbesondere wenn bestehende Shopsysteme und Templates nicht bereits barrierefrei sind. Typische Hürden sind:

• Technische Anpassungen: Ältere Shopsysteme benötigen oft umfangreiche Anpassungen, um barrierefreie Funktionen zu unterstützen. Daher halten wir ein Update auf die neueste Shopversion für unerlässlich. Wenn Du dabei Unterstützung brauchst, kannst Du hier Deine individuelle Anfrage stellen.

• Design-Anforderungen: Bestimmte Designelemente, wie Slider oder komplexe Dropdown-Menüs, müssen überarbeitet werden.

• Fehlende Ressourcen: Kleinere Shop-Betreiber verfügen oft nicht über das Know-how oder die finanziellen Mittel für eine vollständige Barrierefreiheitsprüfung.

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 der bereits angekündigten Shopversion 5.5.0 setzt JTL ebenfalls auf Barrierefreiheit und ist bemüht sich den wichtigsten Themen, wie der Shopbedienung ausschließlich mit Tastatur, der Kompatibiltät mit Screenreadern und der korrekten Beschriftung von Formularen anzunehmen. Da an dieser Version noch aktiv gearbeitet wird, können wir noch keine Auskunft zu den konrekten Funktionen geben. Eine Übersicht aller Änderungen findet ihr aber jetzt schon im Issue-Tracker von JTL.

Die Barrierefreiheit im E-Commerce ist kein kurzfristiger Trend, sondern eine langfristige Notwendigkeit – sowohl aus rechtlicher als auch aus wirtschaftlicher Sicht. Wir von Dreizack Medien und JTL setzen bereits erste technische Verbesserungen um, aber als Shop-Betreiber musst Du ebenfalls aktiv werden: Setze Alt-Texte für Deine Inhalte und biete Untertitel für Videos, sowie Transkripte für Audio-Inhalte.

Barrierefreiheit ist kein Nachteil, sondern eine Chance: Du verbesserst nicht nur die Nutzung für Menschen mit Einschränkungen, sondern optimierst die Benutzerfreundlichkeit für alle Kunden, stärkst Dein SEO und reduzierst das Risiko von Abmahnungen.

🚀 Jetzt starten und vorbereiten – damit Dein Shop am 28. Juni 2025 BFSG-konform ist!

Wenn Du Fragen hast, schreib uns gerne in die Kommentare. Und wenn Du mehr zum Thema erfahren möchtest, halte Ausschau nach unserem nächsten Beiträgen.

Bis dahin, Dein Team von Dreizack Medien.