- Success Criterion 2.4.11
- Conformance level AA
- W3C reference F110
Sticky Header or Footer Completely Covering the Focused Element
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
A government tax-filing portal
What’s wrong
A sticky header/footer completely covers the element that currently has keyboard focus — the user is 'somewhere' they cannot see.
Example
Consider a government tax-filing portal: a sticky header/footer completely covers the element that currently has keyboard focus — the user is 'somewhere' they cannot see.
Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control. On a government tax-filing portal specifically, they lose track of where they are on the page.
How to test
Tab to a control while a sticky footer/header is on screen: if the bar completely covers the focused element, it fails.
How to fix
Use scroll-padding (spacing that keeps sticky bars off content) or spacing so sticky bars never fully cover the focused element.
Outcome
Fixed, a visitor to a government tax-filing portal can complete the task using only the keyboard.
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)
- Technique Related technique (opens in a new tab)
Related scenarios
- 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
- Anchor Link Landing an Element Directly Under a Fixed Header
- Off-Canvas Menu Covering Focused Content Without Disabling It