Start scanning free

( Operable / WCAG 2.4.12 )

Focused element is hidden behind a sticky header or footer

This check maps to Focus Not Obscured. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level AA WCAG 2.4.12 — Focus Not Obscured

What’s wrong

A position: sticky or position: fixed element — typically a header, footer, or cookie banner — overlaps and hides the currently focused element when keyboard users Tab through the page.

Why it matters

New in WCAG 2.2. When keyboard focus moves to an element behind a sticky overlay, the focused element is completely invisible. The user has no idea where focus is until they Tab past the obscured area. This is increasingly common as sticky headers have become a default pattern.

How to fix it

Add scroll-padding-top to the <html> element to offset scroll position when focus changes.

Before 
header {
  position: sticky;
  top: 0;
  height: 64px;
}
/* Focused elements behind the header are invisible */
After 
header {
  position: sticky;
  top: 0;
  height: 64px;
}

html {
  scroll-padding-top: 80px; /* header height + buffer */
}

If your sticky header height changes at different breakpoints, set scroll-padding-top dynamically via JavaScript to match the current header height.

Learn more