• Success Criterion 1.4.10
  • Conformance level AA

Nested Scroll Area Requiring Scrolling in Both Directions

1.4.10 — Reflow

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Zoom traps: content requiring both directions of scroll inside nested scroll containers.

Example 

.chat-widget { width: 300px; height: 400px; overflow: auto; }
.chat-log { width: 500px; } /* wider than its scroll container, forcing horizontal scroll inside vertical scroll */

Why it matters

A user zoomed to 400% has to scroll the chat log down to read new messages and separately sideways to see each message's full width.

How to test

Set the viewport to 320px and scroll within nested scroll containers: if reaching content requires scrolling both horizontally and vertically inside a nested box, it fails.

How to fix

Let message text wrap within the widget's width instead of overflowing it, so only vertical scrolling is ever needed.

.chat-widget { width: 300px; height: 400px; overflow-y: auto; }
.chat-log { width: 100%; }
.chat-log .message { overflow-wrap: break-word; }

Outcome

A zoomed-in user scrolls the chat log straight down and reads every message without a sideways detour.

Who is affected

Zoomed-in users get trapped scrolling in two directions within a small chat panel just to follow a conversation.

Learn more

Related scenarios