WCAG 2.4.11 — Focus Not Obscured (Minimum)
When a control receives keyboard focus, it must not be completely hidden behind other content such as a sticky header or a cookie banner.
What this means for a store
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.
The failures we see most often
A sticky header covers the focused element after the browser scrolls it into view.
Why it happens: The browser scrolls the element to the top of the viewport; the fixed header occupies exactly that space. Nothing tells the browser to leave room.
A cookie consent banner fixed to the bottom hides focused controls in the footer.
Why it happens: Consent banners are injected by a third-party script and are not part of the layout the theme reasons about.
A sticky Add to Cart or promo bar covers form fields further down the page.
Why it happens: Conversion-oriented sticky bars are added late, usually by an app, and are never keyboard-tested.
A live chat widget overlaps focused controls in the lower corner.
Why it happens: Chat widgets sit at a high z-index in a fixed corner and are sized independently of the page.
How to check it yourself
- 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.
- Repeat with the cookie banner still showing, before it is dismissed. This is the state most first-time visitors are in.
- Repeat with the chat widget open.
- 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.
Fixing it, by platform
- Shopify — Focus Not Obscured (Minimum) Theme stylesheet and the sticky header section.
- WooCommerce — Focus Not Obscured (Minimum) Theme sticky header styles; consent plugin; sticky add-to-cart plugin.
- Webflow — Focus Not Obscured (Minimum) Designer: the fixed navbar component; custom code for scroll-margin.
- Wix — Focus Not Obscured (Minimum) Frozen or sticky header settings; third-party app widgets.
- Squarespace — Focus Not Obscured (Minimum) Fixed header settings in Site Styles; promotional pop-up; custom CSS.
What this page covers
What follows is the practical meaning of a WCAG 2.2 success criterion. Automated tests catch only a portion of accessibility issues, so a clean scan result does not mean compliance. Platform paths vary by version and theme.
Source
The formal definition of this criterion: W3C — Understanding Focus Not Obscured (Minimum)