Fixing Focus Visible on Webflow (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.
Webflow — where to look
Designer supports a Focused state per element; project-wide custom code for a global rule.
What to do
Define the focus state on the base classes rather than per element, otherwise it has to be repeated everywhere. A global :focus-visible rule in custom code is usually the more maintainable option.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.
How to verify the fix
- 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.
Other platforms
- Fixing Focus Visible on Shopify
- Fixing Focus Visible on WooCommerce
- Fixing Focus Visible on Wix
- Fixing Focus Visible on Squarespace
The full criterion
Read the full explanation of WCAG 2.4.7 Focus Visible, or the formal W3C definition.