When keyboard focus is not visually indicated, sighted keyboard users cannot reliably operate the page. They may press keys without knowing which control is active, leading to errors, confusion, or task abandonment. Focus Visible ensures that users navigating with a keyboard can always see which element will receive input.
WCAG Success Criterion
2.4.7 Focus Visible (Level AA)
Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.
Why This Matters
For users who rely on the keyboard, focus is the only way to identify where interaction will occur next.
If focus is not visible:
- Users cannot identify which element will receive input
- Users may activate the wrong control
- Users may assume the interface is unresponsive
This criterion is a prerequisite for operating any keyboard-accessible interface, regardless of how well the page is otherwise designed.
What “Focus Visible” Means
Keyboard focus is the currently active element on the page: the link, button, or control that will respond if the user presses Enter, Space, or another key.
Keyboard focus is not the same thing as the text cursor.
Keyboard focus indicates which element is active, not where text will be inserted.
A caret is the blinking text cursor that shows where typed text will appear inside a text field or editor.
Focus Visible requires that when an element has keyboard focus, there is a clearly perceivable visual indication of that focus.
Mode of Operation
The phrase “mode of operation” accounts for differences in how browsers and user agents handle focus indicators.
Some user agents:
- Show focus indicators only when the keyboard is used
- Suppress focus indicators during pointer interaction
Authors are responsible for ensuring that at least one mode of operation exists where keyboard focus is visible. In most web content, there is only one mode of operation, so this requirement applies universally. The focus indicator must not be time-limited. Once shown, it must remain visible for as long as the element has focus.
What Counts as a Focus Indicator
A focus indicator may take many forms, including:
- A visible outline or border around the focused element
- A background or colour change that clearly distinguishes the focused state
- A visible caret or other clearly perceivable indication inside text inputs
The criterion does not define size, thickness, or contrast. Those aspects are addressed separately in:
- 2.4.13 Focus Appearance (Level AAA)
- 1.4.11 Non-text Contrast
Custom controls
For custom components (for example, div elements made focusable using tabindex), focus styles must be explicitly added.
Native browser focus styles do not apply automatically to non-native elements.
Common Failure Patterns
Focus Visible commonly fails when:
- Default browser focus styles are removed using CSS (for example,
outline: none) - Focus indicators are subtle, inconsistent, or imperceptible
- Focus is visible only while typing, not when navigating
- Custom controls receive focus but provide no visual indication
Hover-only styles (critical)
Hover styles do not satisfy this criterion unless the same visual treatment is applied on keyboard focus.
Mouse hover and keyboard focus are separate states.
A visual effect that appears only on hover does not help keyboard users.
Relationship to Other Criteria
Focus Visible works in combination with other focus-related requirements:
- 2.4.11 Focus Not Obscured ensures the focused element is visible in the viewport
- 1.4.11 Non-text Contrast ensures sufficient contrast
- 2.4.13 Focus Appearance (AAA) defines minimum size and contrast expectations
Visible focus alone does not guarantee usability.
A focus indicator can be visible but still fail other criteria if it is obscured, too low contrast, or inconsistent.
Examples
Passing examples
- When a button receives keyboard focus, a visible border appears around it and remains visible until focus moves away.
- A text input shows a clearly visible caret and background change when focused, making it obvious that the field will receive input.
Failing example
Links show a visual highlight on mouse hover, but no visual change when focused using the keyboard.
How to Test This
- Navigate the page using Tab and Shift + Tab only
- Observe whether each focused element has a visible indicator
- Verify the indicator remains visible while focus stays on the element
- Test custom components and controls
- Confirm that hover-only styles are not relied upon
If you cannot reliably tell which element will receive input, the criterion fails.
Wrapping Up
Focus Visible ensures that keyboard users can always identify which element will receive input. It does not define how focus should look. It requires only that the focus can be seen. Without a visible focus indicator, keyboard accessibility breaks down entirely. This criterion guarantees the minimum visual feedback required to operate a page using the keyboard.
