How can I stop a sticky header from hiding the focused page control?

Check the focused control and its focus indicator, not just whether the page scrolls. Start at the top of the page, use Tab to move through controls, and use Shift+Tab to move back. At each stop, check whether the header completely covers the focused item. W3C identifies that situation as a failure example and recommends checking focus movement in both directions. [S1]

Repeat the check on long pages where the viewport needs to scroll, and on pages with different content. Also check relevant responsive layouts, since the header may behave differently across them. Record the page, layout, and target when you find overlap so you can repeat the check after a change.

Check those destinations separately. Activate each in-page link with the keyboard, then inspect where its destination lands. If the heading or control is beneath the sticky header, adjust the layout or scrolling so the target is immediately visible. W3C discusses scroll padding as one possible way to help prevent overlap from author-positioned content such as a sticky header. [S2]

For a concrete example, suppose a section link lands on a heading that is partly covered by the header. Try adjusting the page’s scrolling behavior with scroll padding, then activate that same link again and check whether the heading is visible. This is a way to test the proposed adjustment, not a guaranteed fix; check other destinations and focus movement too.

No. Treat it as one possible adjustment, then rerun the checks. Scroll padding may help position a scroll destination, but you still need to check ordinary keyboard focus movement in both directions and in-page-link destinations. Confirm that the focused item is not completely hidden by the header. [S1] [S2]

Repeat those checks on relevant pages and responsive layouts, including where the header changes size or position. If a target remains obscured, revisit the layout or scrolling behavior rather than assuming the adjustment works everywhere. The cited WCAG discussion describes a minimum criterion addressing complete obscuring and notes that the enhanced criterion is stricter. This review does not establish conformance to every accessibility criterion. [S2]

Use this checklist for each relevant page and layout:

1. Move through controls with Tab, then back through them with Shift+Tab.
2. Check that the focused item and its focus indicator are not completely covered by the sticky header.
3. Activate in-page links with the keyboard and inspect where each destination lands.
4. If overlap occurs, adjust the layout or scrolling; consider scroll padding as one option. [S2]
5. Repeat the checks on different pages and responsive layouts.
6. Retest after the change and note any remaining obscured targets.

A useful test note is: “Page: [page]. Layout: [description]. Navigation: [Tab, Shift+Tab, or section link]. Target: [control or heading]. Result: [visible or obscured]. Change: [adjustment]. Retest: [result].” That gives you a repeatable record without treating one successful check as proof that every page works.