Annex

Fixing Focus Not Obscured (Minimum) on Shopify (WCAG 2.4.11)

When a control receives keyboard focus, it must not be completely hidden behind other content such as a sticky header or a cookie banner.

Why it matters

New in WCAG 2.2, so almost no site audited before 2023 has been checked against it — and almost every modern storefront has the pattern that breaks it. A sticky header plus a sticky Add to Cart bar plus a cookie banner means a keyboard user tabbing down the page repeatedly loses sight of where they are: the browser scrolls the focused element just into view, and the sticky header covers it. The customer is still technically on the control, but has no way to know.

Shopify — where to look

Theme stylesheet and the sticky header section.

What to do

Add scroll-margin-top to focusable elements, at least the height of the sticky header, so the browser leaves room when it scrolls focus into view. Where the header height changes on scroll, drive the value from the same variable the header uses.

Verification status

Checked by reading the platform’s own source code. Dawn does NOT set scroll-margin or scroll-padding anywhere in base.css while shipping a sticky header option. On a store with the sticky header enabled this criterion is likely to fail out of the box, so treat it as something to add rather than something to check.

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. Tab slowly down a long page — a checkout or a product page with a long description — and watch whether the focused control ever disappears under the header.
  2. Repeat with the cookie banner still showing, before it is dismissed. This is the state most first-time visitors are in.
  3. Repeat with the chat widget open.
  4. Test at a short viewport height, such as a laptop screen with the browser not maximised, where sticky elements take a larger share of the screen.

Other platforms

The full criterion

Read the full explanation of WCAG 2.4.11 Focus Not Obscured (Minimum), or the formal W3C definition.