• Success Criterion 1.4.10
  • Conformance level AA

Floating Chat Widget Blocking Content at Mobile Width

1.4.10 — Reflow

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Chat widgets/floating buttons overlapping and blocking content at 320px.

Example 

.chat-launcher { position: fixed; bottom: 16px; right: 16px; width: 72px; height: 72px; }
.filter-panel { padding-bottom: 0; } /* the Apply Filters button sits directly under the fixed chat bubble */

Why it matters

At 320px wide, the fixed chat bubble sits directly on top of the Apply Filters button, so shoppers can't tap it without first dismissing the widget.

How to test

Set the viewport to 320px and check floating chat widgets/buttons: if they overlap and block page content with no way to dismiss or reposition them, it fails.

How to fix

Reserve safe padding around fixed overlays, or let users collapse them, so they never cover essential controls at small widths.

.chat-launcher { position: fixed; bottom: 16px; right: 16px; width: 56px; height: 56px; }
.filter-panel { padding-bottom: 72px; }

Outcome

A shopper on a phone taps Apply Filters directly instead of first hunting for a way to close the chat bubble.

Who is affected

Mobile shoppers with limited dexterity or vision can't easily locate or reach the filter button hidden behind the overlay.

Learn more

Related scenarios