Annex

Fixing Keyboard on WooCommerce (WCAG 2.1.1)

Everything a customer can do with a mouse must also be possible with a keyboard alone.

Why it matters

This is the failure that ends a sale outright. If the size selector, the cart drawer or the payment step cannot be reached with Tab and operated with Enter or Space, the customer does not get a degraded experience — they get no way to buy at all. It affects far more people than screen reader users: anyone with a motor impairment, anyone using voice control or a switch device, and anyone whose trackpad has failed. Keyboard support is also what makes the rest of accessibility testable, so a keyboard failure usually indicates several others.

WooCommerce — where to look

Theme templates and, more often, the variation swatch and quick-view plugins.

What to do

Test each plugin with the keyboard before shipping it — swatch plugins are the usual source of this failure. WooCommerce's default variation dropdowns are native selects and work; problems normally appear when a plugin replaces them.

Verification status

Checked by reading the platform’s own source code. Core renders variation pickers as native select elements, which are keyboard operable for free. Keyboard failures therefore come from swatch or quick-view plugins that replace those selects, so test each plugin rather than the theme.

Source: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/single-product/add-to-cart/variable.php

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Unplug the mouse. Genuinely — do not just decide not to use it.
  2. From the top of a product page, complete a purchase using only Tab, Shift+Tab, Enter, Space and the arrow keys.
  3. Open the cart drawer and confirm focus moves into it, that Escape closes it, and that focus returns to the control that opened it.
  4. Tab through the whole page once and confirm focus never gets stuck in an embedded widget.

Other platforms

The full criterion

Read the full explanation of WCAG 2.1.1 Keyboard, or the formal W3C definition.