WooCommerce accessibility: a practical guide for store owners

Shoppers who use screen readers, keyboards, voice control or zoom need to browse, choose options and check out like everyone else. When they can’t, they leave, and in the US online stores are frequent targets of accessibility lawsuits. In the EU, the European Accessibility Act has covered online shops since June 2025.

The usual benchmark is the Web Content Accessibility Guidelines (WCAG), level AA. Version 2.2 is the current one.

WordPress and WooCommerce give you a lot of freedom, and that is where problems come in. A typical store combines a theme, a page builder and a dozen plugins, each written by different people.

• The theme. Themes in the WordPress.org directory can carry an “accessibility-ready” tag after a manual review, but the tag means the theme meets a minimum standard, not full WCAG conformance. Many premium themes have never been reviewed.
• Page builders. Drag-and-drop layouts often produce buttons that are really divs, headings chosen for their size rather than their meaning, and sliders and tabs that don’t work with a keyboard.
• Plugins. Product galleries, quick-view pop-ups, filters, wishlists, mini-carts and cookie banners each add their own markup, and often their own barriers.

1. Cart and checkout messages that aren’t announced

“Added to cart”, coupon errors and form validation messages appear on screen but screen readers never hear them.

2. Form fields without labels

Quantity inputs, search boxes and newsletter fields that rely on placeholder text, which disappears when you type and often isn’t read out.

3. Product galleries and sliders

Thumbnails that can’t be reached by keyboard, zoom lenses that only work with a mouse, and carousels that auto-rotate without a pause button.

4. Variation dropdowns and swatches

Swatch plugins that replace the accessible select with clickable images that have no name and no keyboard support.

5. Low contrast

Sale prices, “out of stock” labels and button text that fall below the 4.5:1 contrast ratio WCAG AA asks for.

6. Missing alt text

Product images uploaded without alt text in the media library, so screen readers read the file name or nothing at all.

1. Run an automated scan. Our free scan checks your homepage, a product page, a category page and the cart against WCAG 2.2 AA rules.
2. Keyboard only: press Tab through a product page. Can you choose a variation, change the quantity, add to cart and reach checkout, always seeing where you are?
3. Zoom to 200% and check nothing overlaps or gets cut off.
4. Screen reader: use NVDA (free, Windows) or VoiceOver (Mac). Add a product to the cart and listen for the confirmation.

• Work on staging. Many hosts offer a one-click staging copy. Fix and test there, then push to live.
• Use a child theme or a small custom plugin for code changes, so theme updates don’t wipe them out. Never edit WooCommerce core or a parent theme directly.
• Fix at the source: template overrides and hooks to add labels, accessible names and live-region announcements; CSS for contrast and focus styles.
• Review your plugins. If a plugin can’t be made accessible, replace it. Often the default WooCommerce feature works better than the add-on.
• Fix your content: alt text in the media library, real headings, and no text baked into images.

An overlay plugin won’t fix the template code. See overlays vs real code fixes.

Plugin and theme updates regularly change your markup. Re-scan after updates and check the key pages at least monthly. Fix & Protect includes 3 months of weekly re-scans and monthly reports.