> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/mehr-wissen/barrierefreiheit.md). # Barrierefreiheit ThemeWare® ist bereits barrierefrei nach den Kriterien von PageSpeed Insights, wie du unter folgendem Link einsehen kannst: {% embed url="" %} ## 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. {% 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 abonniere den ThemeWare® [Update Newsletter](https://service.themeware.design/news#update-newsletter). {% endhint %} *** ## 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](https://service.themeware.design/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®**](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 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. {% hint style="success" %} **Tipp**: Wie du Updates sicher durchführst, zeigt dir der [Update-Leitfaden](/wissensdatenbank/grundwissen/update-leitfaden.md). {% endhint %} *** ## Weiterführende Informationen Mehr Informationen zum Thema "BFSG" haben wir in einem News-Artikel in unserem Service Portal für dich zusammengestellt: {% embed url="" %}