Level AA

New in WCAG 2.2: when a component receives keyboard focus, it must not be entirely hidden by author-created content such as a sticky header, fixed footer, or cookie banner

2.4.11 Focus Not Obscured (Minimum)

In Plain Language

2.4.11 Focus Not Obscured (Minimum) is new in WCAG 2.2 at Level AA. The normative rule: when a user-interface component receives keyboard focus, the component must not be entirely hidden by author-created content[1]. At least part of the focused element has to remain visible in the viewport.

This is the minimum-level sibling of 2.4.12 Focus Not Obscured (Enhanced), Level AAA, which requires that no part of the focused element be hidden. 2.4.11 permits partial overlap; 2.4.12 does not.

Why It Matters

  • A sighted keyboard user who cannot see the focus ring cannot tell which control is about to activate. Pressing Enter on an invisible focus becomes a blind commit.
  • The failure mechanism is geometric, not semantic: the focused element is in the DOM, exposed to the accessibility tree, and receiving key events -- it is simply painted underneath a stacking context with a higher z-index. Screen magnifier and low-vision users lose context first because their viewport is a fraction of the screen, and anything under the sticky layer is gone.
  • Sticky headers (position: sticky; top: 0), fixed footers (position: fixed; bottom: 0), cookie consent bars, and sticky chat widgets are the recurring culprits. When the browser autoscrolls to bring a newly focused element into view, it scrolls the element to the edge of the scroll container -- which is behind the sticky overlay, not below it.

Examples

Do: scroll-padding-top offsets autoscroll below the sticky header
Sticky Navigation Bar

Tab through these links:

First link
Second link
Third link

✔ scroll-padding-top ensures focused elements are not hidden behind the sticky header

/* Scroll container reserves space at the top equal to the sticky header */
html {
  scroll-padding-top: 4rem; /* matches header height */
}

header {
  position: sticky;
  top: 0;
  height: 3.5rem;
  z-index: 10;
}
Don't: fixed footer paints over the focused link

Tab to the link below -- it sits behind the fixed footer:

✘ The focused link is entirely hidden behind the fixed cookie banner

Cookie consent banner covering focused content

How to Fix It

  1. Reserve scroll space with scroll-padding. Set scroll-padding-top on the scroll container (usually html) equal to the sticky header's rendered height, and scroll-padding-bottom equal to any fixed footer or cookie bar. The browser's autoscroll-on-focus now lands the focused element inside the visible strip rather than under the overlay. This is the technique W3C lists as sufficient for 2.4.11 (C43).
  2. Use scroll-margin-top on the focusable element when the overlay height varies per page or component. scroll-margin-top: 4rem on the target tells the browser to treat that element as if it had a 4rem margin for scroll alignment purposes, without affecting layout.
  3. Make overlays dismissible and remember it. A cookie banner that can be dismissed with Escape -- and stays dismissed -- removes the obscuring layer entirely. W3C's note on user-opened persistent content allows the overlay to remain if the user can reveal the focused element without dismissing it (e.g. by scrolling)[1].
  4. Do not hide focus with outline: none. Obscuring is a layout problem; removing the focus ring on top of it makes the failure invisible to sighted keyboard users and also trips 2.4.7 Focus Visible. Keep the ring, fix the scroll offset.
  5. Verify with a keyboard sweep. Tab through every interactive element from top to bottom of the page with a sticky header and any bottom-docked widgets active. If any focused element lands fully behind an overlay, 2.4.11 is failing on that element. A scanner can flag likely offenders by comparing focus-ring bounding boxes against sticky/fixed-position element rects, but the authoritative check is a human Tab pass.

References

  1. [1] W3C (2023). Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html ↩ ↩