SevirantaMaking your WooCommerce store accessible: a practical guide
9 juni 2026
Short answer. WooCommerce itself follows the WordPress accessibility guidelines reasonably well, but your store mainly inherits the accessibility of your theme, your plugins and your content — and that is usually where it goes wrong. Walk the six points below (contrast, alt text, headings, plugins & page builders, keyboard, language) and pay extra attention to your block checkout and your product filters; that covers the bulk of it.
Why isn't WooCommerce enough on its own?
WooCommerce is a plugin on top of WordPress. Whether your store meets WCAG depends on how your theme is built, which colours you chose, which plugins and page builder you use, and how you filled in your products. Two stores on the same WooCommerce version can therefore score completely differently. The good news: because much of it comes back through your theme and templates, a single fix often covers hundreds of pages.
1. Check your colour contrast
The most common issue. On a block theme (Full Site Editing) go to Appearance → Editor → Styles → Colors; on a classic theme go to Appearance → Customize → Colors. Make sure text and background have at least 4.5:1 contrast (3:1 for large text). Pay special attention to the text on your Add to cart button, price and sale labels, and links. Set it once and it applies store-wide. See colour contrast: the WCAG requirement and how to measure it.
2. Give your product photos alt text
Open a product under Products, click the Product image (and Product
gallery) → fill in the Alternative Text field in the media library. Describe
briefly and factually what is shown (e.g. "Black suede men's lace-up shoe"), no
marketing language. Start with your best-selling products and your homepage banners.
Decorative images get an empty alt (alt=""). More in
writing alt text that works.
3. Check your heading structure
Use headings in logical order (H1 → H2 → H3) and not just for styling. In the block editor (Gutenberg) each heading block shows its level; don't skip levels. Watch out for page builders like Elementor or Divi: they let you style any text to look big without it being a real heading — choose the correct heading level deliberately there.
4. Watch your plugins and page builder
This is often the biggest source of problems. Plugins for reviews, chat, pop-ups, sliders and filters — and heavy page builders — inject their own code into your theme, and it regularly contains unnamed buttons, incorrect ARIA, or elements you can't operate with the keyboard. So don't install every plugin blindly, and always test your site with everything active. If a plugin turns out to be inaccessible, move to an alternative that does respect the WCAG standards. Where you can, choose the new WooCommerce blocks for cart and checkout (see point 6).
5. Test with the keyboard
Try using your site entirely without a mouse: just the Tab key and Enter. Can you
reach everything — menu, product filters, variation choices, cart, checkout — and can
you always see where the focus is? With WooCommerce, pay specific attention to the
variation dropdowns, the quantity stepper (+/−) and the filter widgets in your
sidebar; those are the places where the keyboard often gets stuck.
6. Check your language setting and your checkout
Make sure your theme sets the correct language attribute, so a screen reader picks
the right pronunciation. In a classic theme, header.php contains the line
<html <?php language_attributes(); ?>> — that should carry the language attribute.
If you use WPML or Polylang for multiple languages, check that each language version
gets the correct lang attribute. Preferably move to WooCommerce's block-based Cart
and Checkout blocks: they are more accessible than the old shortcode checkout and
are actively maintained for accessibility.
Common WooCommerce mistakes and their fix
| WooCommerce element | Common mistake | The fix |
|---|---|---|
| "Add to cart" button | font too light / low contrast | set contrast in theme styles to at least 4.5:1 |
| Product photos | filename as description (IMG_2043.jpg) | add functional alt text in the media library |
Quantity stepper (+/−) | unlabelled buttons, not keyboard-operable | add a label/aria-label or use an accessible variant |
| Product filter widget | filters usable with the mouse only | accessible filter plugin or the WooCommerce filter blocks |
| Accessibility plugin | installing an overlay widget | avoid — it doesn't repair your code and doesn't protect against claims |
Does an accessibility plugin from the WordPress plugin directory help?
No. Search for "accessibility" and you'll find dozens of plugins promising to make your store compliant in one click via a widget. Don't fall for it: they don't repair your theme and templates, and regulators check the raw source code of your store. Fixing it structurally in your theme and content is the only route that holds up — and it earns you better SEO and a faster load time too. More on this in why an accessibility overlay won't protect you.
Does that make my WooCommerce store compliant with the law?
These six points cover most of what an automated test detects, but "compliant" goes further: it depends on your whole theme, your plugins and your content together. Whether the European Accessibility Act applies to you is explained in our checklist. Also run a Shopify store? Then our Shopify guide will help you further.
How do I find out where my WooCommerce store stands now?
The fastest way: scan one page for free. You'll see, per finding, what's wrong and how to fix it — and because much of it runs through your theme and templates, you often fix it for your whole store in one go. In under 60 seconds, no account needed.