In plain English
Sticky headers, sticky “add to cart” bars, cookie notices, and chat bubbles all pin themselves over your page. That looks fine with a mouse. But a keyboard user Tabbing down the page can land on a link or field that has just scrolled up and hidden behind the sticky header, so they cannot see where they are.
This rule, new in WCAG 2.2, says the thing you just focused cannot be completely covered. Part of it must stay visible.
Who this is for
- Keyboard users, who rely on seeing the focused element to know their place.
- Low-vision users who zoom in, where sticky bars take up even more of the screen.
How to check and fix it yourself
Tab slowly down a long page (a product page or checkout) and watch the focus outline. If it ever disappears behind your sticky header or footer, that fails. The usual one-line fix:
/* Leave room so focused items don't hide under a ~64px sticky header */
:target,
a, button, input, select, textarea {
scroll-margin-top: 72px;
}Also make sure cookie banners and chat widgets can be closed, so they are not permanently covering content.
Where we can help
Sticky elements interact with focus in ways that are easy to miss by eye. In an audit we Tab through your real templates and flag every spot where focus hides, with the exact CSS fix. It pairs with other keyboard issues on the common failures list, and it is one of the new checks in WCAG 2.2.