• Success Criterion 1.4.10
  • Conformance level AA

Modal Dialog Wider Than the Viewport With Unreachable Buttons

1.4.10 — Reflow

Scenario

Setting

A weather app's forecast screen

What’s wrong

Modals wider than viewport with internal 2D scrolling and unreachable buttons.

Example 

.forecast-modal { width: 600px; }
.modal-body { overflow: auto; } /* both axes scroll inside a fixed 600px box */

Why it matters

On a 320px phone, the hourly forecast modal's Close button sits off to the side, reachable only by scrolling both down and across.

How to test

Set the viewport to 320px and open modals: if a modal is wider than the viewport and requires internal 2D scrolling to reach its buttons, it fails.

How to fix

Cap modal width with max-width and let content wrap vertically instead of relying on horizontal scroll to reach controls.

.forecast-modal { width: 100%; max-width: 600px; box-sizing: border-box; }
.modal-body { overflow-y: auto; overflow-x: hidden; }

Outcome

A user on a phone finds the Close button right at the bottom of the modal without scrolling sideways to hunt for it.

Who is affected

Mobile users may never find the Close or Save buttons if they don't think to scroll a modal in two directions.

Learn more

Related scenarios