> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/more-knowledge/accessibility.md). # Accessibility ThemeWare® is already accessible according to the criteria of PageSpeed Insights, as you can see under the following link: {% embed url="" %} *** ## German implementation of the EAA (European Accessibility Act) The **Directive (EU) 2019/882** of the European Parliament and of the Council on the accessibility requirements for products and services (in German "Barrierefreiheitsstärkungsgesetz" – BFSG) has applied in national law since **28 June 2025**. Shopware provided the necessary adaptations of the storefront with version 6.7. ThemeWare® builds on them: we adopt the adaptations of the Shopware core and additionally optimise the ThemeWare® elements. {% hint style="success" %} **Tip**: For the latest announcements on planned releases, regularly check the "[News and Announcements](https://service.themeware.design/en/news)" block in the ThemeWare® Service Portal. {% endhint %} *** ## What ThemeWare® brings along Your theme takes care of part of the accessibility. You do not have to implement these points yourself: * **Visible focus rings** for keyboard operation – so you can always tell where you currently are. * **"Reduce motion" system setting**: if it is activated in the operating system, the animations of the CMS blocks, the sliders and the submenu are no longer played. The content is still fully visible, it just appears without movement. * **"Reduce transparency" system setting**: modal, offcanvas, cookie notice and fullscreen search then do without transparency and glass effects. * **Optimised ThemeWare® elements**: hero slider, gallery (grid), product description & reviews (accordion), announcement banner, floating widget, fullscreen search and the dot navigation of the sliders have been reworked for keyboard and screen reader operation. * **Configurable underlining** of certain links, so that links are not recognisable by colour alone. These improvements keep growing with every release. The [ThemeWare® changelog](https://service.themeware.design/en/changelog) shows which of them are included in your version. *** ## Making your website accessible The theme itself only has a small part to play in the accessibility of your shop. Similar to SEO and PageSpeed, a large part is influenced by user-generated content, over which themes have no direct influence. With ThemeWare®, we can do a lot for you, but not everything - because accessibility also depends on your settings and content. You are responsible for aspects such as alt texts, sufficient colour contrasts, accessible audio and video content, understandable abbreviations and a sensible heading structure. We have summarised the most important information for you so that you are well prepared. * **1-click solutions (overlays) for accessibility** * 1-click solutions are currently being advertised by many providers. We recommend [Eye-Able®](https://eye-able.com/home) for this. You can test Eye-Able® for 30 days free of charge and get an additional month for free with the keyword "ThemeWare". * **Colour contrasts** * When configuring colours, ensure that there is sufficient contrast between the text and the background. Too little contrast makes it difficult to read and can be problematic for people with visual impairments. * **Accessible audio and video** * Since audio and video files are difficult for people with visual or hearing impairments to use, the accessibility of this content is all the more important. Provide alternative content such as descriptive transcripts. * **Accessible images** * Check all images for meaningful `alt` texts. Exception: purely decorative images – these should have an empty `alt=""` attribute so that screen readers skip them. * **Accessible texts** * Use easy-to-understand language and avoid complicated words and sentences. * **Accessible system** * Keep Shopware and your theme, as well as all other extensions used, up to date. ### 1-click solutions (overlays) for accessibility Numerous free and paid tools help you to test accessibility. To provide you with the best possible support, we have brought [Eye-Able®](https://eye-able.com/home) on board as an expert who will guide you with innovative tools and clear recommendations. You can test Eye-Able® for 30 days free of charge and get an additional month for free with the keyword "ThemeWare". ### Colour contrasts When configuring colours, ensure that the contrast between text and background is sufficiently high (at least 4.5:1). It is best to use online tools (e.g. the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)) to check the contrast to ensure that your colours comply with current accessibility standards. Tip: Also note the images in which you have placed text. ### Accessible images For meaningful images that are added via the Shopware Media Manager, you should include a **descriptive `alt` text** directly in the media settings. The `alt` text is read aloud by screen readers and should describe the content or purpose of the image for users who cannot see it. **Example:** ``` Shipping with DHL ``` #### Special case: Image with visible adjacent text If the image is purely **decorative** or if there's a **visible descriptive text next to it**, the `alt` attribute should still be present, but **intentionally left empty**: **Example:** ```html Shipping with DHL ``` This ensures the image is ignored by screen readers and only the visible text is announced — **preventing redundancy or confusion**. {% hint style="success" %} **Tip**: In doing so, also maintain the `title` attribute. {% endhint %}
### Accessible Links with Images If a link contains **only an image** (e.g. a logo or icon without visible text), using an `alt` attribute on the image **alone is not enough**. In this case, you should add an **`aria-label` to the** `` **tag**, clearly describing the **purpose of the link**. The image itself gets an **empty** `alt=""` so that screen readers will announce only the `aria-label` and the picture is only decorative. **Example:** ```html ``` This way, screen reader users hear only: > "Link: Learn more about our shipping with DHL" and **not an additional “Image: DHL”**, which could be redundant or unclear. #### Why not just use `alt`? The `alt` attribute belongs to the image — not to the link. Images alone often **don’t provide enough context** to describe where the link goes. The `aria-label`, on the other hand, describes the **function of the link** and ensures a **clear, complete message** for all users. {% hint style="info" %} **Note**: Even a well-written `alt` text **cannot fully convey the purpose of a link** when the image is the **only content inside the link**. Only an `aria-label` on the `` element ensures that **screen reader users understand both the function and the destination of the link**, regardless of the image content. {% endhint %} ### Accessible system Keep Shopware, your theme and all other extensions up to date. Accessibility improvements arrive continuously through updates – in the Shopware core as well as in ThemeWare®. A shop on an old version simply misses out on them. {% hint style="success" %} **Tip**: The [update guide](/knowledge-base/basic-knowledge/update-guide.md) shows you how to carry out updates safely. {% endhint %} *** ## Further information We have put together more information on the topic of "BFSG" for you in a news article in our Service Portal: {% embed url="" %}