WooCommerce accessibility

WooCommerce accessibility is WordPress plus the product loop, the variations, the cart and the checkout. AltGrade scans those templates and tells you what to change. Shoppers get a store they can finish.

Product loop and single product

Set the image alt in the Media Library and confirm the loop prints that alt, not the attachment file name. The product name on the single page should be the h1. Description sections sit under it as h2. Variation radios should keep the attribute name, so people hear Size and then Small, not three orphaned words.

Sale badges and price colour fail contrast more often than body text. Darken them in the customizer. Quantity buttons need a name, such as Increase quantity, and a hit area of at least 24 pixels.

Cart and checkout

Do not hide WooCommerce labels with CSS. Placeholder text is not a label. Keep the error list visible. A red border with no sentence is an invisible error. Custom checkout fields need a label in the checkout field filter, and personal-data fields should keep autocomplete tokens such as email and name.

Sticky add-to-cart bars cover the next focused field. Add scroll-padding equal to the bar. Price sliders that only drag need number inputs beside them. Mini-carts that vanish before the pointer arrives need to stay open on focus and close on Escape.

How to find the failures

Scan the shop URL. Include a category, a variable product, the cart, and checkout. The free scan stops at 10 pages and shows the top five groups. Tab a variable product and confirm every option is reachable. Submit checkout empty and read the error. It should name the field.

Theme builders and page builders add a second layer. If the product template is a set of blocks, fix the block. If it is a PHP template, fix the template. The scan shows the rendered page either way.

Ship the fix and watch it

AltGrade maps each issue to WooCommerce steps: customizer colours, Media Library alt, checkout labels, focus styles. The £49 audit covers up to 50 pages and a PDF you can send to the theme developer. Monitoring from £19 a month catches the next plugin update. No tax is added.

Put the labels back, rescan, and keep the dated score. That is the work. An overlay on the storefront is not.

Variation buttons and the mini cart

Swatches are the failure we see most. If the theme draws a div with a background colour and a click handler, a keyboard user never reaches the size. Use a real button and put the size in the accessible name.

The mini cart has the same problem when the count badge is the only content of the link. Name it Cart, 2 items. Then open the cart page and confirm the quantity field has a label, not only a plus icon.

Checkout is WooCommerce's own form unless a plugin replaced it. Keep the labels. If a one-page checkout plugin removed them, that plugin is the fix, not a colour tweak in the customizer. Rescan the checkout URL after the plugin change. Publish the theme and scan the cart as well.

Questions

Should I hide checkout labels for a cleaner look?

No. Put them back. People need the name of the field after they start typing.

Does this replace a WooCommerce audit?

It gives you the automated findings and the steps. A person still needs to buy something with a keyboard and a screen reader.

What does the scan miss?

Automated scans cannot catch every WCAG issue. Confirm the variation names and the checkout copy yourself.

Related

Scan your site