- Success Criterion 2.4.7
- Conformance level AA
Focus Indicator That Disappears in Windows High Contrast Mode
2.4.7 — Focus Visible
Scenario
Setting
A community forum's discussion thread
What’s wrong
Indicator removed on Windows High Contrast / forced-colors mode via outline: none + box-shadow trick (box-shadow stripped by forced colors).
Example
Open a community forum's discussion thread and this is what you'll see: indicator removed on Windows High Contrast / forced-colors mode via outline: none + box-shadow trick (box-shadow stripped by forced colors).
Why it matters
Sighted keyboard users and low-vision users who must see where focus is. On a community forum's discussion thread, that means they get stuck and can't reach the control.
How to test
Enable Windows High Contrast / forced-colors mode and Tab through the page: if outline:none plus a box-shadow trick was used for the indicator, forced-colors mode strips the box-shadow too, leaving nothing visible.
How to fix
A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.
Outcome
With the fix in place on a community forum's discussion thread, they keep track of where they are on the page.
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