Gambio und BFSG: Barrierefreiheit im deutschen Shopsystem

Gambio: Das deutsche Shopsystem und das BFSG

Gambio ist ein in Deutschland entwickeltes Shopsystem, das besonders bei kleinen und mittleren Händlern beliebt ist. Rund 25.000 Shops laufen auf Gambio -- viele davon im B2C-Bereich und damit direkt vom Barrierefreiheitsstärkungsgesetz (BFSG, § 3 Abs. 1) betroffen.

Der Vorteil: Gambio ist auf den deutschen Markt zugeschnitten und berücksichtigt rechtliche Anforderungen wie Widerrufsbelehrung, Datenschutz und Grundpreisangabe seit Jahren. Für das BFSG hat Gambio angekündigt, Barrierefreiheits-Updates in kommende Versionen zu integrieren.

Aber: Aktuell sind die meisten Gambio-Shops nicht BFSG-konform. Die europäische Norm EN 301 549 verweist auf die WCAG 2.1 Level AA als Mindeststandard -- und hier haben Gambio-Shops systematische Lücken.

Gambio GX4 Architektur: Was Barrierefreiheit beeinflusst

Um die Barrierefreiheits-Probleme zu verstehen, hilft ein Blick auf die technische Architektur. Gambio GX4 basiert auf PHP mit Smarty-Templates und verwendet Bootstrap 3 als Frontend-Framework. Das Template-System ist modular aufgebaut: Einzelne Smarty-Blöcke (.html-Dateien im templates/-Verzeichnis) steuern Produktlisten, Detailseiten, Checkout und Navigation. Weitere Informationen finden Sie im BFSG-Glossar.

Bootstrap 3 liefert eine brauchbare HTML-Grundstruktur mit Grid-System und responsivem Design. Allerdings fehlen in Bootstrap 3 viele ARIA-Patterns, die erst in späteren Versionen Standard wurden. Das betrifft besonders Dropdown-Menüs, Modals und die Tab-Navigation.

Gambio nutzt jQuery für interaktive Elemente wie Produktfilter, Bildergalerien und den Warenkorb-Overlay. Viele dieser jQuery-Komponenten wurden ohne Barrierefreiheit entwickelt -- sie reagieren auf Maus-Events, aber nicht auf Tastatureingaben.

Typische Probleme in Gambio-Shops

Die häufigsten Barrierefreiheits-Verstöße in Gambio-Shops betreffen vier Bereiche:

Produktseiten: Produktbilder verwenden automatisch den Produktnamen als Alt-Text -- das ist generisch und nicht beschreibend (Verstoß gegen WCAG SC 1.1.1). Produktvarianten (Farbe, Größe) sind oft als Custom-Dropdowns umgesetzt, die für Screenreader nicht bedienbar sind. Tabs für Beschreibung, Bewertungen und Details nutzen häufig keine korrekten ARIA-Rollen (role="tablist", role="tab", role="tabpanel").

Checkout: Der mehrstufige Checkout-Prozess hat Fokus-Probleme: Nach dem Absenden eines Schritts springt der Fokus nicht zum nächsten Schritt, sondern bleibt am Seitenanfang. Fehlermeldungen sind visuell sichtbar, aber nicht mit aria-live als Live-Region ausgezeichnet (WCAG SC 4.1.3). Zahlungsarten-Auswahl ist teilweise nicht per Tastatur navigierbar (WCAG SC 2.1.1).

Navigation und Filter: Die Filternavigation in Kategorieseiten ist mouse-only -- Checkboxen und Slider reagieren nicht auf Tastatureingaben. Das Hauptmenü mit Mega-Dropdown öffnet sich per Hover, hat aber kein Tastatur-Equivalent. Cookie-Banner von Drittanbietern sind häufig nicht per Tastatur bedienbar.

Kontraste und Farben: Standard-Templates verwenden oft helle Grautöne für sekundären Text, die den Mindestkontrast von 4,5:1 (WCAG SC 1.4.3) nicht erreichen. Aktive Zustände (Hover, Focus) sind visuell kaum unterscheidbar.

Gambio Cloud vs. Self-Hosted: Unterschiede bei Barrierefreiheit

Gambio Cloud ist die gehostete Variante, bei der Gambio Server, Updates und Wartung übernimmt. Vorteil: Barrierefreiheits-Updates werden automatisch eingespielt. Nachteil: Du hast weniger Kontrolle über Template-Code und kannst tiefergehende ARIA-Anpassungen nicht selbst vornehmen.

Self-Hosted Gambio (eigener Server oder Hosting-Paket) gibt dir vollen Zugriff auf alle Smarty-Templates, CSS-Dateien und JavaScript. Du kannst ARIA-Attribute ergänzen, Fokus-Management implementieren und Custom-Widgets barrierefrei umbauen. Das erfordert allerdings technisches Know-how oder einen Entwickler.

Für beide Varianten gilt: Die Grundlage ist identisch. Gambio Cloud-Nutzer sind auf Gambios Update-Zeitplan angewiesen, Self-Hosted-Nutzer können schneller reagieren -- müssen es aber auch selbst tun.

Gambio barrierefrei machen: Was du selbst tun kannst

Viele Barrierefreiheits-Maßnahmen erfordern keinen Entwickler. Hier ist, was du im Gambio-Admin sofort umsetzen kannst:

Alt-Texte für Produktbilder: Gehe zu jedem Produkt und trage individuelle Alt-Texte ein. Statt „Sneaker XY" besser „Weißer Leder-Sneaker mit blauer Sohle, Seitenansicht". Das erfüllt WCAG SC 1.1.1 und verbessert nebenbei dein Bild-SEO.

CMS-Seiten strukturieren: AGB, Impressum, Datenschutz und Widerrufsbelehrung brauchen korrekte Überschriften-Hierarchie (h1 > h2 > h3). Nutze den Gambio-Texteditor und formatiere mit Überschriften statt mit Fettdruck und Schriftgröße.

Kontraste anpassen: Im Gambio StyleEdit (oder direkt in der CSS-Datei) kannst du Schriftfarben und Hintergrundfarben ändern. Ziel: Mindestens 4,5:1 für normalen Text, 3:1 für großen Text (WCAG SC 1.4.3).

Cookie-Banner ersetzen: Tausche das Standard-Cookie-Banner gegen eine barrierefreie Lösung wie Cookiebot oder Usercentrics aus. Achte darauf, dass der Banner per Tastatur bedienbar und mit role="dialog" sowie aria-modal="true" ausgezeichnet ist.

Template-Anpassungen und Code-Fixes für Entwickler

Für tiefergehende Barrierefreiheit brauchst du Zugriff auf die Smarty-Template-Dateien. Die wichtigsten Eingriffspunkte:

Skip-Link ergänzen: Füge am Anfang des <body> in der Datei templates/[theme]/index.html einen Skip-Link ein: <a href="#main-content" class="skip-link">Zum Inhalt springen</a>. Das erfüllt WCAG SC 2.4.1 (Blöcke umgehen).

Fokus-Styles sichtbar machen: In der CSS-Datei: Entferne niemals outline: none ohne Ersatz. Ergänze stattdessen einen deutlich sichtbaren Fokus-Ring: :focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; } (WCAG SC 2.4.7).

Produktfilter tastaturgerecht machen: Die Filter-Checkboxen in templates/[theme]/snippets/filter/ müssen native <input type="checkbox">-Elemente verwenden statt Custom-Divs mit Click-Handlern. Ergänze tabindex="0" und Keyboard-Event-Listener für Enter und Space.

Checkout-Fokus-Management: Nach jedem Schrittwechsel im Checkout muss der Fokus programmatisch auf die neue Überschrift oder das erste Eingabefeld gesetzt werden. Das erfordert eine Anpassung in den Checkout-JavaScript-Dateien.

ARIA-Landmarks setzen: Ergänze role="navigation" im Header, role="main" im Content-Bereich und role="contentinfo" im Footer. Besser noch: Verwende die semantischen HTML5-Elemente <nav>, <main> und <footer> direkt in den Smarty-Templates.

Modul-Audit: Drittanbieter-Module prüfen

Gambio-Shops nutzen häufig Module von Drittanbietern -- und diese sind selten auf Barrierefreiheit getestet. Führe ein systematisches Modul-Audit durch:

Cookie-Consent-Module: Muss per Tastatur bedienbar sein, role="dialog" haben, und der Fokus muss beim Öffnen ins Modal wechseln. Viele günstige Lösungen versagen hier.

Bewertungsmodule: Sternebewertungen müssen für Screenreader lesbar sein. Statt nur visuellen Sternen braucht es ein aria-label="4 von 5 Sternen". Eingabefelder für eigene Bewertungen müssen Labels haben.

Slider und Karusselle: Automatisch rotierende Slider müssen eine Pause-Funktion haben (WCAG SC 2.2.2). Jede Slide braucht Alt-Texte. Die Navigation (Punkte, Pfeile) muss per Tastatur bedienbar sein.

Live-Chat-Widgets: Der Chat-Button muss per Tastatur erreichbar sein. Das Chat-Fenster muss als role="dialog" ausgezeichnet und per Escape schließbar sein. Eingabefeld und Senden-Button brauchen Labels.

Tipp: Prüfe jedes Modul einzeln mit dem bf-check Scanner und dem Tastatur-Test (Tab durch alle Elemente).

Vergleich mit anderen Shopsystemen

Wie steht Gambio im Vergleich zu anderen Plattformen da? Ein ehrlicher Überblick:

Shopware hat in Version 6 deutlich mehr in Barrierefreiheit investiert als Gambio. Die Storefront basiert auf Bootstrap 4, hat ARIA-Patterns für Modals und Dropdowns eingebaut und bietet ein Plugin-Ökosystem mit barrierefreien Erweiterungen.

PrestaShop hat ähnliche Probleme wie Gambio: veraltete Template-Grundlage, fehlende ARIA-Attribute, Fokus-Probleme im Checkout. Die Community arbeitet an Verbesserungen, aber der Fortschritt ist langsam.

WooCommerce profitiert vom WordPress-Ökosystem, das Barrierefreiheit als Core-Prinzip hat. Viele WooCommerce-Themes sind grundsätzlich barrierefreier als Gambio-Templates.

Gambios Stärke bleibt die Anpassbarkeit: Wer einen Entwickler hat, kann jeden Aspekt der Barrierefreiheit kontrollieren. Wer keinen Entwickler hat, ist mit Shopify oder Shopware besser bedient.

Gambio 5 und die Zukunft

Gambio hat angekündigt, dass kommende Versionen verstärkt auf Barrierefreiheit setzen werden. Konkrete Zusagen für volle WCAG 2.1 AA-Konformität stehen allerdings noch aus.

Bis dahin gilt: Aktualisiere auf die neueste Gambio-Version (mindestens GX4), nutze die eingebauten Möglichkeiten (Alt-Texte, CMS-Struktur, Kontraste) und lasse deinen Shop regelmäßig scannen. Plane Budget für einen Entwickler ein, wenn du Template-Anpassungen brauchst.

Ein BFSG-Scan bei bf-check.de dauert 30 Sekunden und zeigt dir sofort, wo dein Gambio-Shop nachbessern muss -- inklusive konkreter Handlungsempfehlungen für jedes gefundene Problem.

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine Rechtsberatung. Die Anforderungen des BFSG (§ 3, § 4) und der WCAG 2.1 Level AA können sich je nach Geschäftsmodell und Unternehmensgröße unterschiedlich auswirken. Gambio-Versionsnummern und Funktionen können sich durch Updates ändern. Für verbindliche Aussagen konsultiere einen spezialisierten Rechtsanwalt.

Häufig gestellte Fragen