Reference
What is Focus visible?
A focus indicator is the visible outline showing which element currently has keyboard focus. Removing it with outline: none is one of the most common accessibility failures on the web, and it makes keyboard navigation impossible rather than merely awkward.
Also called: focus indicator · focus ring
Why it gets removed
Default focus rings are visually inconsistent between browsers, so designers remove them. The correct response is to design a better one, not to delete the only signal a keyboard user has about where they are.
How to do it properly
- :focus-visible rather than :focus, so a mouse click does not draw a ring but a Tab press does
- A minimum 2px outline with an offset, in a colour that contrasts at 3:1 against the background
- Never rely on a colour change alone, which fails for anyone who cannot distinguish it
- Test by pressing Tab through the whole page and watching where the indicator goes
The related requirement people miss
Focus order should follow the visual order. CSS that reorders elements visually without changing the DOM produces a focus sequence that jumps around the screen, which is disorientating even when every indicator is visible.
Where this is covered in depth
A definition can only go so far. The 35 types of SEO, explained without the padding covers this properly — 6 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.