Keyboard focus quiz
Keyboard focus practice
Swipe right if it passes WCAG, left if it fails. Or use the buttons or your arrow keys.
The rule in plain words
WCAG 2.4.7 Focus Visible and 2.4.11 Focus Not Obscured
Keyboard users move through a page one control at a time. They need to see where they are, the way a mouse user sees the pointer.
Any control that has keyboard focus needs a visible indicator (2.4.7), and it must not be completely hidden behind something the site put on top, like a sticky header or cookie banner (2.4.11).
| What | Needs |
|---|---|
| Focus Visible (2.4.7) | Some visible indicator |
| Not Obscured, Minimum (2.4.11) | Not fully hidden |
| Not Obscured, Enhanced, AAA (2.4.12) | Not hidden at all |
Exceptions people miss
- Partly covered focus still meets the AA rule 2.4.11, though it is a poor experience.
- Content the user opened themselves, like a menu they expanded, can be handled differently.
Common mistakes
- outline: none in a CSS reset with nothing to replace it.
- Custom switches, tabs and cards that never got a focus style.
- Cookie banners, chat widgets and sticky footers that sit on top of focused links.
Your turn
Is your own site accessible or not?
Axeazy scans your real pages for WCAG issues like the ones in this deck and opens code fixes, not an overlay. Free scan in 60 seconds, no credit card.
Questions
Keyboard focus, answered
Is it OK to remove the focus outline?
Only if you replace it with another clear indicator, like a ring, thick underline or strong background change.
What does Focus Not Obscured mean?
When something gets keyboard focus, content the site added on top, like a sticky header, must not cover it completely.
Do focus indicators need contrast?
Yes. Under 1.4.11 the indicator needs 3:1 against adjacent colors, and 2.4.13 at Level AAA adds size rules too.