Focus indicators serve as the visual equivalent of a mouse pointer for keyboard users. Without clear focus states, keyboard-only users face an impossible challenge, they can't see which element they're currently interacting with, making navigation essentially invisible.

Every interactive element, including links, buttons, form controls, and custom components, must display a visible focus indicator when selected via keyboard. This visual cue should be distinctive enough to stand out against both the element itself and the surrounding content. Standard browsers provide default focus indicators (usually a blue outline or dotted border), but these often lack sufficient contrast or visibility.

Design focus states with intention rather than relying on browser defaults. The WCAG 2.2 requirements specify that focus indicators must have a minimum contrast ratio of 3:1 against adjacent colors and be at least as visible as the default browser indicators.^[1]