WooCommerce
WooCommerce accessibility: where the problem actually is
WooCommerce has something rare in this field: the project publishes its own accessibility position and states that the front end of the core plugin is “substantially conformant” with WCAG 2.2 AA. That is more than almost anyone says. The catch is that a WooCommerce store is not just the plugin: it is a theme, ten to thirty plugins and a payment gateway. That is where it breaks.
WooCommerce core is usually not the problem. The problems are notices that are never announced, variation dropdowns with no label, faceted filters from plugins that the keyboard cannot reach, and checkout fields that flag an error with a red border alone. Nearly all of it is fixed with hooks and overridden templates, without touching core.
What WooCommerce provides and what you provide
What WooCommerce provides: the project states that the front end of the core plugin is substantially conformant with WCAG 2.2 level AA and openly acknowledges gaps in the admin. That is an honest and uncommon statement.
What you provide: the theme — and the gap between an accessibility-ready theme and one bought on a template marketplace is enormous. The filter, popup and review plugins. The payment gateway, often a third-party iframe whose accessibility you do not control. And the content: clear product titles, alternative text, error messages that say what to correct.
The practical consequence: if your store does not comply, the work is almost never in core but in four or five specific points of your installation.
The seven barriers that show up almost every time
| Component | What fails | WCAG | The fix |
|---|---|---|---|
Notices and errorswoocommerce-message / error | “Added to cart” and error messages are never announced to screen-reader users. | 4.1.3 | Wrap them in a role="alert" or aria-live region through a filter. |
Variation pickervariable.php (variaciones) | Size and colour dropdowns arrive with no associated label. | 1.3.1 · 3.3.2 | Tie each select to its label for in the overridden template. |
AJAX add to cartadd-to-cart AJAX | The cart updates silently: it changes visually, nothing happens for a screen reader. | 4.1.3 | Mark the container that updates with aria-live="polite". |
Faceted filtersfiltros por facetas (plugin) | Filter plugins tend to build fake checkboxes the keyboard cannot reach. | 2.1.1 · 2.4.7 | Use native controls, or give the custom ones a role, a state and a visible focus. |
Checkout fieldsform-checkout.php | Errors flagged by colour alone, and fields with no associated description. | 3.3.1 · 3.3.2 | Explicit error text and aria-describedby on fields that carry help. |
Payment gatewaypasarela de pago externa | The provider’s iframe may be inaccessible and you cannot fix it from your site. | 4.1.2 | Test a real payment with the keyboard and, if it fails, switch provider or push back on them. |
The themetema (Storefront u otro) | Low contrast and invisible focus: the most common flaw in marketplace templates. | 1.4.3 · 2.4.7 | Choose an accessibility-ready theme, or fix contrast and focus in the child theme. |
Fixes go in as hooks in your child theme’s functions.php or as templates overridden under woocommerce/. Never by editing core: the next update would wipe it.
Why the accessibility plugin does not solve it
The WordPress repository is full of accessibility plugins promising compliance behind a checkbox. They add a toolbar with high contrast and font sizing. They do not fix a notice that is never announced, a filter the keyboard cannot operate, or a checkout field with no label.
There is also a WordPress-specific problem: every plugin adds its own HTML to the front end, so a plugin that “fixes accessibility” often collides with markup another plugin has just produced. The route that works is the boring one: pick the theme carefully, review the plugins that render HTML, and fix with hooks.
Test your store in ten minutes, no tools needed
- Put the mouse away. From the homepage, reach a variable product, pick size and colour, add it to the cart and get to checkout with Tab, Shift+Tab, Enter and the arrows.
- Add to cart and listen. If you use AJAX add-to-cart, check that the “added to cart” notice sits inside an
aria-liveregion. - Submit checkout with a field deliberately empty. The error must say which field and what is missing, not just paint the border red.
- Operate the filters with the keyboard. This is where most plugins fail.
- Zoom to 200 % and check the cart table is still usable.
Want the full list for your store?
The free scan gives you a first map of your store’s barriers in minutes: no account, no card, no commitment.