- Success Criterion 2.4.7
- Conformance level AA
Focus Indicator That’s Only Partially Visible When Clipped
2.4.7 — Focus Visible
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Focus indicator only partially visible — clipped by overflow:hidden (style that clips overflowing content) ancestors or drawn on only one edge of the component.
Example
On a language-learning app's lesson screen, a visitor hits this wall: focus indicator only partially visible — clipped by overflow:hidden (style that clips overflowing content) ancestors or drawn on only one edge of the component.
Why it matters
Sighted keyboard users and low-vision users who must see where focus is. Here, on a language-learning app's lesson screen, the result is they can't operate the feature without a mouse.
How to test
Tab to a control and zoom in: if the focus indicator is only partially visible (clipped by an overflow:hidden ancestor, or drawn on only one edge), it fails.
How to fix
A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.
Outcome
After the fix, the same visitor to a language-learning app's lesson screen can now reach and operate the control without a mouse.
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 Style That Only Appears on Hover, Never on Tab Focus