WCAG 2.4.7 — Focus Visible
When a control receives keyboard focus, there must be a visible indicator showing where that focus is.
What this means for a store
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.
The failures we see most often
A blanket outline:none or outline:0 rule in the stylesheet.
Why it happens: The default browser focus ring is considered ugly, so it is removed globally and never replaced with an alternative.
A focus style exists but has too little contrast against the background to be seen.
Why it happens: The indicator is styled in a light brand tint. It technically exists and is practically invisible.
Focus is visible on links but not on buttons, form fields or custom components.
Why it happens: The style is written for the anchor element only, and custom components built from divs never had a focus state at all.
The focused element is behind a sticky header or cookie banner, so the indicator is technically rendered but not visible.
Why it happens: Overlapping fixed-position elements. This is closely related to WCAG 2.2's Focus Not Obscured criterion.
How to check it yourself
- Press Tab repeatedly from the top of a product page and confirm you can always see where you are.
- Search the stylesheet for outline:none and outline:0 and check each occurrence provides an alternative indicator.
- Check buttons, form fields, swatches and the cart drawer specifically, not just links.
- Confirm the indicator is still visible when the focused control sits under a sticky header.
Fixing it, by platform
- Shopify — Focus Visible Theme stylesheet: the focus rules in assets/base.css.
- WooCommerce — Focus Visible Theme or child-theme stylesheet; page builder global CSS.
- Webflow — Focus Visible Designer supports a Focused state per element; project-wide custom code for a global rule.
- Wix — Focus Visible Wix applies its own focus indicator by default; problems usually come from custom CSS added through an embed.
- Squarespace — Focus Visible Custom CSS panel; some templates include an outline reset.
What this page covers
What follows is the practical meaning of a WCAG 2.2 success criterion. Automated tests catch only a portion of accessibility issues, so a clean scan result does not mean compliance. Platform paths vary by version and theme.
Source
The formal definition of this criterion: W3C — Understanding Focus Visible