- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Content or Controls That Vanish Entirely When the Page Reflows
- Vertical Content That Forces Horizontal Scrolling at 320px
- Fixed-Width Container Forcing Scrolling in Two Directions
- Overlapping Content When the Page Is Zoomed to 400%
- Sticky Bars That Eat Up Most of a 320px Mobile Screen
- Desktop Breakpoint That Never Switches to Mobile Layout