This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why must a fixed header bar never fully obscure keyboard focus?
A fixed header bar, a cookie notice, or a sticky footer must never completely obscure the currently focused element, because otherwise keyboard users can no longer see where they are. Criterion 2.4.11 is a new addition with WCAG 2.2: as focus moves through the page, the active element must stay at least partially visible — even when parts of the page float above the content while scrolling.
How sticky bars swallow focus
Many websites fix elements to the edge of the screen: the menu bar at the top, a cookie notice at the bottom, and maybe a newsletter banner in between. These layers float above the content. As keyboard focus moves through the page, the active element can end up right behind one of these bars — the focus outline is there, but nobody sees it. For keyboard users, this feels as though focus has vanished: they keep tabbing and don't know which button they'll hit with the Enter key. Tall cookie notices at the bottom edge are especially tricky — whole rows of form fields can disappear behind them while tabbing through.
How the audit service measures focus obscuring
During the actual keyboard pass, the audit service checks several points of the active element at every focus stop: if an opaque, fixed, or sticky area lies over the element at all of these points, it counts as fully obscured — the criterion is violated, and the report names the element along with a supporting screenshot. The measurement deliberately judges cautiously: elements that are themselves part of a fixed bar never count as hidden behind it, and transparent overlays don't count as obscuring. If the element stays at least partially visible at every stop, the criterion counts as passed.
Examples
Focus behind the adhesive header
header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }scroll padding keeps the area under the header clear when changing focus. Cookie banners capture the focus until they are closed.
- Tab through your page and watch the bottom edge of the screen — does focus temporarily disappear behind the cookie notice?
- Keep fixed bars as narrow as possible, especially on small screens.
- Ask your agency to build in a scroll margin on focus, so the active element never ends up under fixed bars.
- Test with the cookie notice visible — that's exactly the state in which first-time visitors experience your page.
