A focus outline can exist in the DOM while the whole control sits behind a fixed header. Test the focused component in the actual viewport, not only the presence of a CSS outline. This is a scrolling and occlusion decision, different from pointer target size or keeping focus inside a modal.
Who should use this acceptance brief
Service websites with sticky menus or banners. Use this as a scoped website handover task. Where real system evidence is required, teaching examples are not a substitute.
Source-bound platform fact
WCAG focus-not-obscured minimum requires a keyboard-focused component not be entirely hidden by author-created content, with relevant notes and scope. Partial visibility is not a complete usability verdict. W3C: focus not obscured · Checked 16 October 2026.
Filled teaching example
Synthetic example, not a client case. Finite inputs, expected decisions and counterexamples follow; no live integration is claimed.
On narrow screens, scroll to read the complete table.
| Input / case | Check basis | Expected decision |
|---|---|---|
| header bottom100; field y40–80 | fully behind header | hidden |
| field y90–130 | part visible | partial |
| field y120–160 | below header | visible |
Run the acceptance exercise
- Tab through the actual page with the banner in each supported state.
- Record focused component bounds, viewport and the covering region.
- Review scroll positioning and repeat after errors, zoom and content expansion.
Interpret the result and retain evidence
The model assumes one full-width top overlay and a vertical rectangular control. It reports hidden, partial or visible, not an overall conformance result. A partly exposed control can still be difficult to use or have an invisible indicator, so retain the screenshot and keyboard observation rather than a binary spreadsheet alone.
Limits before implementation
Does not assess side overlays, focus indicator contrast or move existing page positions. No legacy layout edits authorised.
Replay the finite example
Save both files in one folder and run with Node22.13 or newer. The example sends no network requests and changes no account or site. Filled inputs and expected outputs · Inspectable functions
node decision-check.mjs sticky-header-focus-visibility.json