WooCommerce Accessibility Checklist for Store Owners

A WooCommerce store asks a shopper to do a lot in a few minutes: read photos, pick a size or colour, change a quantity, check a total, then type an address and pay. A WooCommerce accessibility checklist should follow that same path, in that order, from gallery to checkout.

Key takeaways

• Give every product photo a text alternative naming the product and the detail the photo shows.
• Name each variation in words, never colour alone, for selected and out of stock options.
• Make the cart announce its changes in text, and keep quantity controls and remove buttons reachable by keyboard.
• Label every checkout field, explain each error in text, and let the shopper review the order before paying.
• Treat a scan as a starting point, then run a quick manual keyboard and screen reader check.

WooCommerce accessibility checklist: product galleries

Start on a product page with more than one photo. Each picture needs its own job. The main photo should name the product and its most useful detail. A second photo needs alt text for its own detail, not a copy of the first caption.

WCAG success criterion 1.1.1, Non-text Content, calls for a text alternative for non-text content. For a control, that text alternative is a name describing its purpose. A thumbnail that opens a larger view is a control, so its name should say what it opens. The failing pattern is a row of images with empty alt text, or every image carrying the same short label.

Failing version:

<img src="shirt-front.jpg" alt="shirt">
<img src="shirt-back.jpg" alt="shirt">

Passing version:

<img src="shirt-front.jpg" alt="Blue cotton shirt, front view">
<img src="shirt-back.jpg" alt="Blue cotton shirt, back view showing the collar">

Check the gallery controls too. A thumbnail, a zoom button and a next image button must all work from a keyboard, with a name a screen reader can announce. WCAG success criterion 2.1.1, Keyboard, requires all functionality to be operable through a keyboard interface. Press Tab through the gallery and confirm you can reach every control.

Variation selectors that say the option in words

Variation selectors are where many WooCommerce stores break down. A shopper picks a size or colour, and the page updates the price, the photo and the stock note. If that choice is shown only as a coloured square, a shopper who cannot tell the colours apart has no way to know what was picked.

WCAG success criterion 1.4.1, Use of Color, states that colour is not used as the only visual means of conveying information. Pair the swatch with a visible text label, and state the selected option in text next to the selector, such as "Selected: Large, Navy".

Prefer real form controls over clickable div elements. A radio group gives each option a name, a role and a selected state that assistive technology already understands, which is what WCAG success criterion 4.1.2, Name, Role, Value, requires.

<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="large"> Large</label>
  <label><input type="radio" name="size" value="medium"> Medium</label>
</fieldset>

Test three things after you change a selector: Tab to each option and select it with the keyboard alone; check the announced name and selected state; and check an out of stock option, which should be marked as unavailable in text, not only greyed out.

Cart checks: quantities, totals and status messages

Work through the cart line by line. Each quantity stepper needs a name saying which product it changes, such as "Quantity for Blue cotton shirt". A button showing only a plus sign or a minus sign needs an accessible name too. Keep the buttons large enough to tap without hitting the next control.

Next, test the cart messages. When a shopper adds a product, updates a quantity or removes a line, the page often updates a notice or a cart count without reloading. WCAG success criterion 4.1.3, Status Messages, requires such messages to be programmatically determined so assistive technology can present them without the message taking focus. A screen reader user needs the update announced with the full phrase, not just the bare number.

Check the totals in the same pass. Subtotal, shipping and total should be real text, in a clear order, with each charge labelled. A coupon field needs a visible label, and a coupon error needs a written explanation, such as "That code has expired", rather than a red border alone. See also the accessible pricing table guide.

Checkout checks: labels, errors and review

Label every checkout field with a visible label tied to the input, state the required fields and the expected format before the shopper types, and keep the shopper's entries when a submit fails. Name each error field, describe the problem in text, and say how to fix it. On a failed submit, move focus to the first error or to a short error summary with links to each field.

Payment widgets deserve a separate check. A hosted payment frame is third party content, so you may not be able to change its inner controls. You can still check the frame title, the labels around it, and the path in and out with a keyboard. If a payment step traps focus inside the frame, raise that with the payment provider, rather than hiding the frame. End with a review step: before the final pay button, show items, quantities, address, payment method and total as real text.

What is automatic and what is manual

A scan can find a missing label or a missing alt attribute. A plugin can apply a small set of fixes at render time. Neither can decide which variation label reads clearly, or rewrite a theme template that turns a selector into clickable div elements.

Task	Who does it	Notes
Skip link, page language, alt text fallback	WordPress plugin	Three fixes, no account needed
Finding missing labels, names, alt text	Scan	Flags the issue, records it with a date and time
Rewriting a variation selector	Store owner or developer	Theme work, test with a keyboard after the change
Writing clear alt text	Store owner	Needs product knowledge
Fixing a payment frame inner control	Payment provider	Outside the store theme

If a claim sounds as if one install fixes a whole checkout, check which layer it touches.

How Axeazy helps with this exact issue

Axeazy lists form labels, link names, button names and alt text among the fix categories it works on, and its capabilities page states plainly that automated tools cannot test every WCAG criterion. Use a scan to find the labelled and named items, then fix the theme pieces by hand.

For a WooCommerce store, which runs on WordPress, the WordPress plugin page describes three fixes that work at render time with no account needed: a skip to main content link, a lang attribute when the theme omits it, and an alt text fallback when an image has no native alt text. Paid plans add AI written alt text, auto captioning and weekly scans, per file 02. Read the honest scope on the capabilities page before you assume a fix covers a checkout template. For other sites, the scan gives computed fix values and a guided checklist to apply by hand.

Want a quick read on your own site? Run Axeazy's free 60 second scan . It needs no signup.

Common mistakes

• Using colour swatches with no text label, so the selected option is invisible to shoppers who cannot tell the colours apart.
• Giving every gallery photo the same alt text, so a screen reader user hears repeats instead of views.
• Leaving quantity steppers and remove buttons unnamed, so they announce as bare symbols.
• Showing a cart total update only as a changed number, with no announced status message.
• Letting a checkout error appear as a red border alone, with no written field name or fix.
• Assuming a plugin fixes a variation template or a payment frame it cannot reach.

Last checked: October 28, 2026.

FAQ

Does a WooCommerce store need different checks from a plain WordPress site?

Yes, in one respect. The WordPress checks still apply, but a store adds product galleries, variation selectors, a cart and a checkout.

What should alt text say for a product photo?

It should name the product and the detail that photo shows, such as the front view or a close up of a fabric detail.

How do I test a variation selector without a screen reader?

Put the mouse aside and use Tab, Enter and Space to reach and select each option. Confirm the selected option is stated in text, and an out of stock option is marked as unavailable in words.

Can a plugin fix my checkout templates automatically?

No, not in the sense this article means. A WordPress plugin can apply its three render time fixes and a scan can flag missing labels and names. Rewriting a variation selector or a checkout template is theme work, and a payment frame inner control sits with the payment provider.

Sources

• W3C Understanding Success Criterion 1.1.1: Non-text Content, checked October 28, 2026
• W3C Understanding Success Criterion 1.4.1: Use of Color, checked October 28, 2026
• W3C Understanding Success Criterion 2.1.1: Keyboard, checked October 28, 2026
• W3C Understanding Success Criterion 4.1.2: Name, Role, Value, checked October 28, 2026
• W3C Understanding Success Criterion 4.1.3: Status Messages, checked October 28, 2026