Focus indicator

A focus indicator is the visible styling, usually an outline or ring, that shows which interactive element currently has keyboard focus. It's the visual half of focus management: focus management is the behaviour (where focus moves and when), the focus indicator is what the user actually sees.

Browsers provide a default focus indicator (commonly a blue outline) for free. Many teams remove it with outline: none for aesthetic reasons without adding a replacement, which breaks the site for anyone navigating by keyboard, switch device, or screen reader with sighted use. This is one of the most common accessibility failures on the web.

In a Design System, the focus indicator should be defined once as a token (colour, width, offset, style) and applied consistently across every interactive component, buttons, links, inputs, custom controls. It needs enough contrast against every background colour the component can appear on, which is why some systems use an offset ring rather than a tight outline, so it always stays visible regardless of the component's own colours.

WCAG 2.2 tightened the requirements here (2.4.11 Focus Not Obscured, 2.4.13 Focus Appearance), so this is no longer just good practice, it's an increasingly explicit compliance requirement.