Accessibility Required

Never hide the focused element

Make sure a sticky header, banner or chat widget never hides the element that has keyboard focus. This is WCAG 2.2 criterion 2.4.11 (AA).

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Set scroll-padding-top to the sticky header's height. Keep banners and widgets from covering focused content.

Example

:root { --header-h: 4rem; scroll-padding-top: calc(var(--header-h) + 1rem); }
header { position: sticky; top: 0; height: var(--header-h); }

How to check

Tab down a long page. The focused element never sits under the header.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/focus-not-obscured.