a11y/focus-not-obscured

Why

When the browser scrolls a focused link under a sticky header or a cookie bar, a keyboard user cannot see where they are. This is new in WCAG 2.2 and no automated engine checks it.

Fix

Set scroll-padding-top (and scroll-padding-bottom for a sticky footer) on the scroll container (html) to the height of the sticky bars, ideally from the same custom property. Let banners be dismissed, and do not cover content with a non-modal overlay that stays open while the user tabs.

Examples

/* bad: a 64px sticky header and nothing else */
.site-header { position: sticky; top: 0; height: 4rem; }
/* good */
:root { --header-h: 4rem; }
html { scroll-padding-top: calc(var(--header-h) + 0.5rem); }
.site-header { position: sticky; top: 0; height: var(--header-h); }

Sources

• WCAG 2.2, Understanding SC 2.4.11 Focus Not Obscured (Minimum)
• WCAG 2.2 Technique C43, using CSS scroll-padding to un-obscure content

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/focus-not-obscured