Es ist Montagmorgen, du sitzt im Meeting mit deinem Team – und plötzlich fällt die Frage: „Mussten wir bis zum 28. Juni 2025 barrierefrei sein? Und was bedeutet das eigentlich konkret für unseren Shopware-6-Shop?" Wenn du dafür Unterstützung brauchst, kann eine Shopware Agentur helfen, die offenen Baustellen schnell zu strukturieren. Die Stimmung kippt von entspannt zu angespannt. Denn obwohl du schon von digitaler Barrierefreiheit gehört hast, ist dir nicht ganz klar, wo du anfangen sollst. Checkout per Tastatur bedienbar? Alt-Texte für alle Produktbilder? Kontraste prüfen? Screenreader-Tests? Die To-do-Liste wird länger, die Zeit bis zur gesetzlichen Deadline kürzer – und die Unsicherheit größer.
Genau hier setzt dieser Artikel an. Wir zeigen dir Schritt für Schritt, was Shopware 6 barrierefrei in der Praxis bedeutet, welche rechtlichen Rahmenbedingungen du kennen musst, welche Features Shopware bereits mitbringt und wo du selbst Hand anlegen solltest. Du erfährst, welche konkreten Maßnahmen wirklich zählen, wie du deinen Shop systematisch testest und wie du die häufigsten Fehler vermeidest. Am Ende hast du einen klaren Plan, mit dem du rechtzeitig und rechtssicher lieferst – und gleichzeitig mehr Menschen erreichst, Kaufabbrüche senkst und dein Markenimage stärkst.
Was Shopware 6 barrierefrei für deinen Shop bedeutet
Wenn du „Shopware 6 barrierefrei" hörst, denkst du vielleicht zuerst an technische Details oder komplizierte Richtlinien. Doch im Kern geht es um etwas sehr Einfaches: Dein Onlineshop soll für alle Menschen nutzbar sein – unabhängig davon, ob jemand eine Sehbeeinträchtigung hat, motorische Einschränkungen mitbringt oder vorübergehend nur eine Hand frei hat. Barrierefreiheit bedeutet, dass deine Inhalte wahrnehmbar, bedienbar, verständlich und robust sind – auf jedem Gerät, in jedem Browser und mit jeder assistiven Technologie.
Konkret heißt das: Deine Produktbilder brauchen aussagekräftige Alt-Texte, damit Screenreader-Nutzer wissen, was darauf zu sehen ist. Deine Formulare im Checkout benötigen klare Labels, damit jede Eingabe verständlich bleibt. Deine Navigation muss per Tastatur funktionieren, damit niemand auf die Maus angewiesen ist. Und deine Farbkontraste sollten hoch genug sein, damit Texte auch bei Sonneneinstrahlung auf dem Smartphone lesbar bleiben. All diese Maßnahmen verbessern nicht nur die Zugänglichkeit für Menschen mit Behinderungen, sondern steigern die Usability für alle Nutzer.
Die gute Nachricht: Shopware 6 bringt bereits eine solide technische Basis mit. Semantisches HTML, strukturierte Daten und eine durchdachte Template-Architektur sind von Haus aus vorhanden. Mit Version 6.6 wurden zudem umfangreiche Verbesserungen im Standard-Theme eingeführt – von optimierter Tastaturbedienbarkeit über Screenreader-Unterstützung bis hin zu besseren Farbkontrasten. Allerdings musst du diese Features in Shopware 6.6 aktuell noch manuell aktivieren, etwa über das Feature-Flag ACCESSIBILITY_TWEAKS in der .env-Datei. Ab Shopware 6.7, das voraussichtlich im Mai 2025 erscheint, sind diese Funktionen standardmäßig aktiv – rechtzeitig vor der gesetzlichen Deadline.
Die weniger gute Nachricht: Barrierefreiheit ist kein reines Theme-Thema. Ein Großteil hängt von deinen individuellen Anpassungen, deinem Content und deinen Plugins ab. Wenn du ein Custom Theme nutzt, musst du sicherstellen, dass deine Twig-Templates, SCSS-Variablen und JavaScript-Komponenten barrierefrei gestaltet sind. Wenn du Plugins einsetzt – etwa für Filter, Slider, Cookie-Banner oder Modals – können diese schnell neue Barrieren einbauen, selbst wenn das Standard-Theme konform ist. Und wenn dein Content-Team Produktbeschreibungen ohne Alt-Texte hochlädt, Videos ohne Untertitel einbindet oder Linktexte wie „Hier klicken" verwendet, nützt dir das beste Theme nichts.
Erwartungsmanagement ist also wichtig: Shopware hilft dir enorm – aber übernimmt nicht alles automatisch. Du bist verantwortlich für die finale Umsetzung, für Content-Qualität, für Plugin-Audits und für regelmäßige Tests. Und genau deshalb lohnt es sich, jetzt systematisch vorzugehen, damit du am 28. Juni 2025 nicht nur rechtlich abgesichert bist, sondern auch von den wirtschaftlichen Vorteilen profitierst: mehr Reichweite, weniger Kaufabbrüche, bessere Conversion und ein stärkeres Markenimage.
Rechtlicher Rahmen: BFSG ab 28. Juni 2025
Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Es ist die deutsche Umsetzung des European Accessibility Act (EAA), einer EU-Richtlinie, die für alle Mitgliedsstaaten bestimmte Mindeststandards vorgibt. Das BFSG regelt, wie diese Vorgaben in Deutschland konkret umzusetzen sind.
Das Gesetz richtet sich grundsätzlich an Onlineshops, die Endkunden (B2C) beliefern. Wenn dein Shop Produkte oder Dienstleistungen an Privatkunden verkauft, bist du mit hoher Wahrscheinlichkeit betroffen. Reine B2B-Shops sind derzeit häufig nicht im Fokus oder teils ausgenommen – allerdings solltest du die Entwicklung im Auge behalten, da sich die Rechtslage ändern kann. Wenn dein Shop sowohl an Unternehmen als auch an Privatkunden verkauft, gilt: sobald Endkunden adressiert werden, ist Barrierefreiheit relevant.
Es gibt jedoch Ausnahmen, die für manche Unternehmen greifen können. Häufig genannt werden Kleinstunternehmen mit weniger als 10 Mitarbeitenden und einem Jahresumsatz oder einer Bilanzsumme unter 2 Millionen Euro. Weitere mögliche Ausnahmen betreffen Fälle, in denen die Umsetzung der Barrierefreiheit die Leistungsfähigkeit des Unternehmens gefährdet, den eigentlichen Zweck des Angebots beeinträchtigt oder ein wirtschaftliches Risiko darstellt. Diese Informationen sind jedoch keine verbindliche Rechtsberatung, sondern allgemeine Hinweise. Ob du tatsächlich ausgenommen bist, hängt immer von deinem konkreten Einzelfall ab – im Zweifel solltest du dich juristisch beraten lassen.
Wer die gesetzlichen Vorgaben ignoriert, riskiert Sanktionen und Strafen. Die genauen Konsequenzen sind noch nicht in allen Details ausformuliert, doch das Risiko ist real. Unabhängig von einer rechtlichen Pflicht solltest du Barrierefreiheit jedoch als Chance betrachten: Wer sich frühzeitig darum kümmert, profitiert von einer größeren Zielgruppe, zufriedeneren Kunden und einem stärkeren Markenauftritt – und vermeidet gleichzeitig mögliche rechtliche Risiken.
Richtlinien zur Orientierung: WCAG und BITV
Um zu verstehen, was „barrierefrei" konkret bedeutet, lohnt sich ein Blick auf die internationalen und nationalen Richtlinien, an denen sich die Anforderungen orientieren. Die wichtigste Referenz sind die Web Content Accessibility Guidelines (WCAG) – ein internationaler Standard, der von der Web Accessibility Initiative (WAI) des W3C entwickelt wurde. Die WCAG definieren klare Kriterien für barrierefreie Webinhalte und sind weltweit anerkannt.
In Deutschland kommt zudem die Barrierefreie-Informationstechnik-Verordnung (BITV) ins Spiel, die sich ebenfalls stark an den WCAG orientiert und für öffentliche Stellen verbindlich ist. Auch wenn dein Shop nicht direkt unter die BITV fällt, bietet sie eine wertvolle Orientierung für die praktische Umsetzung. Als Zielniveau wird häufig WCAG 2.1 Level AA empfohlen – ein realistischer und gut erreichbarer Standard, der einen Großteil der relevanten Anforderungen abdeckt.
Wichtig ist: Es geht nicht darum, ein „Zertifikat um jeden Preis" zu bekommen, sondern darum, deinen Shop nachweisbar zugänglich zu machen. Automatisierte Tools wie Lighthouse oder WAVE helfen dir, die Konformität zu prüfen – doch sie ersetzen nicht die manuelle Überprüfung durch echte Nutzer und realistische Testszenarien. Nur so stellst du sicher, dass wirklich alle Barrieren beseitigt sind.
Die 4 WCAG-Prinzipien: Dein roter Faden
Die WCAG basieren auf vier grundlegenden Prinzipien, die als POUR abgekürzt werden: Perceivable (Wahrnehmbar), Operable (Bedienbar), Understandable (Verständlich) und Robust (Robust). Diese Prinzipien sind dein roter Faden, wenn du deinen Shop barrierefrei gestaltest – egal ob du Designer, Entwickler, Content-Manager oder Projektleiter bist.
Wahrnehmbar (Perceivable)
Alle Inhalte müssen für Menschen mit unterschiedlichen Einschränkungen wahrnehmbar sein. Das bedeutet konkret:
- Farbkontraste: Texte und Hintergründe müssen ausreichend hohe Kontraste aufweisen (mindestens 4,5:1 für normalen Text, 3:1 für große Texte). So bleiben Inhalte auch bei eingeschränktem Sehvermögen lesbar.
- Alternativtexte für Bilder: Jedes inhaltstragende Bild braucht einen beschreibenden Alt-Text, damit Screenreader-Nutzer verstehen, was darauf zu sehen ist. Rein dekorative Bilder erhalten ein leeres alt="", damit Screenreader sie überspringen.
- Untertitel und Transkripte: Videos und Audioinhalte benötigen Untertitel oder Transkriptionen, damit alle Informationen auch ohne Ton verfügbar sind.
Bedienbar (Operable)
Dein Shop muss ohne Maus bedienbar sein, damit Personen mit motorischen Einschränkungen, die Tastatur oder andere Hilfsmittel nutzen, ebenfalls einkaufen können. Achte auf:
- Klare Fokuszustände: Zeige deutlich, welches Element aktuell den Fokus hat – etwa durch eine sichtbare Umrandung oder Farbänderung.
- Erkennbare Schaltflächen: Buttons und Links sollten sich optisch abheben und klar beschriftet sein.
- Tastatur-Navigation: Überprüfe, ob sich alle Bereiche und Aktionen per Tab-Taste ansteuern lassen. Keine Fokus-Fallen in Offcanvas-Menüs, Modals oder Cookie-Bannern.
- Ausreichend Zeit: Nutzer sollten genug Zeit für Eingaben und Aktionen haben, ohne unter Druck gesetzt zu werden.
Verständlich (Understandable)
Inhalte und Bedienung müssen klar und nachvollziehbar sein. Das umfasst:
- Einfache Sprache: Vermeide Fachjargon und komplizierte Sätze. Erkläre Abkürzungen und Fachbegriffe.
- Klare Labels: Jedes Formularfeld braucht ein Label, nicht nur einen Placeholder. Fehlermeldungen sollten konkret und verständlich sein.
- Vorhersehbares Verhalten: Keine überraschenden Pop-ups oder Layout-Änderungen ohne Vorankündigung. Navigation und Interaktionen sollten konsistent und erwartbar sein.
- Logische Überschriftenstruktur: H1, H2, H3 in sinnvoller Reihenfolge, ohne Sprünge.
Robust (Robust)
Dein Shop muss auf verschiedenen Browsern, Geräten und mit assistiven Technologien zuverlässig funktionieren. Das bedeutet:
- Kompatibilität: Teste deinen Shop regelmäßig in verschiedenen Browsern (Chrome, Firefox, Safari, Edge) sowie auf Tablets und Smartphones.
- Saubere Semantik: Verwende HTML-Tags korrekt (Buttons für Aktionen, Links für Navigation). Setze ARIA nur gezielt ein, wenn HTML allein nicht ausreicht.
- Regelmäßige Updates: Nach Theme- oder Plugin-Updates können neue Barrieren entstehen – deshalb sind Regressionstests Pflicht.
Was Shopware 6 mitbringt und wo du selbst ran musst
Shopware 6 bietet dir eine solide Grundlage für barrierefreie Shops. Semantisches HTML, strukturierte Daten und eine durchdachte Template-Architektur sind von Anfang an vorhanden. Mit Version 6.6 wurden umfangreiche Anpassungen im Standard-Theme vorgenommen, die speziell auf Barrierefreiheit ausgerichtet sind. Dazu gehören:
- Tastaturbedienbarkeit: Filter-Panels, Paginierungen sowie die Sprach- und Währungsauswahl sind per Tastatur bedienbar.
- Screenreader-Unterstützung: Interaktive Symbole und Bewertungssterne besitzen Alt-Texte, die von Screenreadern vorgelesen werden.
- Optimierte Farbkontraste: Die Standard-Farbpalette wurde überarbeitet, um bessere Lesbarkeit zu gewährleisten. Warnmeldungen und Alerts wurden neu gestaltet.
Allerdings: In Shopware 6.6 müssen diese Verbesserungen manuell aktiviert werden, etwa über die Konfiguration oder das Feature-Flag ACCESSIBILITY_TWEAKS in der .env-Datei. Ab Shopware 6.7 (voraussichtlich Mai 2025) sind diese Funktionen standardmäßig aktiv – rechtzeitig vor der BFSG-Deadline am 28. Juni 2025.
Doch selbst mit einem konformen Standard-Theme bist du nicht automatisch fertig. Barrierefreiheit ist kein reines Theme-Thema, sondern hängt stark von folgenden Faktoren ab:
- Custom Themes: Wenn du ein individuelles Theme nutzt, musst du sicherstellen, dass deine Twig-Templates, SCSS-Variablen und JavaScript-Komponenten barrierefrei sind.
- Plugins: Erweiterungen für Filter, Slider, Cookie-Banner, Modals oder Checkout-Prozesse können schnell neue Barrieren einbauen – selbst wenn das Theme konform ist.
- Content: Alt-Texte, Linktexte, Überschriften, Videos, PDFs – all das liegt in der Verantwortung deines Content-Teams.
- Konfiguration: Farben, Schriftgrößen, Button-Größen, Formular-Labels – viele Einstellungen nimmst du selbst vor.
Erwartungsmanagement: Shopware hilft dir enorm – aber du bist für die finale Umsetzung verantwortlich. Deshalb ist es wichtig, systematisch vorzugehen und alle Ebenen (Design, Content, Technik, Prozesse) im Blick zu behalten.
Shopware-Versionen: Was du bis 2025 beachten musst
Die Shopware-Version, die du nutzt, hat direkten Einfluss darauf, wie gut du für die BFSG-Deadline vorbereitet bist. Hier ein Überblick:
Shopware 5
Der Support für Shopware 5 wurde bereits im Juli 2024 eingestellt. Es gibt offiziell keine neuen Updates mehr – insbesondere keine Features zur Umsetzung barrierefreier Shops. Wenn du noch auf Shopware 5 läufst, ist jetzt der richtige Zeitpunkt für einen Umstieg auf Shopware 6. Andernfalls riskierst du nicht nur rechtliche Probleme, sondern auch Sicherheitslücken und veraltete Technologie. Wenn du den Wechsel planst, hilft dir auch ein strukturierter Shopware-Umzug, typische Stolpersteine früh zu vermeiden.
Shopware 6.6
Mit Shopware 6.6 wurden umfangreiche Anpassungen für Barrierefreiheit im Standard-Theme eingeführt. Diese müssen jedoch noch manuell aktiviert werden – etwa über das Feature-Flag ACCESSIBILITY_TWEAKS in der .env-Datei. Prüfe auch alle individuellen Anpassungen in Themes und Plugins, um sicherzustellen, dass sie ebenfalls barrierefrei sind.
Shopware 6.7 (voraussichtlich Mai 2025)
Mit der nächsten Major-Version Shopware 6.7, die voraussichtlich im Mai 2025 erscheint, werden die Barrierefreiheitsfunktionen im Standard-Theme standardmäßig aktiv sein. Das bedeutet: Wer auf 6.7 upgradet, profitiert automatisch von den Verbesserungen – ohne manuelle Konfiguration. Dennoch bleiben individuelle Anpassungen, Content und Plugins in deiner Verantwortung.
Die wichtigsten Baustellen in echten Shopware-Projekten
In der Praxis zeigen sich immer wieder dieselben Herausforderungen, wenn es um die Umsetzung von Shopware 6 barrierefrei geht. Hier sind die wichtigsten Bereiche, die du systematisch angehen solltest:
Theme und Design
- Farbkontraste: Mindestens 4,5:1 für normalen Text, 3:1 für große Texte.
- Schriftgrößen und Zeilenhöhe: Achte auf gute Lesbarkeit, auch bei Zoom auf 200 Prozent.
- Klick- und Touchflächen: Buttons und Links sollten ausreichend groß sein (mind. 44×44 Pixel).
- Hover- und Focus-States: Sichtbar, konsistent und klar erkennbar.
- Keine Information nur über Farbe: Fehler sollten nicht nur rot markiert sein, sondern auch durch Text oder Icons verdeutlicht werden.
Navigation und Interaktion
- Tastaturbedienbarkeit: Alle Bereiche müssen per Tab-Taste erreichbar sein. Die Tab-Reihenfolge sollte logisch sein.
- Skip-to-Content-Link: Ein versteckter Link am Seitenanfang, der es Tastatur-Nutzern ermöglicht, direkt zum Hauptinhalt zu springen.
- Keine Fokus-Fallen: Modals, Offcanvas-Menüs und Cookie-Banner dürfen den Fokus nicht einsperren.
- Keine überraschenden Layoutsprünge: Pop-ups oder automatische Änderungen sollten angekündigt werden.
Content und Redaktion
Dieser Bereich wird oft unterschätzt, ist aber entscheidend:
- Alt-Texte für Produktbilder: Beschreibe den Inhalt sinnvoll und kontextbezogen. Rein dekorative Bilder erhalten ein leeres alt="".
- Videoinhalte: Untertitel oder Transkripte bereitstellen.
- PDFs und Downloads: Barrierefreie PDFs anbieten oder HTML-Alternativen schaffen.
- Überschriftenstruktur: H1-H2-H3 logisch verwenden, keine Sprünge.
- Einfache Sprache: Klare Formulierungen, Abkürzungen erklären.
- Linktexte: Nicht „Hier klicken", sondern sprechend: „Versandkosten ansehen".
Formulare und Checkout
- Labels für alle Eingaben: Nicht nur Placeholder verwenden.
- Fehlerzustände: Verständlich, konkret, direkt am Feld und zusammenfassend am Anfang.
- Ausreichend große Buttons: Klar beschriftet und gut erreichbar.
- Fokus-Management: Bei Fehlern sollte der Fokus zur Fehlermeldung springen.
Technik und Robustheit
- Kompatibilität: Teste mit verschiedenen Browsern, Screenreadern und Geräten.
- Regressionstests: Nach jedem Update prüfen, ob Barrieren wieder eingebaut wurden.
- Saubere Semantik: Buttons für Aktionen, Links für Navigation. ARIA nur gezielt einsetzen.
Alt-Texte und ARIA richtig einsetzen
Alt-Texte und ARIA-Attribute sind zwei zentrale Werkzeuge für Barrierefreiheit – doch sie werden oft falsch verwendet. Hier die wichtigsten Regeln:
Alt-Texte richtig schreiben
Der Alt-Text beschreibt den Zweck oder Inhalt eines Bildes im jeweiligen Kontext. Er sollte nicht einfach der Dateiname sein, sondern eine sinnvolle Beschreibung liefern. Wenn neben dem Bild bereits ein erklärender Text steht, kann der Alt-Text leer bleiben (alt=""), um Dopplungen zu vermeiden.
Ein häufiger Fehler: Wenn ein Link nur aus einem Bild besteht (z. B. ein Logo oder Icon), reicht der Alt-Text am Bild nicht aus, um den Zweck des Links zu erklären. In diesem Fall sollte der Link selbst ein aria-label erhalten, das die Funktion oder das Ziel des Links beschreibt. Das Bild selbst erhält dann ein leeres alt="", damit der Screenreader nur das aria-label liest und nicht redundante Informationen ausgibt.
ARIA gezielt einsetzen
ARIA (Accessible Rich Internet Applications) ist kein Pflaster für schlechtes HTML. Setze ARIA-Attribute nur ein, wenn HTML allein nicht ausreicht. Ein gut formulierter Alt-Text kann nicht vollständig den Zweck eines Links ersetzen, wenn das Bild alleiniger Linkinhalt ist. Nur ein aria-label am Link selbst stellt sicher, dass Screenreader-Nutzer die Funktion und Zielrichtung klar verstehen – unabhängig vom Bildinhalt.
Schritt-für-Schritt-Plan: So machst du deinen Shop barrierefrei
Jetzt wird es konkret. Hier ist deine Roadmap zur Umsetzung von Shopware 6 barrierefrei – Schritt für Schritt, praxisnah und umsetzbar.
Schritt 1: Status klären
- B2C/B2B-Einordnung: Verkaufst du an Endkunden?
- Kleinstunternehmen prüfen: Weniger als 10 Mitarbeitende, Umsatz unter 2 Mio. Euro?
- Shopware-Version prüfen: Shopware 5, 6.6 oder 6.7?
- Theme und Plugins dokumentieren: Welche individuellen Anpassungen hast du?
Schritt 2: Quick-Check (automatisiert)
Nutze automatisierte Tools für einen ersten Überblick, z. B. im Rahmen eines strukturierten Shopware-Checks:
- Lighthouse: Accessibility-Score prüfen (inkl. Performance).
- Browser-Plugins: axe DevTools, WAVE – erkennen häufige Probleme wie fehlende Labels, Kontrastfehler, Semantikfehler.
- Markup-Validierung: HTML-Fehler aufdecken.
Schritt 3: Manuelle Tests (Pflicht)
Automatisierte Tools erkennen nicht alles. Deshalb sind manuelle Tests unverzichtbar:
- Tastatur-only Test: Navigiere durch den Shop nur mit Tab, Shift+Tab, Enter, Space, Esc. Achte auf sichtbare Fokuszustände und logische Reihenfolge.
- Screenreader-Test: Teste mindestens die wichtigsten Seiten (Startseite, Kategorie, Produkt, Warenkorb, Checkout) mit einem Screenreader (z. B. NVDA, JAWS, VoiceOver).
- Zoom-Test: Zoome auf 200 Prozent und 400 Prozent. Ist alles noch lesbar und bedienbar?
- Mobile Ansicht: Teste auf Smartphone und Tablet. Sind alle Touch-Elemente ausreichend groß?
Schritt 4: Findings priorisieren
Nicht alle Probleme sind gleich wichtig. Priorisiere nach Schwere:
- Blocker: Checkout nicht nutzbar, Navigation nicht bedienbar → sofort beheben.
- Quick Wins: Alt-Texte, Linktexte, Kontrast-Variablen → schnell umsetzbar, großer Effekt.
- Strukturthemen: Templates, Komponenten, Plugin-Konflikte → langfristig planen.
Schritt 5: Umsetzen in Shopware
- Standard-Theme-Verbesserungen aktivieren (Feature-Flag ACCESSIBILITY_TWEAKS in .env).
- Custom Theme/Twig/SCSS Anpassungen planen und umsetzen.
- Plugin-Audit: Welche Erweiterung bricht Semantik, Fokus oder Modals? Ggf. Alternativen suchen oder anpassen.
Schritt 6: Regression- und Release-Prozess etablieren
- Tests nach jedem Update, Theme-Change oder neuen Plugin-Release.
- Checkliste als Definition of Done für neue CMS-Blöcke, Landingpages, Kampagnen.
Schritt 7: Dokumentation und interne Prozesse
- Redaktionsleitfaden für Alt-Texte, Überschriften, Linktexte erstellen.
- Verantwortlichkeiten klären: Wer prüft Content, wer prüft Technik?
Shopware-spezifische Praxis-Hinweise
Hier sind einige shopware-spezifische Tipps, die dir in der Praxis wirklich weiterhelfen:
- Accessibility-Verbesserungen können „da sein", aber müssen ggf. aktiviert werden (Shopware 6.6).
- Standardkonformität hängt stark an CMS-Inhalten (Bilder, Banner, Video), Erlebniswelten/Shopping Experiences (Blöcke können falsch eingesetzt werden) und individuellen Templates/Plugins (Modals, Slider, Filter, Cookie-Tools).
- „Theme macht nur einen Teil" – Content und Konfiguration sind oft der größere Hebel.
Messung und Testing: Welche Tools was leisten
Automatisierte Tools sind gut für einen ersten Überblick – aber sie ersetzen keine manuellen Tests. Hier eine Übersicht:
| Tool | Was es leistet | Grenzen |
|---|---|---|
| Lighthouse | Accessibility-Score, Performance, Best Practices | Erkennt nur technische Fehler, keine Usability-Probleme |
| axe DevTools / WAVE | Kontraste, fehlende Labels, Semantikfehler | Keine Prüfung von Fokus-Reihenfolge oder Screenreader-Ansagen |
| Color Contrast Checker | Kontrastprüfung nach WCAG | Nur Farben, keine Gesamtprüfung |
| Markup Validator | HTML-Fehler, Semantik | Keine Barrierefreiheits-Prüfung im engeren Sinn |
Wichtig: Hohe Performance (Page-Speed) verbessert auch die Zugänglichkeit – weniger Friktion, stabilere Bedienung, schnellere Ladezeiten für alle Nutzer.
Warum sich Barrierefreiheit wirtschaftlich lohnt
Barrierefreiheit ist nicht nur eine gesetzliche Pflicht – sie ist auch ein wirtschaftlicher Vorteil. Hier die wichtigsten Argumente:
- Größere Zielgruppe: In Deutschland leben rund 7,8 Millionen Menschen mit anerkannter Schwerbehinderung. Viele von ihnen nutzen das Internet überdurchschnittlich intensiv und sind eine relevante Kundengruppe.
- Bessere Conversion: Eine klare Navigation, verständliche Formulare und eine intuitive Bedienung senken Kaufabbrüche und steigern die Conversion – für alle Nutzer, nicht nur für Menschen mit Behinderungen.
- Weniger Support-Anfragen: Wenn der Checkout funktioniert, Buttons erreichbar sind und Fehler verständlich erklärt werden, sinken die Support-Anfragen.
- SEO-Nutzen: Saubere HTML-Strukturen, Alt-Texte und klare Semantik helfen Suchmaschinen bei der Indexierung. Barrierefreie Shops werden häufig besser bewertet.
- Markenwirkung: Ein inklusiver Shop signalisiert Verantwortung, Professionalität und Wertschätzung – das stärkt dein Markenimage.
Typische Fehler und Mythen vermeiden
In der Praxis begegnen uns immer wieder dieselben Missverständnisse. Hier die häufigsten Fehler – und wie du sie vermeidest:
- „Ein Plugin macht den Shop in 1 Klick barrierefrei": Falsch. Barrierefreiheit ist kein Feature, das man einfach aktiviert. Es ist ein Prozess, der Design, Content, Technik und Prozesse umfasst.
- „Wenn das Theme barrierefrei ist, sind wir fertig": Falsch. Content, Plugins und individuelle Anpassungen sind mindestens genauso wichtig.
- „Automatisierte Tools reichen": Falsch. Manuelle Tests sind unverzichtbar, um echte Barrieren aufzudecken.
- „Barrierefreiheit = nur Kontrast": Falsch. Es geht auch um Tastatur, Formulare, Struktur, Semantik und Robustheit.
- „B2B ist immer safe": Nicht unbedingt. Graubereiche und Mischformen gibt es. Außerdem kann sich die Rechtslage ändern.
Konkrete Beispiele aus dem Shop-Alltag
Um das Thema noch greifbarer zu machen, hier einige typische Szenarien, die dir zeigen, warum Barrierefreiheit so wichtig ist:
- Tastatur-Navigation: Ein Nutzer navigiert per Tastatur durch dein Filter-Panel. Der Fokus ist unsichtbar – er weiß nicht, wo er gerade ist. Frustriert bricht er den Kauf ab.
- Screenreader: Ein Screenreader-Nutzer landet auf einem Icon-Only-Link ohne Label. Der Screenreader sagt: „Link" – aber nicht wohin er führt. Der Nutzer ist verwirrt.
- Produktvideo: Ein Video erklärt die Produktvorteile – aber es gibt keine Untertitel. Hörbehinderte Nutzer verpassen wichtige Informationen.
- Fehlermeldung: Im Checkout wird ein Feld nur rot markiert – aber es gibt keinen Text, der erklärt, was falsch ist. Der Nutzer versteht nicht, was er tun soll.
Rollen und Verantwortlichkeiten: Wer macht was?
Barrierefreiheit ist ein Teamsport. Hier eine Übersicht, wer welche Aufgaben hat:
- Entwickler: Semantik, Fokus, ARIA, Komponenten, Modals, Tastatur-Navigation.
- Designer: Kontrast, Typografie, Interaktionsstates, Schriftgrößen, Button-Größen.
- Content-Team: Alt-Texte, Überschriften, Linktexte, Sprache, Medien (Videos, PDFs).
- E-Commerce/Projektleitung: Priorisierung, Timeline bis 28.06.2025, Acceptance-Kriterien, Budgetplanung.
Praxis-Beispiel: Rhein-Neckar Löwen Fanshop
Ein konkretes Beispiel für die Umsetzung von Shopware 6 barrierefrei ist der Onlineshop der Rhein-Neckar Löwen. Der Fanshop wurde technisch und gestalterisch so überarbeitet, dass er auch für Menschen mit Einschränkungen optimal nutzbar ist. Von besserer Tastaturbedienbarkeit über Screenreader-Kompatibilität bis hin zu optimierten Farbkontrasten – das Projekt zeigt, wie Barrierefreiheit in der Praxis aussieht und bietet wertvolle Einblicke für dein eigenes Projekt.
Fazit: Dein Plan steht – jetzt geht's los
Barrierefreiheit ist keine Option mehr, sondern eine Notwendigkeit. Das Barrierefreiheitsstärkungsgesetz tritt am 28. Juni 2025 in Kraft – und du solltest jetzt handeln, um rechtzeitig vorbereitet zu sein. Shopware 6 bietet dir mit Version 6.6 und dem kommenden Release 6.7 eine solide technische Basis, die viele Anforderungen bereits abdeckt. Doch Barrierefreiheit endet nicht beim Theme – sie umfasst Design, Content, Technik, Prozesse und vor allem: kontinuierliche Tests und Anpassungen.
Mit dem Schritt-für-Schritt-Plan aus diesem Artikel hast du eine klare Roadmap, um deinen Shop systematisch barrierefrei zu machen. Du weißt jetzt, welche rechtlichen Rahmenbedingungen gelten, welche Prinzipien (POUR) dich leiten, welche konkreten Maßnahmen du ergreifen musst und wie du deinen Shop testest. Du kennst die häufigsten Fehler und weißt, wie du sie vermeidest. Und du hast verstanden, dass Barrierefreiheit nicht nur eine gesetzliche Pflicht ist, sondern auch ein wirtschaftlicher Vorteil: mehr Reichweite, weniger Kaufabbrüche, bessere Conversion und ein stärkeres Markenimage.
Jetzt liegt es an dir. Beginne mit dem Quick-Check, priorisiere deine Findings, setze die wichtigsten Maßnahmen um und etabliere einen kontinuierlichen Test- und Release-Prozess. So erreichst du nicht nur die gesetzlichen Anforderungen, sondern bietest allen Menschen – mit oder ohne Einschränkungen – ein erstklassiges Einkaufserlebnis. Wenn du dabei zusätzliche Expertise brauchst, sind Shopware-6-Best-Practices eine gute Ergänzung, um typische Umsetzungsfehler zu vermeiden. Dein Plan steht, die nächsten Schritte sind klar. Jetzt geht's los.
Rechtlicher Hinweis: Dieser Text ersetzt keine Rechtsberatung. Bei Fragen zum Gesetz oder zur Umsetzung der Barrierefreiheit empfiehlt es sich, professionellen Rat einzuholen.
