2.4.11 Focus Not Obscured (Minimum)

Level AA · added in WCAG 2.2

When an element receives keyboard focus, it must not be entirely hidden by content you added to the page. Sticky headers, sticky footers, chat widgets and cookie banners are the usual causes.

Who it helps

Sighted keyboard users cannot act on what they cannot see, so a hidden focused link leaves them lost. Screen magnifier users and people using voice or switch control also need to see the focused element.

How to meet it

Set scroll-padding-top on the scroll container to match the height of a sticky header.
Set scroll-padding-bottom when a sticky footer sits at the bottom of the screen.
Show cookie notices as a modal dialog, or in the page flow, so they never sit on top of focusable content.
Keep chat buttons and floating widgets small, or let users close them with a single action.
Tab forward and backward through each page and check that focus is never completely covered.

Examples

Fails:A sticky header with no scroll padding: focused links scroll under it

.site-header {
  position: sticky;
  top: 0;
  height: 80px;
}

Fails:A fixed cookie banner that covers links near the bottom of the screen

<div class="cookie-banner" style="position: fixed; bottom: 0; left: 0; right: 0; height: 160px;">
  <p>We use cookies.</p>
  <button type="button">Accept</button>
</div>

Passes:Scroll padding keeps focused elements clear of the sticky header

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

Passes:The cookie notice as a modal dialog, so focus cannot move behind it

<dialog id="cookies" aria-labelledby="cookies-title">
  <h2 id="cookies-title">Cookie choices</h2>
  <p>We use cookies.</p>
  <button type="button">Accept</button>
</dialog>
<script>
  document.getElementById("cookies").showModal();
</script>

Can a scanner detect this?

axe-core has no rule for this criterion, because the result depends on scroll position, viewport size and focus movement. A person must tab through each page at common screen sizes and watch for hidden focus.

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

Common mistakes

Testing only with a mouse, so you never see focus slide under a sticky header.
Fixing the sticky header but forgetting a fixed cookie banner, chat widget or footer.
Hard-coding a scroll padding value that is shorter than the header on small screens.
Assuming partial overlap fails: at this level only fully hidden focus fails, but less overlap is still better.

Official W3C explanation of 2.4.11

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