---
title: "Always show where focus is · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/focus-indicators
updated: 2026-10-20
licence: "All rights reserved"
---

# Always show where focus is

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

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Show a clear focus ring on every control when someone reaches it with the keyboard. This is WCAG criterion 2.4.7 (AA).
- How: Style `:focus-visible` with an outline at least 2 CSS px thick, with an offset, and at least 3:1 contrast against the colours around it. That matches WCAG 1.4.11 (AA) and the stricter 2.4.13 (AAA). Never use `outline: none` without a replacement.
- Check: A browser test tabs to every control in light and dark mode. Each one's computed `outline-style` is not `none` and its `outline-width` is at least 2px.

Example:

```css
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bg);
}
```

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

- Previous: [Never take over single keys](https://agentwranglers.se/playbook/website/accessibility/character-key-shortcuts)
- Next: [Never hide the focused element](https://agentwranglers.se/playbook/website/accessibility/focus-not-obscured)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)