# Barrierefreiheit ThemeWare® ist bereits barrierefrei nach den Kriterien von PageSpeed Insights, wie du unter folgendem Link einsehen kannst: {% embed url="" %} > **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. {% hint style="success" %} **Tipp**: Für aktuelle Ankündigungen zu geplanten Releases schaue regelmäßig in den Bereich "[Neuigkeiten und Ankündigungen](https://service.themeware.design/news)" im ThemeWare® Service Portal und abboniere den ThemeWare® [Update Newsletter](https://service.themeware.design/news#update-newsletter). {% endhint %} *** ## 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®**](https://service.themeware.design/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**](https://service.themeware.design/eye-able) * **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 leeres `alt=""`-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®**](https://service.themeware.design/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**](https://service.themeware.design/eye-able) ### 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](https://webaim.org/resources/contrastchecker/)) zur Kontrastprüfung, um sicherzustellen, dass deine Farben den gängigen Barrierefreiheitsstandards entsprechen. {% hint style="success" %} **Tipp**: Beachte in diesem Zuge auch Bilder in welchen du Texte platziert hast. {% endhint %} ### 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:** ``` 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:** ```html Versand mit DHL ``` So wird das Bild von Screenreadern ignoriert und der sichtbare Text vorgelesen – **doppelte oder verwirrende Ansagen werden vermieden**. {% hint style="success" %} **Tipp**: Pflege in diesem Zuge auch gleich das `title`-Attribut. {% endhint %}
### 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:** ```html ``` 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. {% hint style="info" %} **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. {% endhint %} ### 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](https://service.themeware.design/news#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: {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.themeware.design/mehr-wissen/barrierefreiheit.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.