Focus Visible
Any keyboard-operable element must show a visible indicator when it receives focus.
What it requires
Browsers ship a default focus ring (a 2-3px blue outline) that satisfies 2.4.7 out of the box. Themes that hide this ring with `outline: none` or `outline: 0` and do not replace it fail this criterion immediately, on every interactive element, on every page.
The fix is either to remove the `outline: none` rule, or to replace it with `:focus-visible` styling that shows the ring only when keyboard input is the modality (so mouse clicks do not leave a lingering ring).
Common Shopify failure
Theme stylesheets with global `*:focus { outline: none }` or `button:focus { outline: 0 }` and no replacement — keyboard users cannot tell where they are on the page.
How to fix it
AccessComply rewrites `outline: none` rules to `outline: 2px solid var(--focus-color, #ea580c)` scoped to `:focus-visible`, plus a small `box-shadow` for elevation. The CSS extension also ships a global override that wins specificity battles.
Primary source: W3C — WCAG 2.0 Understanding 2.4.7