• 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 

.help-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  z-index: 50;
}
<!-- sits directly over a Cancel appointment link in the same corner -->

Why it matters

When focus reaches the Cancel appointment link in the corner, the help button sits directly on top of it, hiding the exact link the patient needs.

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

Fixed corner widgets need enough surrounding page padding to avoid ever sitting on top of real content.

.appointment-actions {
  padding-bottom: 72px;
}

Outcome

A patient tabs to Cancel appointment and sees it fully, with the help button clear of it.

Who is affected

Keyboard users trying to manage appointments can't see a link obscured by a permanently fixed help button.

Learn more

Related scenarios