Visual testing
Check Focus Behind Sticky Headers and Banners
Published by whatisADA / Grow Wild Agency · Updated
Purpose and preparation
Test whether focused controls are hidden by sticky or fixed content. Include both forward and reverse keyboard navigation, because scrolling can position the same control differently. Record the page state and viewport for each overlap.
A practical example
A cookie banner covers the last two form fields when focus moves backward from the footer.
How to check it
- Open every persistent banner relevant to the task and Tab through the page. Watch the focused component as the browser scrolls it into view.
- Reverse direction with Shift+Tab and repeat at a narrow viewport and enlarged zoom. Include links reached through an error summary or in-page anchor.
- Record whether focus is entirely hidden and whether part remains visible. Adjust scroll margins, layout or banner behavior, then repeat the same navigation sequence.
What can be missed
A focus outline visible in one direction does not prove the component remains unobscured in the other. WCAG 2.4.11 and the stricter 2.4.12 have different thresholds.
Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.