How to make a WooCommerce store accessible

WooCommerce gives you a reasonable base: its own front end aims for WCAG 2.2 AA, with labelled checkout fields, keyboard support and announced cart updates.²¹ Whether your store is accessible depends mostly on the three things layered on top: your theme, your plugins and your content. Choose a theme with the accessibility-ready tag or test one carefully, check every plugin that adds something customers see, add alt text and real headings, and test the shop, product, cart and checkout pages after each change.

What WooCommerce itself covers

WooCommerce's accessibility statement says the core plugin's front end is substantially conformant with WCAG 2.2 AA and that issues from a 2024 audit by Equalize Digital are being fixed; it also says some issues may remain in the admin.² Its documentation describes what the plugin provides:¹

• keyboard navigation with a logical tab order through cart, checkout and forms, and visible focus;
• labelled form fields, buttons and controls, with required fields marked and errors shown both visually and in code next to their fields;
• cart totals and validation messages announced to screen readers through live regions;
• blocks for product listings, cart and checkout built with HTML5 semantics, with a note that older, deprecated blocks may have limited support.

The same page carries the important caveat: theme styles can override these defaults, and themes and plugins that modify checkout can break accessibility.¹

Even WooCommerce's own updates can introduce a problem. In July 2024 it published an advisory about version 9.1.0 of the Checkout block: on dark themes with light text, a style change could make fields look as if they had no labels. The workaround was a colour setting, and the change was reverted.³ That is a good reason to test checkout after updates, not only after your own changes.

1. The theme

The WordPress.org theme directory has an "accessibility-ready" tag. Themes that carry it have been reviewed against a list of requirements, including:⁴

• a skip to content link and meaningful landmarks;
• keyboard navigation support;
• controls with accessible names, roles and states, and labelled form fields;
• headings with meaningful structure, underlined links in text and no ambiguous link text;
• sufficient colour contrast for text and controls;
• content on hover or focus that is accessible, and no unexpected changes of context.

The tag is a useful filter, but it is about the theme as shipped. Your colours, page layouts and WooCommerce templates still need checking. WordPress's own coding standards expect code in its ecosystem to conform to WCAG 2.2 at level AA, which is a reasonable bar to ask of any premium theme you buy.⁵

2. Colours and type

In a block theme, Appearance, then Editor, then Styles lets you set colours for the background, text, links, headings and buttons across the whole site, including link hover colours.⁶ Check every pair your store uses, including WooCommerce's sale badge, notices, "out of stock" text and the price colour, against the 4.5:1 contrast ratio for normal text. Our colour contrast guide shows how.

3. Product content

• Alt text. WooCommerce product images come from the Media Library, where each image has an Alt Text field that WordPress describes as used for accessibility.⁷ The Caption, Title and Description fields are different. See how to write alt text that helps.
• Headings. In product descriptions, use the Heading block for headings, in order, rather than bold paragraphs.
• Size guides and specifications as real text or tables, not images.
• Video. The Video block can carry WebVTT caption files under Text tracks; leave playback controls on.¹⁰ See captions, transcripts and audio description.

4. Plugins: the biggest variable

Most WooCommerce stores run many plugins, and each that adds something to the front end brings its own markup. The ones to test first:

Accessibility overlay plugins that promise compliance are not a fix. They add a toolbar but leave the theme's markup unchanged; see do accessibility widgets make a website compliant?

5. Code changes: put them where updates cannot erase them

If you or a developer change templates, CSS or PHP, do it in a child theme. WordPress's theme handbook explains that a child theme keeps your customisations separate, so a parent theme update does not erase them, and warns that functions added directly to a parent theme will disappear at the next update.⁸ Block themes also store changes made in the Site Editor in the database; CSS added in Styles survives a theme update but is cleared if you switch themes.⁶

Back up first. The WordPress handbook says a full restore needs both the database and the files, and recommends a backup always before an upgrade.⁹ Test on a staging copy where you can. Our guide to fixing accessibility without breaking your theme covers the routine.

6. Test the pages that make money

1. Shop page: filters, sorting dropdown and pagination by keyboard.
2. Product page: variation choice, quantity, gallery and add to cart by keyboard, then with a screen reader. WooCommerce says it is tested with VoiceOver, JAWS and NVDA, which are good tools for your own test too.¹
3. Cart and checkout: change a quantity, apply a coupon, submit with an error, and check the errors are clear. See accessible forms and checkout.
4. Automated check: the free Jralo for WooCommerce plugin shows the result of a Jralo check inside WordPress: accessibility problems by severity against WCAG 2.2 A and AA, plus broken links, broken images and page errors. It adds no overlay. The result in WordPress also shows which countries' accessibility laws are likely relevant to your store, worked out from your terms, privacy and contact pages, with a link to our guide for each. That is a pointer, not legal advice.

Automated testing finds many problems, not all, so keep the manual passes for the product page and checkout. Repeat them after WooCommerce, theme and plugin updates.