A WooCommerce accessibility checklist in 10 points

WooCommerce itself is built with accessibility in mind, but a shop is more than WooCommerce: a theme, a page builder, plugins and hundreds of products. These are the ten problems we find most often, from the product photo to the checkout, with the RGAA criterion each one breaks and how to fix it.

1. Product photos without a text alternative

A blind customer hears "image" and nothing else. Write an alternative for every photo that carries information: what the product looks like, from this angle (RGAA 1.1). Set it in the media library and check the images already placed in descriptions, which keep their old alternative. See our guide to alt text for product images.

2. No main region, no working skip link

Screen reader and keyboard users jump to the content through the page's regions (<main>, <nav>) and a "Skip to content" link (RGAA 12.6, 12.7). On our own test shop, built with a popular theme and a page builder, 35 of 55 pages had one or both of these faults: no <main> region, or a skip link pointing to an anchor that did not exist.

3. Keyboard focus you cannot see

A theme that removes the focus outline (outline: none) leaves keyboard users guessing where they are (RGAA 10.7). Keep a visible focus style on every link, button and field.

4. Prices and buttons with too little contrast

Light grey prices, pale "sale" labels and white text on pastel buttons are common. Text needs a contrast of at least 4.5:1 with its background, 3:1 for large text (RGAA 3.2).

5. Icons without a name

The wishlist heart, the cart icon, the search magnifier, the social links: a link or button with only an icon is announced as "link" or "button" (RGAA 6.2, 11.9). Give each one a text, even visually hidden, or an aria-label.

6. Checkout fields without a label or autocomplete

A field whose only label is a placeholder loses it as soon as the customer types (RGAA 11.1). Name, address, e-mail and phone fields should also declare their purpose with autocomplete, so browsers and assistive tools can fill them in (RGAA 11.13).

7. Required fields that only say so with a star

"Required" must be announced, not only shown with a red asterisk: use the required attribute and say what the asterisk means (RGAA 11.10).

8. Shop messages that nobody hears

"Added to your cart", "Coupon applied", "Please enter a valid postcode": these messages appear on screen, but a screen reader only reads them if they are marked as status messages (role="status", or role="alert" for errors) (RGAA 7.5).

9. The wrong page language

A multilingual shop that declares lang="fr-FR" on its English product pages makes screen readers read English with a French accent (RGAA 8.3, 8.4). We found exactly this on our test shop: each page must declare the language of its own content.

10. Only one way to find a page

If the menu is the only way to reach a page, customers who cannot use it are stuck. Offer a second way: a search form or a site map linked from every page (RGAA 12.1). On our test shop, all 55 pages were missing one.

Where to begin

Points 2, 3 and 9 come from the theme: fix them once and every page benefits. Points 1 and 5 depend on your content and your products. Points 6 to 8 concern the checkout, where a lost customer is a lost sale. Relyo checks all ten on every page and applies the fixes that do not require guessing — skip link, visible focus, page language, autocomplete, announced shop messages — as pages are displayed.