- Success Criterion 2.4.11
- Conformance level AA
Sticky Table Header Covering the Row That Currently Has Focus
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
A hotel booking site's room-selection page
What’s wrong
Sticky table headers or toolbars fully covering focused rows/cells when scrolled into position.
Example
A QA pass on a hotel booking site's room-selection page turns this up: sticky table headers or toolbars fully covering focused rows/cells when scrolled into position.
Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control. The practical effect on a hotel booking site's room-selection page: they get stuck and can't reach the control.
How to test
Tab to a control while scrolled past a sticky header/toolbar: if the sticky element fully covers the row/cell that currently has focus, it fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays.
Outcome
That one change on a hotel booking site's room-selection page means they reach and operate the control without a mouse, specifically for the “Sticky Table Header Covering the Row That Currently Has Focus” issue on a hotel booking site's room-selection page.
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
- 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