---
title: "Keep the focused element fully in view · Agent Wranglers"
url: https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/focus-fully-visible
id: AXS-73
level: Optional
updated: 2026-10-27
build: a2a6bdfed830
tokens: 854
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Keep the focused element fully in view

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Keyboard and focus](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-27.

- ID: AXS-73
- Level: Optional
- Chapter: [Keyboard and focus](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus.md)
- Rule: Keep every part of the focused element in view, not only some of it. This is WCAG 2.2 criterion 2.4.12 (AAA), a step past the legal AA bar in [Never hide the focused element](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/focus-not-obscured.md).
- Check: A browser test tabs through each long page. `document.elementFromPoint` at the centre and at all four corners of every focused element returns the element or something inside it.
- How: People who use a screen magnifier or a keyboard lose track of a control that is half under a sticky bar. Give `scroll-padding` the full height of every fixed bar, top and bottom, plus a margin. Never let a cookie banner or chat button float over content without reserving that space.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### JavaScript example

```js
const points = await page.evaluate(() => {
  const box = document.activeElement.getBoundingClientRect();
  const spots = [[box.left + 1, box.top + 1], [box.right - 1, box.top + 1], [box.left + 1, box.bottom - 1], [box.right - 1, box.bottom - 1], [box.x + box.width / 2, box.y + box.height / 2]];
  return spots.map(([x, y]) => document.activeElement.contains(document.elementFromPoint(x, y)));
});
expect(points.every(Boolean)).toBe(true);
```

### Python example

```python
points = page.evaluate("""() => {
  const box = document.activeElement.getBoundingClientRect();
  const spots = [[box.left + 1, box.top + 1], [box.right - 1, box.top + 1], [box.left + 1, box.bottom - 1], [box.right - 1, box.bottom - 1], [box.x + box.width / 2, box.y + box.height / 2]];
  return spots.map(([x, y]) => document.activeElement.contains(document.elementFromPoint(x, y)));
}""")
assert all(points)
```

## Sources

- [WCAG 2.2 – 2.4.12 Focus Not Obscured (Enhanced)](https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced)

## Related rules

- AXS-14 [Never hide the focused element](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/focus-not-obscured.md) in Accessibility

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/focus-fully-visible">Agent Wranglers accessibility playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Never hide the focused element](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/focus-not-obscured.md)
- Next: [Let people skip to the content](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus/skip-links.md)
- [Keyboard and focus](https://agentwranglers.se/playbook/accessibility/keyboard-and-focus.md)