Operable · 2.4 Navigable
When a component receives keyboard focus, it must not be entirely hidden by author-created content, such as a sticky header or footer. Content the user opened is allowed if they can reveal the focused item without moving focus, and for user-movable content only its initial position counts.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Tab to move down the list of stories. Watch whether the cookie banner at the bottom hides the link that has focus.
The tools follow the version you last used.
What happened
Why it passes
The scrolling area has bottom scroll padding taller than the banner, so each focused link is scrolled to sit above the banner and stays in view.
Why it fails
The banner covers the bottom of the scrolling area, and links that land there are completely hidden behind it, so a keyboard user cannot see what has focus.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; padding: 1.5rem; background: #ffffff;}The browser counts the area under the banner as visible, so it does not scroll a focused link out from under it. Any link shorter than the banner can end up completely hidden.
Passes
Live preview
html { scroll-padding-bottom: 8rem; /* at least the banner's height */}.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0;}scroll-padding shrinks the area the browser aims for when it scrolls something into view, so a focused item stops above the banner instead of behind it (technique C43).
+ html { + scroll-padding-top: 5rem; + }
Fails
Live preview
.site-header { position: sticky; top: 0; height: 4rem; background: #ffffff;}When someone presses Shift+Tab to go back up the page, a focused link can sit completely behind the header, because the browser treats that area as visible.
Passes
Live preview
html { scroll-padding-top: 5rem;}.site-header { position: sticky; top: 0; height: 4rem; background: #ffffff;}Top scroll padding a little taller than the header keeps items below it whenever the browser scrolls them into view (technique C43).
Why it matters
Sighted keyboard users, including people with low vision using magnification, need to see the element they have moved to. If a fixed header or overlay covers it, they cannot tell where focus is or what they are about to activate.
W3C: Understanding 2.4.11How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures