Focus ring

Someone driving an interface from the keyboard has exactly one question at all times: where am I? The focus ring is the answer. It is the cursor of the keyboard, and without it a Tab press is a step taken in the dark.

The ring is not decoration, so it is not optional. WCAG 2.2 requires that a keyboard-operable control show a visible indicator when it has focus, and that the indicator be large enough and contrasted enough to find at a glance. Browsers ship a default ring for free; outline: none is the single most common way a design deletes it, usually because the default looked wrong on a rounded button rather than because anyone decided keyboard users did not need it. The fix is to replace the ring, never to remove it: :focus-visible gives you a ring for keyboard entry and none for a mouse press, which is the behaviour most teams were reaching for when they reached for outline: none.

Draw it with outline rather than border or box-shadow. Outline follows border-radius in every current browser, does not take part in layout, and so cannot shift the control by a pixel when it appears. Give it outline-offset so it sits clear of the control’s own edge, and remember it has to survive on both the light and the dark surface the control might sit on. A two-tone ring (a light stroke inside a dark one) is the usual answer for a design that cannot know its background.

Ring and hover state are different claims and should look different. Hover says the pointer is here, which the reader already knows because they are holding the pointer. The ring says the keyboard is here, which nothing else on screen says.