Annex

Fixing Focus Visible on WooCommerce (WCAG 2.4.7)

When a control receives keyboard focus, there must be a visible indicator showing where that focus is.

Why it matters

This is the failure that turns a technically operable store into an unusable one. Keyboard support can be perfect, but if the focus ring has been removed the customer is tabbing blind — they cannot tell whether they are on the size selector or the Add to Cart button. The usual cause is a single line of CSS added early in a theme to remove an outline the designer disliked, and it silently affects every control on every page.

WooCommerce — where to look

Theme or child-theme stylesheet; page builder global CSS.

What to do

Add a :focus-visible rule in the child theme so it survives theme updates, and make sure it covers buttons and inputs rather than anchors alone. If you inherit a plain :focus rule, the ring will also show on mouse clicks — usable, but the reason people delete it.

Verification status

Checked by reading the platform’s own source code. Storefront does provide a real indicator (outline: 2px solid) but uses :focus rather than :focus-visible, so the ring appears on mouse clicks too. Its two outline:none rules are not blanket resets — one is on a layout container, the other on the skip link, which is revealed again on focus.

Source: https://github.com/woocommerce/storefront/blob/trunk/assets/css/base/_base.scss

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

How to verify the fix

  1. Press Tab repeatedly from the top of a product page and confirm you can always see where you are.
  2. Search the stylesheet for outline:none and outline:0 and check each occurrence provides an alternative indicator.
  3. Check buttons, form fields, swatches and the cart drawer specifically, not just links.
  4. Confirm the indicator is still visible when the focused control sits under a sticky header.

Other platforms

The full criterion

Read the full explanation of WCAG 2.4.7 Focus Visible, or the formal W3C definition.