- Success Criterion 2.4.11
- Conformance level AA
Anchor Link Landing an Element Directly Under a Fixed Header
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
A bank's mobile money-transfer screen
What’s wrong
Anchor/scrollIntoView behavior placing focused element exactly under fixed header (fully hidden without scroll-padding (spacing that keeps sticky bars off content)).
Example
.sticky-header { position: sticky; top: 0; } /* covers focused fields below it */ Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control.
How to test
Use an in-page anchor link or scrollIntoView-triggered navigation: if the target lands exactly under a fixed header with no scroll-padding offset, it's fully hidden and fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays. .input-field { scroll-margin-top: 80px; } /* clears the sticky header on focus */ A focused element must not be entirely hidden behind sticky headers, footers, or other fixed content.
Outcome
On a bank's mobile money-transfer screen, this barrier is gone for sighted keyboard users when sticky chrome would otherwise hide the focused control — they can finish what they came here to do.
Who is affected
Sighted keyboard users when sticky chrome would otherwise hide the focused control.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Sticky Header or Footer Completely Covering the Focused Element
- Cookie Banner Covering a Focused Element Behind It
- Sticky Table Header Covering the Row That Currently Has Focus
- Floating Chat Button Covering a Focused Link in the Corner
- Non-Modal Popover Fully Covering the Element Behind It
- Off-Canvas Menu Covering Focused Content Without Disabling It