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.
Primary source: w3.org