Accessibility for Shopware 6: what you should look out for

Accessibility in e-commerce is mandatory. That is due to legal requirements such as the German Accessibility Strengthening Act (Barrierefreiheitsstärkungsgesetz, BFSG), but also because an accessible shop lets you reach far more people. In this article we show you what to look out for in your Shopware 6 shop so that as many people as possible can use it without obstacles. Your conversion rate benefits too.

What does accessibility in an online shop (on Shopware 6) actually mean?

An accessible online shop is designed so that every user can operate it without difficulty, regardless of physical or technical limitations. This includes, among others:

• People with visual impairments (e.g. colour blindness, low vision)
• People with motor impairments (e.g. using a keyboard instead of a mouse)
• People with hearing impairments
• People with cognitive impairments

Accessibility does not mean “only for people with disabilities”. It is also about mobile users, people with slow internet connections or simply good usability for everyone.

Why is accessibility important in Shopware 6?

From 2025, the BFSG applies to all “essential services”, and online shops are among them. Anyone who does not provide accessible services then risks formal warnings and fines. Experience also shows that an accessible shop means:

• A better user experience (UX)
• A higher conversion rate
• A lower bounce rate
• Better Google rankings (keyword: Core Web Vitals)

So accessibility is not an “extra” but a real business case.

Shopware 6 and accessibility: what exactly should you consider?

Shopware comes with a modern and flexible system, but it is not accessible “out of the box”. You should therefore check and optimise the following aspects yourself (or with your agency):

1. Clear structure and semantic HTML

• Use correctly nested headings (h1 to h6)
• Use HTML elements meaningfully (e.g. ``)
• Make sure the tab order is logical

2. Contrast and choice of colours

• Make sure text is easy to read (contrast ratio of at least 4.5:1)
• Avoid cues based on colour alone (“red fields are required”)
• Use tools such as the WebAIM Contrast Checker

3. Keyboard operability

• All functions should be reachable without a mouse
• Don’t remove focus outlines!
• Add “skip to content” links

4. Screen reader compatibility

• Use `aria-labels`, `alt` attributes and descriptive link texts
• Avoid JavaScript gimmicks that hide content dynamically
• Test your shop with the NVDA screen reader, for example (free of charge)

5. Forms and error messages

• Label fields clearly (not just with placeholders!)
• Highlight errors in a clearly visible and understandable way
• Use status messages (e.g. “required field”, “email address is invalid”)

6. Media content

• Provide alternative texts for images
• Offer subtitles or transcripts for videos
• Avoid autoplay, especially with sound

7. Accessible navigation

• Use a clear, flat navigation structure
• Breadcrumbs help with orientation
• Mobile menus should not overlay or block content

Are there tools to check your shop for accessibility?

Yes. These tools help you with the analysis:

WAVE Web Accessibility Evaluation Tool https://wave.webaim.org

Google Lighthouse (built into Chrome DevTools) Focus: accessibility score

axe DevTools (browser extension) Shows specific errors and suggestions for improvement

Conclusion: acting now pays off!

With an accessible Shopware 6 shop you not only comply with the law but also create a better user experience for everyone. You show where you stand, reach more people and ultimately increase your sales. If you need support, we are happy to help with the technical implementation and with auditing your shop.

Let’s make your shop more accessible together!

PS: If you are not sure whether you are affected, or would like an as-is analysis of your project, feel free to get in touch with us personally!

Preview image created with ChatGPT