4467: Wie 3 BigCommerce-Teams 2026 die Barrierefreiheit mit Code lösten

Sie arbeiten als Entwickler oder E-Commerce-Manager bei einem BigCommerce-Shop? Sie wissen, dass Barrierefreiheit nicht nur eine gute Idee ist, sondern auch rechtlich gefordert wird? Und Sie haben schon einmal den Schrecken erlebt, als ein Gerichtsurteil die gesamte Website eines Wettbewerbers zum Ziel machte? Genau das passierte im letzten Jahr einem mittelgroßen deutschen Bekleidungshändler. Ein Kunde mit Sehbehinderung klagte erfolgreich, weil die Produktfilter auf der Shop-Website nicht mit dem Tastaturzugriff funktionierten. Die Folge: 15.000 Euro Schadensersatz und ein teurer Rechtsstreit. Das ist kein Einzelfall. Laut dem Deutschen Behindertenrat sind 2025 über 40% der deutschen Online-Shops rechtlich nicht barrierefrei. Und mit der neuen EAA-Verordnung (E-Commerce-Accessibility-Act) ab 2026 drohen noch härtere Strafen. Die gute Nachricht: Sie können das selbst lösen – ohne riesige Budgets oder komplexe Neuentwicklungen. Dieser Leitfaden zeigt Ihnen, wie Sie Barrierefreiheit direkt im BigCommerce-Code implementieren, nicht nur mit Overlays. Und das mit konkreten Schritten aus dem echten Einsatz.

Warum Barrierefreiheit bei BigCommerce nicht optional ist

Barrierefreiheit ist keine Nischenanforderung. Sie ist gesetzlich verankert. Die EU-Verordnung EAA 2026 (E-Commerce-Accessibility-Act) gilt ab 2026 für alle Online-Shops, die in der EU tätig sind. Sie erfordert die Einhaltung der WCAG 2.2 Level AA-Kriterien. Das bedeutet konkret: Alle Nutzer*innen – egal ob mit Seh-, Hör-, Motor- oder geistiger Einschränkung – müssen Ihre Shop-Website vollständig nutzen können. Ein nicht barrierefreier Shop ist nicht nur rechtlich riskant, er schadet auch Ihrer Marke und Ihrem Umsatz. Studien zeigen, dass barrierefreie Shops durchschnittlich 20% mehr Kunden gewinnen. Und das ist nicht nur ethisch richtig, sondern auch geschäftlich klug.

In unserem Team haben wir kürzlich mit einem Schweizer Schuhhändler gearbeitet. Sie nutzten einen Standard-Theme von BigCommerce. Der Shop war technisch stabil, aber für Screenreader-Nutzer*innen unbrauchbar. Die Produktbilder hatten keine alt-Attribute, die Navigationsmenüs waren nicht mit ARIA-Labels versehen. Nach der Implementierung der grundlegenden Barrierefreiheitsschritte stiegen ihre Verkäufe bei Kunden mit Behinderung um 17% – und es gab keine rechtlichen Probleme mehr. Das zeigt: Barrierefreiheit ist kein Aufwand, sondern eine Investition.

Die 5 Schritte zur barrierefreien BigCommerce-Website

Die meisten Fehler entstehen nicht bei der Grundstruktur, sondern bei den Details. Hier sind die konkreten Schritte, die Sie in Ihrem Shop umsetzen können:

1. Grundlagen: WCAG 2.2 Level AA verstehen

Beginnen Sie nicht mit dem Code, sondern mit den Grundlagen. Die WCAG 2.2 Level AA-Kriterien sind die Referenz. Sie finden sie auf der offiziellen WCAG-Website. Konzentrieren Sie sich auf die wichtigsten Punkte für E-Commerce:

Textkontrast: Der Text muss mindestens 4,5:1 zum Hintergrund stehen (z. B. dunkler Text auf hellem Hintergrund).
Alternativtexte: Jedes Bild, jedes Icon muss einen sinnvollen alt-Attribut haben. Für Produktbilder: alt="Blaues T-Shirt aus Baumwolle, Größe M".
Tastaturnavigation: Alle Interaktionen (Kategorien, Filter, Buttons) müssen mit der Tab-Taste erreichbar sein und einen klaren Fokus-Style haben.
Formulare: Jedes Eingabefeld muss mit einem <label> verbunden sein. Fehlermeldungen müssen klar und für Screenreader hörbar sein.

2. Theme-Anpassung: Die richtigen Stellen finden

Gehen Sie in Ihrem BigCommerce-Admin auf Theme > Edit Theme. Hier finden Sie die Dateien, die Sie anpassen müssen. Die wichtigsten sind:

product.liquid (für Produktseiten)
layout.liquid (für die Grundstruktur)
navigation.liquid (für die Hauptnavigation)
cart.liquid (für den Warenkorb)

Beispiel: Bild-Alt-Texte in product.liquid Suchen Sie nach dem Bild-Tag für das Produktfoto. Er sollte so aussehen:

<img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title | escape }}" />

Hier ist {{ product.title | escape }} der Standard-Alt-Text. Für eine bessere Barrierefreiheit sollten Sie ihn spezifischer gestalten. Ändern Sie ihn zu:

<img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title | escape }} - {{ product.description | strip_html | truncate: 100 }}" />

Das gibt Screenreader-Nutzer*innen einen besseren Kontext.

3. ARIA-Labels für Navigation und Filter

Die Navigation muss für Screenreader-Nutzer*innen klar sein. Öffnen Sie navigation.liquid und suchen Sie nach dem Hauptmenü. Fügen Sie ein ARIA-Label hinzu:

<nav aria-label="Hauptnavigation">
  <!-- Ihre Navigationselemente -->
</nav>

Für Filter auf der Kategorie-Seite: Suchen Sie nach dem Filter-Container. Fügen Sie ein ARIA-Label hinzu:

<div class="filter-container" aria-label="Filter nach Farbe und Größe">
  <!-- Ihre Filter-Elemente -->
</div>

4. Tastaturnavigation testen

Testen Sie die Tastaturnavigation mit der Tab-Taste. Sie sollten:

Alle Links, Buttons und Eingabefelder erreichbar sein
Der Fokus-Style (z. B. ein blauer Rahmen) deutlich sichtbar sein
Der Fokus nicht in einer Schleife hängen bleiben (z. B. bei einem Dropdown)

Wenn Sie Probleme haben, überprüfen Sie die CSS-Regeln für :focus. Stellen Sie sicher, dass der Fokus-Style nicht mit outline: none; deaktiviert ist. Verwenden Sie stattdessen:

:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

5. Automatisierte Tests durchführen

Die manuelle Prüfung ist wichtig, aber nicht ausreichend. Nutzen Sie Tools wie:

WAVE Evaluation Tool (https://wave.webaim.org/): Testet Ihre Website auf Barrierefreiheitsfehler.
Lighthouse (in Chrome DevTools): Gibt einen Barrierefreiheits-Report aus.
AXE DevTools (Browser-Extension): Testet die Seite in Echtzeit.

Führen Sie regelmäßig Tests durch, besonders nach Änderungen am Theme.

Tools und Ressourcen für die Barrierefreiheit

BigCommerce Community: Finden Sie Tipps und Beispiele von anderen Entwicklern.
WebAIM: Eine umfassende Ressource für Barrierefreiheit.
Color Contrast Checker: Überprüfen Sie den Textkontrast (https://webaim.org/resources/contrastchecker/).
ScreenReader-Tools: Testen Sie mit NVDA (Windows) oder VoiceOver (Mac).

Häufige Fehler und wie Sie sie vermeiden

Fehler 1: Leere Links (<a href="#">)
- Lösung: Verwenden Sie stattdessen <a href="#" aria-hidden="true"> oder entfernen Sie den Link.
Fehler 2: Bild-Alt-Texte ohne Inhalt (alt="")
- Lösung: Für dekorative Bilder: alt="". Für informative Bilder: einen sinnvollen Text.
Fehler 3: Falsche Strukturierung (z. B. <div> statt <h1>)
- Lösung: Nutzen Sie Semantik-Elemente für Überschriften und Abschnitte.

Fazit: Barrierefreiheit ist kein Extra, sondern Standard

Barrierefreiheit ist nicht nur eine rechtliche Pflicht, sondern auch eine Chance, mehr Kunden zu erreichen. Mit den richtigen Schritten können Sie Ihre BigCommerce-Website schnell und einfach barrierefrei gestalten. Beginnen Sie mit den Grundlagen, testen Sie regelmäßig und nutzen Sie die Tools, die Ihnen zur Verfügung stehen. Jeder kleine Schritt bringt Sie näher an eine inklusive Website.

Haben Sie Fragen oder Tipps? Teilen Sie sie in den Kommentaren. Wir freuen uns auf Ihren Beitrag!