Barrierefreiheit
ThemeWare® ist bereits barrierefrei nach den Kriterien von PageSpeed Insights, wie du unter folgendem Link einsehen kannst:
Hinweis: Die neuen Anforderungen der WCAG 2.1 AA erfüllt Shopware derzeit noch nicht. Shopware arbeitet aber bereits mit Hochdruck an den nötigen Anpassungen der Storefront und hat bereits einige Verbesserungen umgesetzt. Ziel ist es mit Version 6.7, vor der gesetzlich vorgeschriebenen Frist des Barrierefreiheitsstärkungsgesetzes vollständig vorbereitet zu sein.
Barrierefreiheitsstärkungsgesetzes (BFSG)
Die Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments über die Anforderungen an die Barrierefreiheit von Produkten und Dienstleistungen wird bis zum 28. Juni 2025 in nationales Recht umgesetzt.
Shopware plant, bis dahin die notwendigen technischen Anpassungen im Shopware Core bereitzustellen. Wir werden diese Anpassungen selbstverständlich unterstützen, ThemeWare® darüber hinaus optimieren und bei Bedarf zusätzliche Barrierefreiheits-Konfigurationen in ThemeWare® für Shopware 6.7 anbieten.
Darüber hinaus werden wir hier Anleitungen, Tipps und Hinweise zur individuellen Umsetzung der Barrierefreiheitsanforderungen bereitstellen, um dir den Prozess so reibungslos wie möglich zu gestalten.
In Shopware 6.6 wird zudem die Feature-Flag ACCESSIBILITY_TWEAKS aktiviert werden können, um die neuen Anforderungen zu erfüllen. Diese Feature-Flag wird mit einem kommenden Update auch von ThemeWare® unterstützt werden.
Tipp: Für aktuelle Ankündigungen zu geplanten Releases schaue regelmäßig in den Bereich "Neuigkeiten und Ankündigungen" im ThemeWare® Service Portal und abboniere den ThemeWare® Update Newsletter.
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.
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?
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.
Barrierefreies System
Shopware plant die Anforderungen der WCAG 2.1 AA vor der gesetzlich vorgeschriebenen Frist des Barrierefreiheitsstärkungsgesetzes mit Version 6.7 vollständig zu erfüllen. Von deinem ThemeWare® Theme wird es dann ebenfalls eine kompatible und konforme Version für Shopware 6.7 geben.
Zudem wird ThemeWare® für Shopware 6.6 mit einem kommenden Update auch die Feature-Flag ACCESSIBILITY_TWEAKS unterstützten.
Hinweis: Wir wissen, dass viele von euch gespannt auf Updates zur Barrierefreiheit warten. Aktuell gibt es noch keinen festen Termin für Shopware 6.7. Sobald es Neuigkeiten gibt, erfährst du es als Erstes! Abonniere einfach unseren Update Newsletter., um rechtzeitig informiert zu werden.
Weiterführende Informationen
Mehr Informationen zum Thema "BFSG" haben wir in einem News-Artikel in unserem Service Portal für dich zusammengestellt:
Last updated
Was this helpful?