- Success Criterion 2.4.11
- Conformance level AA
Off-Canvas Menu Covering Focused Content Without Disabling It
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
An online spreadsheet's toolbar
What’s wrong
Off-canvas menus sliding over main content that keeps focus without inerting the background.
Example
On an online spreadsheet's toolbar: off-canvas menus sliding over main content that keeps focus without inerting the background.
Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control. On an online spreadsheet's toolbar specifically, they get stuck and can't reach the control.
How to test
Open an off-canvas menu that slides over the main content, then Tab: if the background remains focusable underneath without being made inert, it fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays.
Outcome
Fixed, a visitor to an online spreadsheet's toolbar 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)
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
- Anchor Link Landing an Element Directly Under a Fixed Header