Shopware accessibility: guide & WCAG checklist

Accessibility is a legal requirement for most online shops across the EU. This page combines both: the strategy guide that explains the fundamentals, the legal situation (European Accessibility Act) and the roadmap, and the detailed WCAG 2.1 checklist with prioritised checkpoints that you work through yourself in the Shopware admin or via recommended plugins.

This way you make sure your shop not only meets the legal requirements but is also smoothly usable for all visitors. That saves later costs and strengthens your SEO ranking.

Why accessibility is a competitive advantage

An accessible shop is faster, clearer and easier to use. That improves your visibility, increases conversion and lowers support effort. Visitors with visual or hearing impairments benefit immediately. So do older people, mobile users with small displays or customers in a hectic environment.

• More reach. Clean code is better understood by Google. You rank higher.
• Faster load times. Lean technology reduces waiting times and bounce rates.
• Higher conversion. Clear contrasts, a visible focus indicator and simple navigation guide users safely to the checkout.
• Stronger brand image. You show responsibility and reach new target groups.

What the law requires and who it affects

The European Accessibility Act (EAA) – implemented nationally, e.g. in Germany via the Barrierefreiheitsstärkungsgesetz (BFSG) – applies the WCAG 2.1 AA requirements to e-commerce. It applies to shops that sell products or services to consumers. Micro-enterprises and pure B2B shops may be exempt. So check your situation. Even with exemptions, accessibility offers clear benefits for SEO and usability. You'll find the four WCAG core principles (perceivable, operable, understandable, robust) right at the start of Part 2.

Accessibility happens on three levels

Your theme as a solid foundation

With a modern Shopware theme like ThemeWare you're a step ahead of many requirements. It provides:

• Semantic HTML structure. Helps screen readers and search engines.
• Keyboard-operable navigation with a clearly visible focus.
• High contrast for text, buttons and forms.
• Responsive layout that doesn't break at 200 percent zoom.
• Regular updates, so you automatically get later WCAG changes.

Toolbar as a comfort layer

The free Accessibility 1-Click Toolbar complements your theme. Users can increase contrast, adjust font sizes or hide images. Settings are stored locally. This keeps the shop fast and GDPR-compliant.

Optimise your own content deliberately

Technology only helps if your content is clear and accessible. Keep these points in mind:

• Images. Use short alt texts. Describe the essentials without keyword spam.
• Videos. Add captions. A transcript helps too.
• PDFs. Export them as accessible PDF/UA. Use tags and a clear reading order.
• Headings. One H1 per page. Then H2, then H3.
• Language. Use short sentences and avoid unnecessary jargon.
• Contrast. Check text colour and background with a tool like the WCAG Color Contrast Checker.

Tip: Create an internal style guide. That keeps all team members aligned on the same standards.

Five quick steps to get started

1. Run WAVE on your homepage and note the biggest errors.
2. Add alt texts for the most important images.
3. Replace your most-used PDF file with an accessible version.
4. Go through the checkout once using only the Tab key.
5. Create your public statement with our accessibility statement template.

Navigation & page structure

Navigation is the foundation of your shop. If it doesn't work, many users get lost. People who don't use a mouse in particular depend on a well-reachable structure. This section helps you check and improve exactly that. Without coding skills. Without jargon. Easy to implement.

Points you should check

• Critical All menu items are reachable with Tab and Enter
• Critical It is always clearly visible which element is currently focused
• High A skip link lets you bypass the navigation and jump straight to the main content
• Medium Breadcrumbs show the page position and are technically marked up correctly

What often causes problems

• The navigation only works with the mouse
• The focus is invisible because it was removed via CSS
• A skip link is missing entirely or doesn't work because the target ID wasn't set
• Breadcrumbs look good but don't help technically because they aren't marked up as navigation

What you can do yourself

• Test keyboard navigation: Press the Tab key repeatedly. Check whether you reach all menu items, including submenus.
• Make the focus visible: Go into the theme and check the focus styles. Remove anything that makes the focus invisible, for example outline: none.
• Use the 1-Click Toolbar: with the free plugin you can quickly tell whether focus outlines are missing or keyboard functions are limited. It helps you check, but it doesn't replace a real fix.
  Link to the plugin: store.shopware.com
• Use breadcrumbs correctly: use the appropriate CMS element.

Why this matters so much

Many people browse with a keyboard, touchscreen or screen reader. If they can't click through or the active area isn't visible, they're gone immediately. This doesn't only affect a small minority. Google pays attention to these things too. Accessible navigation therefore helps everyone: your customers, your revenue and your ranking.

Conclusion: if your navigation isn't well thought out, the whole shop doesn't work properly. So it's worth looking very closely here. Test for yourself, observe critically and document what stands out. Pass on anything you can't fix yourself – to your agency, your team or your plugin provider.

Products & cart

Product presentation and the cart are among the most important areas of your shop. This is exactly where customers make buying decisions. So that all visitors can use the shop – including with a keyboard or screen reader – this area must work accessibly. You can check and adjust many things yourself, without being a developer.

Points you should check

• Critical All product images have a meaningful alternative text
• Critical Variant dropdowns and colour swatches can be operated with the keyboard
• High The "Add to cart" button is technically clearly marked up, for example with an ARIA label
• Medium Prices are shown as text and are not just part of an image

What often causes problems

• Product images have no alt text or only automatic file names
• Colour swatches can only be clicked with the mouse and don't respond to keyboard input
• The cart button has no meaningful ARIA label and isn't recognised correctly by screen readers
• Prices are part of a banner or embedded as an image and are therefore unreadable for many users

What you can do yourself

• Maintain alt texts: open the media manager and add a short, descriptive alternative text to every image. For example "white baby cot with mattress" instead of "image-123.jpg".
• Describe the button technically: ask your team or agency whether the "Add to cart" button contains an ARIA label. It should read, e.g.: aria-label="Add product XYZ to the cart".
• Always show prices as text: use real text snippets or CMS text fields for prices. Make sure they don't only appear in product images or graphics.

Why this matters so much

In the product area in particular, many users drop off when they can't use functions. A missing alt text or an unusable button can make the difference between a purchase and an abandonment. If a screen reader doesn't recognise the price or the button isn't clickable, you've lost potential customers. Permanently.

Accessibility doesn't mean rebuilding your shop. It's about making sure everything is readable, reachable and understandable. Also for people with other devices, impairments or usage habits.

Conclusion: make sure your products not only look good but are also functionally accessible. Take your time with this area. Because this is exactly where it's decided whether your shop sells – or loses.

Forms & checkout

Contact forms, registrations and the checkout are crucial for your revenue. If users get stuck here because fields are missing or feedback is unclear, they abandon. People with a screen reader or keyboard control in particular need a clear structure. The good news: you can check and adjust many things yourself.

Points you should check

• Critical Every input field has a visible label
• Critical Error messages appear directly at the field and are easy to understand
• High Required fields are clearly marked and also technically set with aria-required
• Medium On errors, the focus automatically jumps to the affected field

What often causes problems

• Labels are missing entirely or only appear as a placeholder in the field
• Error messages appear too late or can't be assigned clearly
• Required fields are marked visually, but screen readers don't recognise them as required
• On errors the focus stays somewhere at the top instead of jumping to the faulty field

What you can do yourself

• Enable labels: create your form in the shopping experiences or the form editor. Make sure every field has a visible label – for example "email address" or "phone".
• Phrase error messages clearly: avoid technical terms. Use clear sentences like "Please enter your email address" or "This field must not be empty".
• Test focus behaviour: place a real test order. Deliberately leave a field empty and watch whether the focus jumps automatically to the affected field. If not, it should be adjusted.
• Check pop-ups with a form: open your newsletter modal or other form windows. Test whether it closes with ESC and whether the focus returns afterwards. If not, the focus handling should be adjusted – this is especially important for mobile users and keyboard control.

Why this matters so much

Accessibility doesn't mean you have to overhaul everything. It's about your shop working even in critical moments. If someone doesn't understand a field, gets no feedback or doesn't see the error, the purchase is over. Immediately.

A well-labelled form not only looks professional, it also builds trust. You show that you take all users seriously. And you incidentally save yourself support requests and abandonments.

Conclusion: your forms must be clear, understandable and technically accessible. Check them step by step. Anything you can't fix directly can be documented and passed on. The effort is manageable, the effect all the greater.

Media & PDFs

Many shops rely on images, videos or embedded PDFs. But this is exactly where barriers often arise. If videos have no captions or a PDF isn't structured, important content is inaccessible to many users. Screen reader users in particular are affected. With a few simple measures you can change that.

Points you should check

• Critical All PDFs are tagged to the PDF/UA standard and have a logical reading order
• Critical Videos offer captions and a full transcript
• High Carousels or sliders can be paused or stopped at any time

What often causes problems

• PDFs are exported from design tools but not saved as accessible documents
• Videos are only embedded, without captions or an additional description
• Sliders auto-advance and can't be stopped – neither by mouse nor keyboard

What you can do yourself

• Create accessible PDFs: always export your PDFs from programs like Word or InDesign with the PDF/UA option enabled. Pay attention to heading structure, reading order and alternative texts. Then upload the new version in the media manager.
• Add a transcript to videos: create an additional text block below each video in the shopping experiences. There you can provide a full transcript. That helps not only with accessibility but also with SEO.
• Check or add captions: use platforms like YouTube to generate automatic captions and correct them manually. Then embed the video via iframe with captions enabled.
• Make carousels controllable: use the carousel element in the CMS with the pause function enabled. Make sure the pause button is visible and labelled.

Why this matters so much

PDFs and videos often contain central information – for example delivery terms, product info or instructions. If this content isn't accessible, it excludes entire target groups. An untagged PDF is useless for screen readers. A video without captions doesn't reach many users.

Accessibility for media is more than a duty. It shows that your shop is professional and cares about details. And it strengthens your SEO, because text from transcripts and PDFs can be indexed.

Conclusion: make your media understandable, structured and accessible. Use clear files, add captions and make sure no one is excluded. You don't have to be a developer for that. Just attentive.

Colours & contrast

Colours aren't just design. They decide whether content is readable or not. People with limited vision, colour-vision deficiencies or sensitivity to glare in particular depend on clear contrasts. It also plays a big role for mobile users or in bright environments. The WCAG give concrete minimum values here. You can check and adjust these points easily.

Points you should check

• Critical Text and background colours reach at least a contrast ratio of 4.5:1
• Medium Link texts are clearly recognisable and not only highlighted by colour
• Low Icons have a visible label or an explanatory tooltip

What often causes problems

• Text appears in colours that are too light on a white background – for example light grey on white
• Links only differ by colour but have no underline or other emphasis
• Icons don't explain themselves and have neither text nor tooltip

What you can do yourself

• Test colours: use an online tool like the WCAG Contrast Checker and check your colour combinations. Pay attention to body text, buttons and labels.
• Mark links better: go into the shopping experiences and additionally format links with an underline or a symbol. That helps not only with accessibility but also with general orientation.
• Make icons understandable: add short descriptions to icons in the CMS as a tooltip (e.g. with the title attribute). Alternatively, you can add a small line of text below.

Why this matters so much

Good contrasts ensure better readability, less irritation and higher usability. If text is hard to recognise, bounce rates rise. If links aren't clearly recognisable, content isn't found. And if icons convey no meaning, uncertainty arises.

Accessibility in design doesn't mean sacrificing aesthetics. On the contrary. Well-made contrasts and clear elements not only look better, they also seem more professional – and help you reach more users.

Conclusion: don't check your colours by feeling, but by effect. Make sure texts are clearly readable and links are recognised immediately. Even small adjustments can make a big difference here.

Keyboard operation

An accessible shop must be fully usable with the keyboard. Many users don't use a mouse – for example with motor impairments or because they work with assistive technologies like screen readers. The keyboard can also be decisive in a mobile context or on laptop touchpads. That's why it's a mandatory WCAG criterion.

Points you should check

• Critical There are no so-called "keyboard traps" – places where the focus gets stuck
• Critical Modal windows (e.g. newsletter pop-ups) can be closed with the Escape key
• High The order when tabbing follows the visible structure

What often causes problems

• The focus doesn't return in modals or remains completely "trapped"
• ESC doesn't close pop-ups – users have to click with the mouse
• The tab order is chaotic: first a button bottom right, then back to the menu at the top

What you can do yourself

• Run a keyboard test: go to your shop, put the mouse aside and use only the Tab key. Observe whether you reach all areas logically and completely.
• Test the ESC function: open a pop-up or a modal window – for example the newsletter layer or a cookie banner. Press ESC. If nothing happens, your developer should fix it.
• Check the tab order: make sure the order matches the visible structure of the page. If you have to jump or jump back, there's probably a technical error.

Why this matters so much

If users get stuck with the keyboard or can't close pop-ups, they leave the shop. Not because they don't want to – but because they can't continue. Such barriers are invisible to most, but a real exclusion criterion for many.

At the same time, keyboard navigation is a strong UX indicator. If everything works cleanly here, mobile users, search engines and everyone who wants to navigate quickly benefit too.

Conclusion: do the tab test. Observe the order. Close pop-ups with ESC. And if something doesn't work, document it. That way you create not only accessibility but also noticeable usability.

Language & content

A clear structure helps all users – with or without impairments. Screen reader users in particular depend on correctly marked-up headings to orient themselves quickly on a page. But people without impairments also benefit from good language, understandable terms and a logical structure. This area is therefore part of the basis of every accessible page.

Points you should check

• Critical Every page has exactly one single H1 heading
• High Headings follow a logical hierarchy – i.e. H1, then H2, then H3
• Medium Technical terms and abbreviations are explained or avoided

What often causes problems

• Multiple H1 headings on one page – e.g. in CMS blocks or through duplicate titles
• Headings are only formatted visually but not marked up correctly (for example as a div instead of an h2)
• Texts contain incomprehensible abbreviations, technical terms or internal jargon

What you can do yourself

• Set the H1 correctly: use only a single H1 per page. It should describe the main topic of the page – for example "Baby cots at a glance" or "How shipping works".
• Structure headings logically: use H2 and H3 deliberately in the shopping experiences – never just "bold" or "larger". Use real heading blocks instead of text elements.
• Explain technical terms: for difficult terms, add a short explanation in brackets or a small extra sentence. Example: "PDF/UA (accessible PDF standard)".

Why this matters so much

Good structure isn't a formality, it's navigation. Screen reader users jump deliberately from heading to heading to grasp pages. If the hierarchy is missing or jumbled, the orientation is missing too. That seems unprofessional and frustrates.

The same applies to content: clarity wins. Understandable terms seem trustworthy. Complicated language or internal abbreviations, by contrast, lead to confusion – and sometimes to abandonment.

Conclusion: make language visible, logical and understandable. Structure content the way you'd like to read it yourself. The clearer your language, the better your shop works – for all users.

Tech & ARIA

Accessibility isn't only a design question. The technical structure of your page also plays a big role. Screen readers and other assistive technologies only "understand" content correctly if HTML elements are cleanly structured. This is exactly where semantic structure comes in – and, for more complex components, ARIA attributes. You don't have to implement all of this yourself, but you should know what matters.

Points you should check

• Critical The page uses meaningful HTML structures like <main>, <nav>, <footer>
• High ARIA roles are used deliberately and correctly – not everywhere, but where they're needed
• Medium Dynamic content (e.g. the cart) uses so-called "live regions" for screen readers

What often causes problems

• Shop pages consist only of generic <div> containers without a clear structure
• ARIA roles are set automatically by plugins but not used correctly – for example multiple times or contradictorily
• Status changes like "item added to cart" aren't perceivable for screen readers

What you can do yourself

• Give main areas IDs: make sure the central content area of your page has a unique ID – for example main-content. That's important for skip links and orientation with a screen reader.
• Don't adopt technology blindly: if you work with agencies or plugins, demand a clean semantic structure. Have it checked whether the most important containers are correctly marked up as <main>, <header>, <nav> or <footer>.
• Use ARIA only deliberately: ARIA is not a replacement for good HTML. It should only be used when really necessary – for example for complex UI elements like sliders or tabs.

Why this matters so much

Semantic HTML is the basis for an accessible web. It ensures that screen readers categorise content correctly and can navigate the page. If this structure is missing, your page is visible but not understandable – at least not for everyone.

Incorrectly used ARIA roles even cause damage. They can output information twice, fake wrong roles or hide functions. So: better a few but correctly set ARIA attributes than "better safe than sorry".

Conclusion: you don't have to be a developer to have a basic technical understanding. Pay attention to meaningful structures, demand clean HTML and ask your team the right questions. Accessibility begins in the code – but it affects the whole shop.

Monitoring & statement

Accessibility isn't a one-off task. It must be considered permanently and checked regularly. New pages, plugins or design changes can quickly create new barriers – often without you noticing. That's why it's important to develop a routine or use a reliable monitoring tool.

Points you should check

• Critical An accessibility statement is linked on your website and up to date
• High The shop is checked regularly with tools like WAVE or axe
• Medium There is a simple feedback form for reporting barriers

What often causes problems

• The statement is outdated or missing entirely
• Technical tests are done only once but not repeated regularly
• Visitors can't report barriers – or don't even know they may

What you can do yourself

• Publish the statement: use our template and embed it in the footer. Make sure it's reachable, understandable and legally up to date. To the accessibility statement template
• Enable feedback: create a simple CMS block in the footer with a short text and a form field – for example: "Spotted a barrier? Feel free to give us a quick note."
• Use tools like WAVE: with these free browser tools you can check individual pages for common errors. Especially for smaller shops with few templates this is a good entry point.

Why this matters so much

Accessibility is an ongoing process. Every new page, every small change to the theme or every plugin can unintentionally create new hurdles. If you don't check regularly, you quickly lose track – and risk warnings or annoyed visitors.

At the same time, monitoring is a strong signal: you show that you take responsibility. For your users. For the quality of your shop. And for compliance with the legal requirement.

Conclusion: whether with your own process or a professional partner – make sure accessibility runs along permanently in your shop. That way you're not only on the safe side legally, but also reach more people. Every day.

Next steps

Accessibility sounds complex – but in many areas it's simpler than you think. The important thing is that you start now. Step by step. You don't have to solve everything at once. But you should know where you stand and what needs to be done.

Start with the points rated Critical. These concern legal requirements and have the biggest impact on usability and legal certainty. Then work through the High and Medium prioritised topics. You can implement many things yourself or pass them on to your agency.

You don't have to be a developer. You just have to look, test, document and improve consistently.

Our recommendation: use this checklist regularly. As a fixed part of your quality control. Or as a briefing for new templates, plugins or content. And if you want to make sure your shop stays accessible as it grows, use the support of specialised partners.

Strong partners and exclusive discounts

Want fast results or need professional support?

• Trusted Shops. Legal certainty with built-in accessibility. Whitepaper, checklist and webinar included. Exclusive free month on every legal package. Learn more
• IT-Recht Kanzlei. Generator for your mandatory page. Reliable and fast. 10% discount on the complete package. Learn more

Frequently asked questions about Shopware accessibility

Ready for an accessible shop?

Start with the five quick steps, work through the checklist and publish your accessibility statement. You don't have to be a developer — just consistent.

Start with 5 steps To the template statement

Note: this guide does not replace legal advice. For binding information, contact a specialist body or a specialised lawyer.