WooCommerce accessibility fixes: a practical checklist for WordPress stores

Updated 2026-10-18

WooCommerce itself puts real effort into accessibility, but a WordPress store is a stack of theme, page builder and plugins, and each layer can add barriers. In our test scans of public WooCommerce theme demo stores, the most frequent problems were icon links with no name, low-contrast text, and product images whose alt text repeated the product name. Here's how to fix the common ones.

1. Alt text in the Media Library

Media > Library > select an image > Alternative Text. Product gallery images use the same field. Describe the photo (colour, angle, detail) rather than repeating the product title, which screen readers already announce. If you've filled alt text in but it isn't on the page, the theme or a slider plugin isn't outputting it.

2. Theme colours and contrast

Classic themes: Appearance > Customize > Colors. Block themes: Appearance > Editor > Styles > Colors. Page builders (Elementor, etc.): edit the global colour kit. Check text, links, sale badges, buttons and footer text for 4.5:1 contrast.

3. Name your icon links and buttons

Header cart/account icons, social icons and "quick view" or wishlist buttons often have no text. The Social Icons block has a Link label setting per icon; for menus set a Navigation Label. For plugin buttons, look for an accessibility option or report it to the plugin author with the element from your scan.

4. Labels on every form field

Contact Form 7, WPForms, Gravity Forms and newsletter plugins can hide labels in favour of placeholders. Turn labels on (you can visually style them small). WooCommerce's quantity field includes a screen-reader label by default, so if yours is missing, a theme override has removed it.

5. Headings and the page title

Make sure product and page titles are visible H1s (some page-builder layouts hide them) and change heading levels in the Heading block toolbar so they don't skip.

6. Sliders, pop-ups and off-canvas menus

Plugin sliders and pop-ups are frequent sources of focus problems: hidden slides you can tab into, pop-ups you can't close with Esc. Update them, check their accessibility settings, or replace them.

7. Test checkout yourself

Unlike Shopify, your checkout is part of your site. Payment gateway plugins add their own fields, so walk through checkout with the keyboard only and with a screen reader (NVDA is free on Windows; VoiceOver is built into Macs).

8. Keep everything updated

Update WordPress, WooCommerce, your theme and plugins; many accessibility fixes arrive in routine updates. Use a child theme for template overrides so updates don't undo your fixes.

Re-test after changes

New plugins and page-builder edits can introduce issues at any time, so re-scan your home, shop, product and cart pages after big changes.

Check your store in 2 minutes

Run our free in-browser check on any page of your store, or get the full $39 report: every automated issue on 5 key pages, with step-by-step fixes for Shopify and WooCommerce.

Free check See the full report

FAQ

Is WooCommerce accessible?

WooCommerce core works on accessibility, but your theme, page builder and plugins determine most of what shoppers experience.

Where do I add alt text in WooCommerce?

Media > Library > select the image > Alternative Text. Product images use the same field.

Do I need to test WooCommerce checkout?

Yes. Your checkout is part of your site and payment plugins add their own fields, so test it with a keyboard and a screen reader.

Why does my alt text not show on the page?

Your theme or a slider/gallery plugin may not output it; check with the developer.