- Success Criterion 2.4.7
- Conformance level AA
Focus Style That Only Appears on Hover, Never on Tab Focus
2.4.7 — Focus Visible
Scenario
Setting
A video-conferencing app's meeting controls
What’s wrong
Focus visible on hover-styled state only (:hover styles never mapped to:focus).
Example
During an audit of a video-conferencing app's meeting controls: focus visible on hover-styled state only (:hover styles never mapped to:focus).
Why it matters
Sighted keyboard users and low-vision users who must see where focus is. On a video-conferencing app's meeting controls specifically, they get stuck and can't reach the control.
How to test
Compare a control's:hover CSS styling to its:focus styling in DevTools: if hover has a visible effect but:focus doesn't, keyboard users get nothing.
How to fix
A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.
Outcome
Fixed, a visitor to a video-conferencing app's meeting controls can complete the task using only the keyboard.
Who is affected
Sighted keyboard users and low-vision users who must see where focus is.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Element Losing Keyboard Focus the Instant It’s Reached
- Focus Outline Removed by CSS With No Replacement
- Global CSS Reset Removing Every Focus Outline Site-Wide
- Focus Indicator Styled for Some Components but Not Others
- Focus Indicator That’s Just a Subtle, Hard-to-See Color Shift
- Focus Indicator Hidden Behind an Overlapping Sticky Element