Annex

Fixing Focus Not Obscured (Minimum) on Webflow (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.

Webflow — where to look

Designer: the fixed navbar component; custom code for scroll-margin.

What to do

Webflow does not set scroll-margin automatically. Add a global rule in custom code offsetting by the navbar height, and check it at each breakpoint since the navbar height changes.

Verification status

Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to 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.