- Success Criterion 2.4.11
- Conformance level AA
Cookie Banner Covering a Focused Element Behind It
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
A food delivery app's restaurant menu
What’s wrong
Cookie/consent banners overlaying page while background stays tabbable — focused items fully hidden beneath.
Example
This shows up on a food delivery app's restaurant menu: cookie/consent banners overlaying page while background stays tabbable — focused items fully hidden beneath.
Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control. In this case (a food delivery app's restaurant menu), they can't complete the task using a keyboard alone.
How to test
Tab to a control while a cookie/consent banner is open: if the banner fully covers the focused element while the background stays tabbable, it fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays.
Outcome
Once corrected, a food delivery app's restaurant menu lets them keep track of where they are on the 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
- 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