• Success Criterion 1.4.10
  • Conformance level AA

Vertical Content That Forces Horizontal Scrolling at 320px

1.4.10 — Reflow

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Horizontal scrolling required for vertically-scrolling content at 320 CSS px (400% zoom on 1280) — fixed-width layouts.

Example 

.product-grid { width: 1200px; display: flex; }
.product-card { width: 280px; flex-shrink: 0; }

Why it matters

A shopper on a 320px-wide phone has to scroll sideways through every row of products just to see prices on the right edge.

How to test

Set the viewport to 320px wide: if a horizontal scrollbar appears for content that should scroll only vertically, it fails.

How to fix

Use fluid grid units instead of a fixed pixel width so the grid reflows into fewer columns on narrow screens.

.product-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.product-card { width: auto; }

Outcome

A shopper on a phone scrolls straight down through the product list without ever swiping sideways.

Who is affected

Mobile shoppers and anyone zoomed to 400% must scroll in two directions to browse a list that should just scroll vertically.

Learn more

Related scenarios