A focus indicator is the visible marker that shows which interactive element currently has keyboard focus on a web page, typically an outline, ring or highlight around a link, button or form field. In web accessibility, it is the element that tells keyboard, switch and voice users where their next keystroke will act.
Browsers draw a default indicator, often called a focus ring, but designers frequently restyle or remove it. Because a missing or faint indicator makes a page practically unusable without a mouse, the Web Content Accessibility Guidelines (WCAG) treat visible focus as a firm requirement rather than a styling preference.
How focus and the focus indicator work
At any moment, only one element in a document holds focus. Users move focus with the Tab and Shift+Tab keys, arrow keys inside composite widgets, or programmatic calls in scripts. The browser then applies the focus pseudo-classes to that element, and the stylesheet decides what the indicator looks like.
The table describes the CSS selectors that control when an indicator appears.
| Selector | Matches when | Typical use |
|---|---|---|
| :focus | The element has focus by any means | Baseline styling, older browser support |
| :focus-visible | The browser judges that focus should be shown | Keyboard-only rings without mouse clutter |
| :focus-within | The element or a descendant has focus | Highlighting a whole form group or card |
The :focus-visible heuristic generally shows the indicator after keyboard navigation and on text inputs, but hides it after a mouse click on a button. This resolves the old conflict in which designers removed outlines because they disliked rings appearing on click, and in doing so broke keyboard navigation for everyone else.
WCAG requirements for focus visibility
Several WCAG success criteria govern focus indicators, and they differ in strictness. The baseline rule at level AA requires that focus is visible, while WCAG 2.2 added criteria about obscured focus and a measurable appearance standard.
| Criterion | Level | What it requires |
|---|---|---|
| 2.4.7 Focus Visible | AA | A keyboard focus indicator is visible |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Focused element is not entirely hidden by other content |
| 2.4.12 Focus Not Obscured (Enhanced) | AAA | No part of the focused element is hidden |
| 2.4.13 Focus Appearance | AAA | Minimum size and 3:1 change in contrast |
| 1.4.11 Non-text Contrast | AA | Visual parts of controls reach 3:1 contrast |
The Focus Appearance criterion offers the most concrete target: the indicator should cover an area at least as large as a 2 CSS pixel thick perimeter of the element and show a contrast of at least 3:1 between focused and unfocused states. Even where only level AA is required, many teams adopt this measure because it removes guesswork from design reviews.
Designing an effective focus indicator
A strong indicator is thick, high-contrast and consistent across the interface. The most robust technique is a solid outline of 2 to 3 pixels with an outline-offset of about 2 pixels, which separates the ring from the element and keeps it readable on any background.
The following table compares common styling techniques.
| Technique | Strengths | Weaknesses |
|---|---|---|
| Outline with offset | Follows the element shape, no layout shift | Single color may vanish on some backgrounds |
| Two-tone ring | Visible on both light and dark surfaces | Slightly more complex CSS |
| Box-shadow ring | Smooth rounded appearance | Disappears in forced colors mode |
| Background color change | Large, obvious area | May fail contrast against nearby states |
| Underline or border change | Subtle, fits text links | Often too weak without other cues |
A two-tone indicator, for example a dark inner ring with a light outer ring, stays visible whether the element sits on white, black or a photograph. When box-shadow is used for appearance, adding a transparent outline ensures that Windows forced colors mode still draws a visible ring, because that mode removes shadows but repaints outlines in a system color.
Focus indicators and related accessibility concepts
The focus indicator is only the visual layer of keyboard accessibility. It works together with tab order, which decides the sequence of focusable elements, and focus management, which moves focus deliberately when content changes, such as opening a dialog or loading a new view.
A visible ring is of little use if focus lands somewhere unexpected. A skip link must be visible when focused, a focus trap in a modal must keep the indicator inside the dialog, and sticky headers or cookie banners must not cover the focused element, which is exactly what the WCAG 2.2 criterion on obscured focus addresses.
Common mistakes with focus indicators
Audits repeatedly find the same small set of focus failures, most of them introduced by global CSS resets or component libraries rather than by deliberate decisions.
| Mistake | Effect on users | Fix |
|---|---|---|
| outline: none without replacement | Keyboard users lose their position | Restore a custom :focus-visible style |
| Low-contrast ring | Indicator invisible to low-vision users | Reach at least 3:1 against adjacent colors |
| Indicator clipped by overflow | Ring cut off at container edges | Use offset inside or adjust overflow |
| Focus hidden under sticky header | Focused item scrolls out of view | Use scroll-padding-top on the page |
| Custom widgets not focusable | No indicator appears at all | Use native elements or tabindex correctly |
- Test with the keyboard alone on every new template, tabbing through from top to bottom.
- Check the indicator in forced colors mode and on every background color used in the design system.
- Never rely on color change alone when the change is small or affects only thin text.
The short version
Many people move around websites with a keyboard instead of a mouse. They press Tab to jump from one link or button to the next. The focus indicator is the highlight that shows where they are. It works much like the blinking cursor in a document.
Without it, a keyboard user is like someone using a TV remote with no highlighted menu item. Every press does something, but they cannot see what. A clear, thick outline around the active item solves this. It also costs very little to design.
Where it makes a difference
A city council audits its online permit application form before a public launch. A tester with a motor impairment who navigates only by keyboard reports that after the third field she can no longer tell where she is. The cause is a CSS reset that removed outlines from every element.
The development team adds a 3 pixel two-tone outline with a 2 pixel offset through :focus-visible, adds scroll-padding so the sticky header no longer covers focused fields, and verifies a contrast of at least 3:1 on the white form and the dark blue footer.
On retesting, the same user completes the full application in under ten minutes without assistance, and the form passes the focus-related checks in the accessibility audit before launch.