Focus indicator
A focus indicator is the visible outline or styling that shows which element currently has keyboard focus, typically a 2-3px outline drawn by the browser.
Detailed explanation
WCAG SC 2.4.7 (Focus Visible) requires that any keyboard-operable element have a visible focus indicator. WCAG 2.2 added SC 2.4.13 (Focus Appearance) tightening the requirement: the indicator must be at least 2 CSS pixels thick and meet a 3:1 contrast ratio against unfocused state.
Browsers ship a default focus ring, but many themes deliberately hide it via `outline: none` or `outline: 0` for aesthetic reasons. Removing the focus ring without replacing it with another visible state is a WCAG failure that affects every keyboard user.
Best practice: use `:focus-visible` to show the indicator only when keyboard focus is the input modality (so mouse clicks don't leave a lingering ring), and ensure the styling meets the 2px / 3:1 thresholds.
How this applies to Shopify stores
AccessComply's FocusIndicatorAgent detects themes that hide focus styles and adds a brand-aligned `:focus-visible` ruleset to your theme's CSS. The CSS extension also installs a global high-contrast focus ring that overrides theme-level removals.
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