---
title: "Never hide the focused element · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/focus-not-obscured
updated: 2026-10-20
licence: "All rights reserved"
---

# Never hide the focused element

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Never let a sticky header, cookie banner or chat widget cover the element that has keyboard focus. WCAG 2.2 criterion 2.4.11 (AA) forbids hiding it entirely. Aim to hide no part of it, as 2.4.12 (AAA) asks.
- How: Set `scroll-padding-top` to the sticky header's height, and `scroll-padding-bottom` for anything fixed at the bottom. Close or shrink banners and widgets so they never cover focused content.
- Check: A browser test tabs through each long page. For every focused element, `document.elementFromPoint` at its centre returns the element or something inside it.

Example:

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

**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`.

- Previous: [Always show where focus is](https://agentwranglers.se/playbook/website/accessibility/focus-indicators)
- Next: [Let people skip to the content](https://agentwranglers.se/playbook/website/accessibility/skip-links)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)