The blue ring browsers draw around a focused element suits almost no design. Which is why outline: none is one of the most-typed lines in CSS. The question is what that line actually removes.
If a mouse user has a pointer, a keyboard user has the focus indicator. Removing it is removing the cursor. The page looks unchanged, but there is no longer any way to tell where you are, and pressing Tab appears to do nothing at all.
Why people delete it
Deleting the ring usually comes from observation rather than laziness. Older browsers drew it on mouse clicks too. A blue outline left behind after every click looks like a bug, so designers removed it.
That specific problem now has its own solution. :focus-visible applies only when the browser judges that an indicator is useful — it appears on keyboard navigation and stays away on mouse clicks. The annoying case disappears; the necessary case survives.
Three conditions for a custom indicator
If you are drawing your own, meet three conditions.
A faint background tint misses two of the three. It rarely has the contrast, and being a colour change alone it can read as no change at all to someone with a colour vision deficiency. An outline offset slightly from the element is the safest pattern — it shows on light and dark surfaces alike and follows the element’s corner radius.
Custom components are the real trap
Native buttons and links mostly survive. The trouble is with things you assembled yourself: a dropdown built from divs, a whole card wrapped as a click target, the arrows in an image gallery. Unless they are made focusable, they never appear in the tab order at all.
The designer’s job here is clear. When you draw a component, draw default, hover, focus and disabled together. A focus state missing from the mockup is a focus state missing from the build. That is not an accessibility item; it is simply an unfinished component spec.
Specifying component states is covered further in the Themes & plugins archive, and the order in which we verify screens is published on our process page.
Next part
Once the indicator is visible, the next question follows on its own: in what order does focus move? The next part is about finding the places where that order and the screen disagree.