• 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

Here's what happens on a customer-support live-chat widget: focus indicator hidden behind overlapping elements/sticky bars (visibility defeated — see also 2.4.11).

Why it matters

Sighted keyboard users and low-vision users who must see where focus is. In this case (a customer-support live-chat widget), they can't operate the feature without a mouse.

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 clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.

Outcome

Once corrected, a customer-support live-chat widget lets them keep track of where they are on the page, specifically for the “Focus Indicator Hidden Behind an Overlapping Sticky Element” issue on a customer-support live-chat widget.

Who is affected

Sighted keyboard users and low-vision users who must see where focus is.

Learn more

Related scenarios