Annex

Fixing Focus Visible on Shopify (WCAG 2.4.7)

When a control receives keyboard focus, there must be a visible indicator showing where that focus is.

Why it matters

This is the failure that turns a technically operable store into an unusable one. Keyboard support can be perfect, but if the focus ring has been removed the customer is tabbing blind — they cannot tell whether they are on the size selector or the Add to Cart button. The usual cause is a single line of CSS added early in a theme to remove an outline the designer disliked, and it silently affects every control on every page.

Shopify — where to look

Theme stylesheet: the focus rules in assets/base.css.

What to do

Do not leave a blanket outline reset in place. Reset on :focus, then restore the indicator on :focus-visible so the ring appears for keyboard users but not on mouse clicks. Ship a class-based fallback for browsers without :focus-visible support.

Verification status

Checked by reading the platform’s own source code. Dawn already does this: *:focus resets the outline, *:focus-visible restores it from --focused-base-outline, and a .focused class covers browsers without :focus-visible. Worth checking one thing though — that outline is defined at 50% opacity of the foreground colour, so on a low-contrast colour scheme it can fall short of the 3:1 needed for non-text contrast.

Source: https://github.com/Shopify/dawn/blob/main/assets/base.css

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Press Tab repeatedly from the top of a product page and confirm you can always see where you are.
  2. Search the stylesheet for outline:none and outline:0 and check each occurrence provides an alternative indicator.
  3. Check buttons, form fields, swatches and the cart drawer specifically, not just links.
  4. Confirm the indicator is still visible when the focused control sits under a sticky header.

Other platforms

The full criterion

Read the full explanation of WCAG 2.4.7 Focus Visible, or the formal W3C definition.