Focus indicator

Detailed explanation

WCAG SC 2.4.7 (Focus Visible) requires a visible focus indicator for keyboard-operable interfaces. WCAG 2.2 adds Level AA SC 2.4.11 (Focus Not Obscured — Minimum); SC 2.4.13 (Focus Appearance) is a separate Level AAA criterion with more prescriptive size and contrast requirements.

Browsers ship a default focus ring, but a theme can hide it via outline: none or outline: 0. Removing the focus ring without an equivalent visible state can fail Focus Visible and makes keyboard location difficult to perceive.

A common implementation uses :focus-visible so keyboard focus is visually clear without forcing the same presentation for every pointer click. Test the indicator on all relevant backgrounds, states, and components against the target WCAG level.

How this applies to Shopify stores

AccessComply can report selected focus-style patterns visible to automated rules on reached pages. An eligible safely source-mapped CSS candidate may be presented for merchant approval, while obscured focus, component-specific states, and keyboard usability still need manual testing.

What merchants should check next

Treat this term as a practical audit prompt, not just a definition. Check the storefront pages where the concept shows up in real customer journeys: product discovery, add-to-cart, cart drawer, checkout handoff, account login, and support contact flows. If the issue affects code, verify the rendered HTML and computed browser output after the theme change. If it affects copy or media, keep the merchant-facing wording accurate and easy to maintain.

Primary source: w3.org