Always show where focus is

Show a clear focus ring on every control when someone reaches it with the keyboard. This is WCAG criterion 2.4.7 (AA).

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

How to do it

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.

Example

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

How to 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.

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.