Skip to main content
WCAGrules
Quick navigation

Stop sticky headers hiding focused content

When a keyboard user tabs to a link below the fold, the browser scrolls it into view and a fixed header or footer can be sitting exactly where it lands. scroll-padding tells the browser to keep that much space clear when it scrolls anything into view, so focus arrives below the header rather than under it. W3C lists C43 as sufficient for 2.4.11 Focus Not Obscured (Minimum) and for the AAA enhanced version, because scrolling the element fully clear satisfies both. The two rules differ in how much obscuring they allow, none at all for the enhanced one and complete obscuring for the minimum. W3C's own worked example is a fixed footer rather than a header, and it pairs scroll-padding with ordinary padding to make the space. That is worth knowing, because cookie bars, chat launchers and sticky action bars are the same problem from below.

How we find it in an audit

We tab through every page and watch where focus lands, especially the first few stops after a scroll. Then we repeat it with the cookie bar showing and the chat widget open, since those are the elements missing from a clean test environment. Scanners see the fixed positioning and cannot see where focus ends up.

How affected users experience it

Somebody navigating by keyboard presses Tab, hears nothing useful, and cannot see the focused control because the header is on top of it. They have no way to know whether they are on the link they wanted, so the only safe move is to shift-Tab back and start again. Repeat that once per section and the page stops being usable by keyboard at all.

Passes vs. fails

Passes: reachable, visible, activatable. Fails: a div the keyboard cannot reach.

Passes

header { position: sticky; top: 0; height: 64px; }
html { scroll-padding-top: 80px; }

Fails

header { position: sticky; top: 0; height: 64px; }
/* tabbed-to elements scroll in underneath it */

Other ways to satisfy this rule

2 guides on this site are filed under 2.4.11 Focus Not Obscured (Minimum). W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique C43: Using CSS scroll-padding to un-obscure content. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations