- Success Criterion 2.4.11
- Conformance level AA
Floating Chat Button Covering a Focused Link in the Corner
2.4.11 — Focus Not Obscured (Minimum)
Scenario
Setting
A hospital's patient portal appointment scheduler
What’s wrong
Chat launchers/floating action buttons fully covering focused links in corners.
Example
.sticky-header { position: sticky; top: 0; } /* covers focused fields below it */ Why it matters
Sighted keyboard users when sticky chrome would otherwise hide the focused control.
How to test
Tab to a control near a corner while a chat launcher or floating action button is visible: if it fully covers the focused link, it fails.
How to fix
The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays. .input-field { scroll-margin-top: 80px; } /* clears the sticky header on focus */ A focused element must not be entirely hidden behind sticky headers, footers, or other fixed content.
Outcome
On a hospital's patient portal appointment scheduler, this barrier is gone for sighted keyboard users when sticky chrome would otherwise hide the focused control — they get the same result as anyone else here.
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
- 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