ThemeWare® ist bereits barrierefrei nach den Kriterien von PageSpeed Insights, wie du unter folgendem Link einsehen kannst:
Barrierefreiheitsstärkungsgesetzes (BFSG)
Die Richtlinie (EU) 2019/882 des Europäischen Parlaments über die Anforderungen an die Barrierefreiheit von Produkten und Dienstleistungen gilt seit dem 28. Juni 2025 in nationalem Recht.
Shopware hat die dafür nötigen Anpassungen der Storefront mit Version 6.7 bereitgestellt. ThemeWare® baut darauf auf: Wir übernehmen die Anpassungen des Shopware-Core und optimieren darüber hinaus die ThemeWare®-eigenen Elemente.
Tipp: Für aktuelle Ankündigungen zu geplanten Releases schaue regelmäßig in den Bereich "Neuigkeiten und Ankündigungen" im ThemeWare® Service Portal und abonniere den ThemeWare® Update Newsletter.
Was ThemeWare® für dich mitbringt
Einen Teil der Barrierefreiheit übernimmt dein Theme. Diese Punkte musst du nicht selbst umsetzen:
- Sichtbare Fokus-Ringe für die Bedienung per Tastatur – damit ist jederzeit erkennbar, wo du dich gerade befindest.
- Systemeinstellung "Bewegung reduzieren": Wer sie im Betriebssystem aktiviert hat, bekommt die Animationen der CMS-Blöcke, der Slider und des Untermenüs nicht mehr abgespielt. Die Inhalte sind trotzdem vollständig sichtbar, sie erscheinen nur ohne Bewegung.
- Systemeinstellung "Transparenz reduzieren": Modal, Offcanvas, Cookie-Hinweis und Vollbild-Suche verzichten dann auf Transparenz- und Glaseffekte.
- Optimierte ThemeWare®-Elemente: Hero-Slider, Galerie (Grid), Produktbeschreibung & Bewertungen (Akkordeon), Ankündigungsbanner, Floating-Widget, Vollbild-Suche und die Punkt-Navigation der Slider wurden für die Bedienung per Tastatur und Screenreader überarbeitet.
- Konfigurierbare Unterstreichung bestimmter Links, damit Links nicht allein durch Farbe erkennbar sind.
Diese Verbesserungen wachsen mit jedem Release weiter. Welche in deiner Version enthalten sind, siehst du im ThemeWare® Changelog.
Website barrierefrei machen
Das Theme selbst hat nur einen kleinen Anteil an der Barrierefreiheit deines Shops. Ein Großteil wird – ähnlich wie bei SEO und PageSpeed – durch vom Benutzer generierten Content beeinflusst, auf den Themes keinen direkten Einfluss haben.
Mit ThemeWare® können wir dir viel abnehmen, aber nicht alles – denn Barrierefreiheit hängt auch von deinen Einstellungen und Inhalten ab. Du bist verantwortlich für Aspekte wie Alt-Texte, ausreichende Farbkontraste, barrierefreie Audio- und Videoinhalte, verständliche Abkürzungen und eine sinnvolle Überschriftenstruktur. Damit du bestens vorbereitet bist, haben wir die wichtigsten Infos für dich zusammengefasst.
- 1-Klick-Lösungen (Overlays) für Barrierefreiheit
- 1-Klick-Lösungen werden derzeit von vielen Anbietern beworben. Um dich bestmöglich zu unterstützen, haben wir mit Eye-Able® einen Experten ins Boot geholt, der dich mit innovativen Tools und klaren Empfehlungen begleitet. So kannst du deinen Shop barrierefrei und zukunftssicher machen. – Teste Eye-Able® 30 Tage kostenlos und sichere dir zusätzlich einen Gratis-Monat! 👉🏻 Mehr erfahren und kostenlosen WCAG-Check sichern
- Farbkontraste
- Achte bei der Farbkonfiguration auf ausreichend hohe Kontraste zwischen Text und Hintergrund. Zu geringe Kontraste erschweren die Lesbarkeit und können für Menschen mit Sehbeeinträchtigungen problematisch sein.
- Audio und Video barrierefrei
- Da Audio- und Video-Dateien für Menschen mit Seh- oder Hörbehinderung nur schwer nutzbar sind, ist die Barrierefreiheit dieser Inhalte umso wichtiger. Stelle alternative Inhalte wie beschreibende Transkripte zur Verfügung.
- Barrierefreie Bilder
- Überprüfe alle Bilder auf sinnvolle
Alt-Texte. Ausnahme: Rein dekorative Bilder – diese sollten ein leeresalt=""-Attribut haben, damit Screenreader sie überspringen.
- Überprüfe alle Bilder auf sinnvolle
- Barrierefreie Texte
- Verwende eine klare und einfache Sprache und vermeide unnötig komplizierte Wörter und Sätze.
- Barrierefreies System
- Halte sowohl Shopware als auch dein Theme und alle anderen verwendeten Erweiterungen aktuell.
1-Klick-Lösungen (Overlays) für Barrierefreiheit
Zahlreiche kostenlose und kostenpflichtige Tools helfen dir, die Barrierefreiheit zu testen. Um dich bestmöglich zu unterstützen, haben wir mit Eye-Able® einen Experten ins Boot geholt, der dich mit innovativen Tools und klaren Empfehlungen begleitet. So kannst du deinen Shop barrierefrei und zukunftssicher machen. – Teste Eye-Able® 30 Tage kostenlos und sichere dir zusätzlich einen Gratis-Monat!
👉🏻 Mehr erfahren und kostenlosen WCAG-Check sichern
Farbkontraste
Achte bei der Farbkonfiguration auf ausreichend hohe Kontraste zwischen Text und Hintergrund (mind. 4.5:1). Nutze am besten Online-Tools (z.B. den WebAIM Contrast Checker) zur Kontrastprüfung, um sicherzustellen, dass deine Farben den gängigen Barrierefreiheitsstandards entsprechen.
Tipp: Beachte in diesem Zuge auch Bilder in welchen du Texte platziert hast.
Barrierefreie Bilder
Bei inhaltstragenden Bildern, die über den Media-Manager von Shopware eingebunden werden, solltest du direkt im Media-Manager eine Bildbeschreibung als alt-Attribut ergänzen.
Der alt-Text wird von Screenreadern vorgelesen und sollte das Bild für Nutzer:innen beschreiben, die es nicht sehen können. So verstehen auch sehbehinderte oder blinde Personen, welchen Zweck das Bild erfüllt.
Beispiel:
<img src="dhl-logo.svg" alt="Versand mit DHL">Sonderfall: Bild mit sichtbarem Text daneben
Wenn das Bild rein dekorativ ist oder ein beschreibender Text daneben steht, ist ein alt-Attribut zwar weiterhin Pflicht, sollte aber bewusst leer bleiben:
Beispiel:
<img src="dhl-logo.svg" alt="">
<span>Versand mit DHL</span>So wird das Bild von Screenreadern ignoriert und der sichtbare Text vorgelesen – doppelte oder verwirrende Ansagen werden vermieden.
Tipp: Pflege in diesem Zuge auch gleich das title-Attribut.
Barrierefreie Links mit Bildern
Wenn ein Link nur ein Bild enthält (z. B. ein Logo oder Icon ohne sichtbaren Text), reicht ein alt-Attribut im Bild nicht aus, um den Zweck des Links zu vermitteln. In diesem Fall solltest du zusätzlich ein aria-label im Link setzen, das den Zweck des Links beschreibt.
Das Bild selbst erhält ein leeres alt="", da der Screenreader stattdessen den aria-label-Text liest und das Bild rein "dekorativ" ist.
Beispiel:
<a href="/versand" aria-label="Mehr über unseren Versand mit DHL">
<img src="dhl-logo.svg" alt="">
</a>So hört ein Screenreader-Nutzer nur:
"Link: Mehr über unseren Versand mit DHL"
und nicht zusätzlich „Bild: DHL“, was redundant oder unklar wäre.
Warum nicht nur alt verwenden?
Das alt-Attribut gehört zum Bild – nicht zum Link. Ein Bild alleine kann oft nicht den vollständigen Kontext des Links beschreiben, besonders wenn es z. B. ein Logo oder ein Symbol ist. Das aria-label hingegen beschreibt die Funktion des Links und sorgt für eine vollständige, verständliche Ansage für alle Nutzer:innen.
Hinweis: Auch 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 des Links klar verstehen – unabhängig vom Bildinhalt.
Barrierefreies System
Halte Shopware, dein Theme und alle weiteren Erweiterungen aktuell. Die Verbesserungen zur Barrierefreiheit kommen laufend über Updates – im Shopware-Core ebenso wie in ThemeWare®. Ein Shop auf einem alten Stand verpasst sie schlicht.
Tipp: Wie du Updates sicher durchführst, zeigt dir der Update-Leitfaden.
Weiterführende Informationen
Mehr Informationen zum Thema "BFSG" haben wir in einem News-Artikel in unserem Service Portal für dich zusammengestellt: