WCAG 2.4.7: Focus Visible

Quick answer: Keyboard users need a clear visible indicator showing which control is currently focused.

In the US, WCAG 2.2 Level AA is the de facto standard for ADA compliance. That is why this criterion matters for Shopify, WooCommerce, Magento, Wix, Squarespace, Webflow, BigCommerce, and custom storefronts selling to US consumers.

Why this criterion matters in US cases

US retail disputes shaped by cases such as Domino's and Winn-Dixie often involve broken keyboard interaction. Focus visibility is a practical part of that same barrier set, especially on dark themes and app-heavy storefronts.

Common violations on US ecommerce sites

• Theme CSS removes outlines from all links and buttons.
• Focus styles on dark buttons are too subtle to distinguish.
• Custom radio cards show hover states but no keyboard focus state.
• Coupon inputs and search fields lose the browser default outline without replacement.

How to fix it

1. Never remove outlines unless you replace them with a stronger focus treatment.
2. Use a consistent focus token with enough contrast on every background.
3. Apply focus styles to custom components, not only native inputs.
4. Review third-party apps because they often reset outline styles globally.

Start with the live customer journey, not design mocks. Audit homepage, collection, product, cart, account, and checkout-adjacent flows first because those pages create both legal risk and direct revenue loss.

Code example

*:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }

FAQ

What is WCAG 2.4.7?
Keyboard users need a clear visible indicator showing which control is currently focused.

Why does this matter for US ecommerce ADA compliance?
This criterion is frequently cited in US ADA lawsuits because keyboard users cannot complete product discovery, coupon entry, or checkout if the active element disappears visually.

What standard do US online stores use?
In the US, WCAG 2.2 Level AA is the de facto standard used to evaluate ADA compliance for ecommerce sites.

Check if your US store passes WCAG 2.4.7 → Free ADA Scan — Check Your US Store Now