Operable · Level AA · 2.4.11
Focus Not Obscured (Minimum)
When something receives keyboard focus, it can't be completely hidden behind other content the page put there itself — a sticky header, a cookie banner, a chat widget. At least part of the focused element has to stay visible.
- Motor
- Low vision
- Cognitive
How to recognize it
Tab through a page and watch for the focused element disappearing entirely behind a fixed header, a sticky footer, a cookie-consent banner, or a persistent chat bubble — a link near the top of a long page that scrolls under a sticky header the instant it receives focus, becoming completely invisible, is the classic failure. Someone using only a keyboard has no way to see where they currently are on the page if the thing they just tabbed to is fully covered, which makes it impossible to tell what's about to happen if they press Enter. Low-vision users relying on magnification, and people with attention or short-term-memory-related cognitive disabilities who depend on visibly tracking where focus currently is, are affected the same way.
How to fix it
Account for fixed-position UI (sticky headers, cookie banners, chat widgets) when scrolling focused elements into view — add enough scroll-margin or offset so a focused element lands below a sticky header rather than underneath it. This criterion, at the Minimum level, only requires that the focused element not be entirely hidden — some partial overlap is still allowed; fully guaranteeing nothing ever overlaps it at all is the stricter AAA-level version of this same idea.
Example
Avoid
.site-header { position: fixed; top: 0; height: 80px; }
/* no scroll-margin on targets; a focused link near the top scrolls entirely behind the fixed header */Prefer
.site-header { position: fixed; top: 0; height: 80px; }
a, button { scroll-margin-top: 90px; }
/* focused elements scroll to a position clear of the fixed header */