Focus Indicators
The visible marker showing where keyboard focus is, which must never be removed.
Definition
WCAG 2.4.7 requires a visible focus indicator. WCAG 2.2 adds 2.4.11, requiring that focus is not obscured, and 2.4.13, setting minimum size and contrast for the indicator itself.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Defining component states.
- Building a design system.
- Reviewing any custom control.
Common mistakes
- Outline removed globally.
- Focus ring invisible in one theme.
- Indicators hidden behind sticky elements.
- Custom controls with no focus style at all.
A focus style that meets the requirements
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: inherit;
}
/* Never do this without an equally visible replacement */
/* *:focus { outline: none; } */
/* Sticky headers must not obscure the focused element (WCAG 2.4.11) */
:root { scroll-padding-block-start: var(--header-height); }focus-visible shows the indicator for keyboard interaction without showing it on mouse clicks, which removes the usual reason teams delete it.
Requirements
- At least 3:1 contrast against the adjacent background, in both themes.
- Thick enough to see: a 2px outline with a 2px offset is a reliable default.
- Visible against every background the element can appear on.
- Not obscured by sticky headers, footers or overlays.
- Present on custom controls, which do not get it automatically.
Where the indicator disappears
The style is usually correct in isolation. These are the conditions under which it stops being visible in the product.
| Situation | What happens | Fix |
|---|---|---|
| A sticky header or footer | The focused element scrolls under it | scroll-padding on the scroll container, sized to the sticky chrome. |
| overflow: hidden on an ancestor | The outline is clipped on one or more sides | Use an inset outline, a box-shadow ring, or give the container padding. |
| A dark or image background | A single-colour ring falls below 3:1 on some surfaces | A two-tone ring, light against dark and dark against light. |
| Custom controls | No indicator at all, since nothing native is rendering one | Apply the same token-driven style the native elements use. |
| A component library reset | The outline is removed globally and never replaced | Audit for outline: none, and keep the replacement in the same rule. |
An indicator that survives the design review
Do
- Define the ring as a token, so every component gets the same one and it can be corrected in one place.
- Check it against every surface the element sits on, in light and dark.
- Keep the offset, since a ring flush against the element reads as part of the element.
- Test it on the first and last focusable elements, which are the ones near sticky chrome.
Do not
- Do not use outline: none anywhere without the replacement in the same rule.
- Do not rely on a colour change alone. A background tint is not an indicator.
- Do not style :focus and forget :focus-visible, or mouse users get a ring nobody asked for and the team removes it again.
- Do not let the ring be the only difference between focused and selected, which are different states.
The same button, three outcomes
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Focus Management
AccessibilityWhere focus moves when content opens, closes, replaces itself or is removed.
Key difference
Focus visibility is whether you can see where focus is. Focus management is where focus goes when the interface changes underneath it. A page can pass one and fail the other completely.
Use Focus Indicators when
- Someone tabs through and cannot tell where they are.
- A ring has been removed, or is too faint against its background.
- The question is styling and contrast of the indicator.
Use Focus Management when
- A dialog, drawer or route change has just happened.
- Focus jumped to the top of the page, or vanished entirely.
- The question is order and destination, not appearance.
Local chart
A11Y·003 · Region V · Grid B3
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Depends on
Get these right first, or this one will not hold.
- Keyboard NavigationA11Y·002 · Accessibility
Keyboard access without a visible focus ring is technically operable and practically unusable.
Check your work
Review passes that test whether this was done properly.
- Accessibility ChecklistCHK·002 · Checklist
Related concept
Connected closely enough to change how you apply this.
- WCAG in PracticeA11Y·001 · Accessibility
- Component Anatomy, States and VariantsSYS·009 · Design system
- Affordances and SignifiersPRIN·007 · Principle
- FeedbackPRIN·004 · Principle
- ContrastFND·002 · UI foundation
- Dark ModeFND·027 · UI foundation
- Visual StatesFND·053 · UI foundation