• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator Hidden Behind an Overlapping Sticky Element

2.4.7 — Focus Visible

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Focus indicator hidden behind overlapping elements/sticky bars (visibility defeated — see also 2.4.11).

Example 

.chat-widget {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 480px;
  z-index: 9999;
}

Why it matters

A visitor tabbing to a Submit ticket link near the bottom of the page gets an outline that renders completely underneath the chat widget's opaque panel.

How to test

Tab to a control positioned near a sticky bar or overlapping element: check whether the focus indicator is actually visible or hidden behind another element.

How to fix

A high z-index widget can visually erase a perfectly valid focus outline; account for it in scroll and layout, not just paint order.

html {
  scroll-padding-bottom: 500px;
}

Outcome

A visitor tabbing near the page bottom always sees the focus outline clear of the chat panel.

Who is affected

Keyboard users can't see the focus indicator on any control the chat widget happens to cover.

Learn more

Related scenarios