• 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