A focus indicator is whatever pixels change to show that a control is focused. The standard defines it that broadly on purpose. A swapped background colour, a thickened border and an inverted button all count, so the browser's own ring is one implementation rather than the whole category. Browsers draw something by default, and the decade-old habit of deleting it with outline: none and putting nothing back is still the commonest way a site becomes unusable by keyboard. The modern answer also removes the objection that started the habit. The :focus-visible selector shows an indicator to somebody navigating by keyboard and keeps it out of the way of a mouse click. That is what browsers now do with their own defaults. One more thing saves an argument later. Three separate rules meet on this one thing. A missing indicator fails 2.4.7. A visible one under 3:1 against what sits next to it fails 1.4.11, unless the browser drew it and you left it alone. A visible, contrasty one that covers too little area or barely changes between focused and unfocused is 2.4.13, and that one is Level AAA.
In practice
Style it, do not delete it. Whatever you draw has to reach 3:1 against the colours beside it, and that requirement comes from the non-text contrast rule rather than from the focus rule, which sets no ratio at all. Leave the browser's own ring alone and that rule steps back, because it excepts an appearance the user agent decided and the author did not modify. Style anything and you own the ratio. The focus rule asks for something else people miss. The indicator has to stay visible while the element is focused, and W3C says so in as many words, so a ring that fades out after two seconds fails even though it appeared.
Watch what you build it out of. In Windows contrast themes the browser throws away your outline colour and supplies its own, which is fine, because the outline itself survives and simply changes colour. A ring drawn with a box shadow does not survive, because box shadows are forced off in that mode. So a design system that moved from outlines to shadows to follow its rounded corners has quietly removed the focus indicator for the people most likely to be running a contrast theme.
The check takes two minutes and needs no tooling. Tab through a page and watch every stop, including the ones inside menus, dialogs and date pickers. Then do it again with a contrast theme turned on, because that is where a shadow-based indicator disappears and where a page that looked fine a minute ago stops telling you where you are.
Why it matters
Removing the outline and putting nothing back is the single most common cause of keyboard failures we find, and it is also the cheapest to fix, usually in one place in one stylesheet. The cost of leaving it is out of all proportion to that. Somebody tabbing with no visible indicator is pressing Enter on a control they cannot identify, which on a page with a delete button is not a usability problem, it is a bet. It helps a wider group than keyboard users too, because knowing where you are on a page is exactly what people with attention or short-term memory limitations need most. It is one line of CSS.
Which rule the finding belongs to
Three defects that look identical in a screenshot. Nothing at all appears when the button is focused, which is 2.4.7. A pale grey ring appears and measures 2.1:1 against what surrounds it, which is 1.4.11, and it passes 2.4.7 because something was visible. A crisp ring appears that covers less area than a two-pixel line all the way round the button would, which is 2.4.13 and sits at Level AAA, so it is advice rather than a failure at the level any law names. Note that last one measures area rather than thickness, so a thicker mark on one edge can carry it.
Where this shows up on the site
Related terms
- FocusFocus is the one place on a page that is currently taking keyboard input.
- Focus orderFocus order is the sequence focus travels in as you press Tab, and by default it follows the order elements appear in the code rather than the order they appear on screen.
- Keyboard accessibilityKeyboard accessibility means every piece of functionality on the page can be operated through a keyboard interface.
- Contrast ratioA contrast ratio is a number from 1:1 to 21:1 measuring how far apart two colors are in brightness, computed from a formula rather than judged by eye.
- Focus visibleFocus visible is two things with nearly the same name, and keeping them apart settles an argument.
- Forced colorsForced colors is what the web platform calls it when somebody's operating system throws your palette away and repaints the page in colors they chose.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.