2.4.12 Focus Not Obscured (Enhanced)

Level AAA · added in WCAG 2.2

When an element receives keyboard focus, no part of it may be hidden by content you added to the page. This level AAA criterion is stricter than 2.4.11, which only forbids hiding the element entirely.

Who it helps

Sighted keyboard users need to see the whole focused element to know what it is and what will happen. Screen magnifier users, who see only part of the screen, are hurt most when focus slips under a sticky bar.

How to meet it

Set scroll-padding-top and scroll-padding-bottom to at least the height of sticky headers and footers, plus a small margin for the focus outline.
Remember that partial overlap fails here, even though it passes 2.4.11.
Show cookie notices and chat prompts in the page flow or as a modal dialog, so they never cover focusable content.
Check that tooltips and other popups you open don't cover the next element in the tab order.
Level AAA isn't required by most laws or policies, which point to AA. It's still worth meeting, and the same CSS that fixes 2.4.11 often fixes this.

Examples

Fails:Scroll padding smaller than the 80px header, so focused links are half covered

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

Passes:Scroll padding that clears the header and leaves room for the focus outline

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

Passes:A sticky footer with matching bottom padding

.cookie-bar {
  position: fixed;
  bottom: 0;
  height: 64px;
}
html {
  scroll-padding-bottom: 80px;
}

Can a scanner detect this?

axe-core has no rule for this criterion, because overlap depends on scroll position, screen size and which element is focused. You need to tab forward and backward through each page, at several window sizes, and look for any covered part.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Setting scroll padding to the exact header height, so the focus outline still slides under it.
Testing only on a large desktop window, where sticky bars rarely overlap content.
Forgetting that a sticky header grows taller when text wraps on narrow screens.
Leaving a floating chat button over the bottom-right corner of the page content.

Official W3C explanation of 2.4.12

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026