Focus ring
The visible outline or glow marking which control the keyboard is on right now. Kill it and tabbing becomes a guessing game.
See it
What it is
The focus ring is the visible marker showing which element the keyboard is currently on. Browsers draw one by default (Chrome's black-on-white double ring, Safari's blue halo), and it is the only way a sighted keyboard user knows where Enter will land. Delete it and the interface becomes a blindfolded scavenger hunt.
You are allowed to restyle it, just never to zero. Use 'outline' plus 'outline-offset' rather than box-shadow, because outline survives high contrast mode and follows border-radius in modern browsers. At level AA WCAG asks only that focus is visible at all (2.4.7) and that a sticky header or cookie bar does not cover the focused control (2.4.11). The specific numbers people quote, an indicator area worth at least a 2px perimeter and 3:1 contrast between the focused and unfocused states, come from Focus Appearance (2.4.13), which is level AAA. Treat that as the quality bar, not the legal one, and still check the ring against both the control and the page behind it, because one hardcoded blue vanishes on a blue button.
The reason people kill it: an ugly ring appearing on mouse clicks. The fix is ':focus-visible', which hands the decision to the browser's own heuristic about when focus needs showing. That usually lands on keyboard yes, pointer no, but it is a heuristic and not a strict input test: click into a text input and the ring stays, which is correct. Never ship 'outline: none' without a replacement, and keep a plain 'focus' style as the fallback underneath rather than deleting it.
Ask AI for it
Give this UI a custom focus ring that is obvious and on-brand. Keep a visible ':focus' baseline for every interactive element, then layer the loud version on ':focus-visible' so it shows up whenever the browser decides focus needs showing (keyboard in most cases, and text inputs on click). Style it with 'outline: 2px solid' in an accent color plus 'outline-offset: 2px' so it clears the component edge, and aim for at least 3:1 contrast against both the control and the page background (add a contrasting halo if the button color is close to the ring). Never use 'outline: none' without a visible replacement, and check that a sticky header does not cover the focused control when it scrolls into view.