WCAG 2.4.11 Focus Not Obscured (Minimum)

Success Criterion 2.4.11 requires that when an element receives keyboard focus, it isn't entirely hidden by other content the author controls, like a sticky header, sticky footer, or persistent cookie banner. It's a Level AA criterion under Guideline 2.4 (Navigable) — new in WCAG 2.2.

The specific, modern problem this addresses

Sticky headers and footers became a common web design pattern well after WCAG's earlier versions were written, and they created a new failure mode none of the older focus-related criteria quite captured: a keyboard user tabs down a page, and the field or link they just focused scrolls up underneath a sticky header — the focus indicator technically exists (satisfying 2.4.7), but it's now completely invisible, hidden behind an overlapping fixed-position element. The user has genuinely lost track of where focus is, even though nothing is "broken" in a way older criteria described.

Why this needed a dedicated new criterion

2.4.7 Focus Visible requires a focus indicator to exist somewhere in the page's styling. It doesn't address what happens when that visible indicator gets covered by an unrelated overlapping element after scrolling — a genuinely different failure mode that only became common with the rise of sticky/fixed positioning as a mainstream layout pattern, which is exactly why WCAG 2.2 added a targeted new criterion rather than relying on 2.4.7 alone.

What "Minimum" allows (versus the stricter AAA version)

This AA-level criterion only requires that the focused element is not entirely hidden — partial obscuring is allowed. A companion AAA-level criterion, 2.4.12 Focus Not Obscured (Enhanced), requires no part of the focused element be hidden at all. Most sites only need to satisfy the AA-level "at least partially visible" bar.

The practical fix

scroll-margin-top (or scroll-padding-top on the scrolling container) set to match the height of a sticky header ensures that when an element scrolls into view via focus or anchor navigation, the browser leaves enough room to keep it clear of the fixed overlay:

:focus {
  scroll-margin-top: 80px; /* matches the sticky header's height */
}