Reviewed November 3, 2026

Focus Not Obscured: Sticky Headers Are Failing Checkouts at WCAG 2.4.11

WCAG 2.2 success criterion 2.4.11, Focus Not Obscured (Minimum), is a Level AA requirement: when a component receives keyboard focus, it must not be entirely hidden by content the author created. On commerce sites the hiding is done by sticky headers that grow a promo bar, by fixed chat widgets parked over the footer links, and by cookie banners that sit on top of the checkout form. The standard fix in CSS is boring and reliable: scroll-padding-top on the page set to the sticky header's full height, so the browser scrolls far enough to keep the focused element in view.

Tab through your own checkout with the mouse unplugged. Somewhere around the shipping form, focus will slide under the sticky header and vanish. You can still type, the field still works, but the one visual signal a keyboard user navigates by has gone behind a marketing bar. That is the exact failure 2.4.11 was written to name.

WCAG 2.2 added nine criteria, and this is the one storefronts trip first, because commerce templates stack fixed furniture: announcement bar, sticky navigation, sticky add to cart on scroll, chat launcher, consent banner. Every layer is defensible in a design review. Together they eat the viewport from both ends.

Minimum versus enhanced, and what AA actually buys

Criterion 2.4.11 is the minimum version: the focused element must not be entirely obscured. Partly covered passes AA, which surprises people until they consider mobile viewports where demanding zero overlap would outlaw sticky headers altogether. The enhanced version, 2.4.12 at Level AAA, requires no overlap at all. Laws and settlement agreements overwhelmingly reference AA, so 2.4.11 is the operative line for most stores.

It sits next to the older 2.4.7, Focus Visible, and the two fail independently. A checkout can show a beautiful high contrast focus ring that is rendered, correctly, underneath a sticky bar. Visible in the code, invisible in the room. Audits that only check for the presence of a focus style miss the obscuring failure completely.

The twenty minute test

Open the checkout and the account pages in a narrow window, turn on the consent banner, and tab slowly from the top. Note every place focus disappears or lands partly under fixed content. Pay attention to the moment a sticky add to cart bar appears mid scroll on product pages; content that materializes after scroll is a repeat offender because the designer tested the page at rest.

Then fix the geometry before the styling. Set scroll-padding-top on the html element to the combined height of everything fixed at the top, and scroll-padding-bottom for bottom bars. Re-test with the banner open and closed, because the banner changes the geometry, and the criterion applies in the state the user actually meets.

Why overlays keep reintroducing this

Third party widgets inject their own fixed layers after your audit ends. A chat tool updates its launcher size, a consent platform adds a preferences bar, a reviews app floats a badge. None of them check your focus order. The durable defense is a standing tab through test in your release checklist for the five money pages: product, cart, checkout, account, and search, run with every widget live.

State that plainly in procurement. When a vendor's widget obscures focus or traps it, that is a conformance failure your store carries, not a quirk of their roadmap. Vendors respond to accessibility requirements written into renewals; they rarely respond to bug reports filed as design feedback.

Frequently asked questions

Does 2.4.11 ban sticky headers?

No. It bans a focused element being entirely hidden by them. With scroll padding sized to the header, a sticky header and full conformance coexist. The criterion targets the geometry bug, not the design pattern.

Which WCAG version should a US store audit against?

WCAG 2.1 AA is the version most US settlement agreements and the current Section 508 standard reference, and 2.2 AA is a superset that keeps those criteria and adds nine more. Auditing to 2.2 AA covers 2.1 AA, so it is the safer current target for a new audit.

How do I test focus not obscured without special tools?

A keyboard and twenty minutes will find most failures. Tab through each template with banners and widgets in their live states and watch where the focus indicator goes. Automated scanners cannot judge whether an element is hidden behind another layer; this one is a manual check by design.

Is partial covering ever acceptable?

At Level AA under 2.4.11, yes: the requirement is that the focused component is not entirely hidden. If you want a stricter internal standard, 2.4.12 at AAA forbids any overlap. Just know which line your audit is certifying when you report a pass.