- Success Criterion 2.4.11
- Conformance level AA
Non-Modal Popover Fully Covering the Element Behind It
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Non-modal dialogs/popovers opened over content that remains focusable and fully obscured.
Example
An online clothing store's product listing page is a good example: non-modal dialogs/popovers opened over content that remains focusable and fully obscured.
Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control. On an online clothing store's product listing page, that means they lose track of where they are on the page.
How to test
Open a non-modal dialog/popover over page content, then Tab: if the background content remains focusable and gets fully hidden underneath, it fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays.
Outcome
With the fix in place on an online clothing store's product listing page, they 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
- 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
- Anchor Link Landing an Element Directly Under a Fixed Header
- Off-Canvas Menu Covering Focused Content Without Disabling It