Focus Not Obscured
When an element receives keyboard focus, it must not be entirely hidden by sticky headers, cookie banners, chat widgets, or footers. New in WCAG 2.2 (Level AA). The most common new 2.2 failure in audits.
When you tab to something, a sticky header or cookie banner mustn't hide it — you need to see what you've landed on.
WCAG 2.4.11 (Level AA, new in 2.2) requires that when an element receives keyboard focus, it is not entirely hidden by author-created content. The Level AAA version (2.4.12) requires that no part of the element is hidden.
The scroll-padding-top CSS property is the simplest fix for sticky headers. For overlays and banners, consider using the inert attribute on background content or positioning them to push content rather than overlay it.
Why this matters
The most commonly failed new WCAG 2.2 criterion. Sticky headers, cookie consent banners, chat widgets, and notification bars frequently cover focused elements during keyboard navigation — making the page unusable for keyboard users who can't see where they are.
How to detect
Tab through the entire page with keyboard. Pay special attention when focus moves behind: sticky headers/footers, cookie banners, chat widgets, promotional overlays, and any position:fixed or position:sticky elements.
How to fix
/* Prevent sticky header from covering focused elements */
html {
scroll-padding-top: 80px; /* height of sticky header + buffer */
}
/* Ensure focused elements scroll into view with clearance */
:focus {
scroll-margin-top: 100px;
scroll-margin-bottom: 100px;
}
/* Cookie banner: use inert on main content or make banner non-overlapping */
.cookie-banner {
position: sticky; /* not fixed — pushes content down */
bottom: 0;
}