What this criterion requires
When an element receives keyboard focus, it must not be entirely hidden by author-created content such as sticky headers, cookie banners or chat widgets. At AA, partial obscuring is tolerated; full obscuring is a failure.
Who it helps
Sighted keyboard users who lose the focus position behind fixed overlays.
Example: fails vs passes
/* sticky header, no scroll offset: Shift+Tab hides focus under it */
header { position: sticky; top: 0; }header { position: sticky; top: 0; }
html { scroll-padding-top: 88px; }scroll-padding keeps the focused element clear of sticky bars. Check cookie banners and chat bubbles too.
How to meet and fix it
- Add scroll-padding matching sticky header height so focused elements scroll into clear view
- Ensure banners and chat bubbles cannot cover the focused control completely
- Tab through every template with all overlays open
Common failures auditors find
- Focus disappearing beneath a sticky header when tabbing backwards
- Cookie banners that cover focused links with no offset
Automated scanning catches a share of these instantly - run a free check - and a manual audit covers the judgement calls a tool cannot make.
Sources
- W3C, Understanding 2.4.11: Focus Not Obscured (Minimum) - w3.org/WAI
- W3C, How to Meet 2.4.11 (quick reference) - w3.org/WAI/quickref
Last updated . Reviewed by the EqualWeb accessibility team.
Does your site pass 2.4.11?
Run a free automated check now, or have certified IAAP/CPWA auditors test every criterion and document the result.