Tip of the week #014: Why sticky headers can be bad

First things first: I used to love sticky headers. I even wrote about it on CSS-tricks.

The problem with sticky headers is that it obscures the content beneath as you scroll. This is a violation of the WCAG 2.2 success criteria "2.4.11 Focus not obscured (minimum)". In short, when a user uses a keyboard or similar to navigate between focusable elements a sticky element might get in the way — hiding the focused element from the user.

If you have to use sticky headers, please ensure that the elements beneath are visible if focused. This goes for cookie banners and other high friction sticky elements as well.

A somewhat solution

Now that the :has selector has arrived you can solve this criteria while still having a sticky header.

.sticky-header {
  position: sticky;
  top: 0;
}

body:has(:focus) .sticky-header {
  position: static;
}

I wouldn't recommend it though. As neat as this snippet is, I think it only would confuse the users if they navigate to an element and suddenly the sticky header disappears. Use with caution.