Keep horizontal carousels usable at 320 pixels
Read this one precisely. The thing that has to fit is not the thing people assume. G225 covers a section that scrolls horizontally, such as a carousel or a card row, and W3C's point is that the section itself does not fit. It scrolls sideways on purpose. What fits inside 320 CSS pixels is each panel within it, so the reader sees one full card at a time, reads it without scrolling sideways, and moves on by a control. This is a sufficient technique for 1.4.10 Reflow at Level AA. W3C's test sets a viewport of 1280 CSS pixels and zooms to 400 percent, which produces the 320 pixel condition. Watch the scrollbar. It is not part of the viewport dimensions and has to be excluded when you set that width.
How we find it in an audit
Our reviewers set the viewport to 1280 CSS pixels, excluding the scrollbar, then zoom to 400 percent. A whole page forced sideways by one wide row is the finding. Where a section scrolls on purpose, we check each panel reads complete at that width and that a visible control moves between panels.
How affected users experience it
One fixed-width row can force the entire page to scroll sideways, which turns every line of every paragraph into a two-direction journey for somebody reading at high zoom. Confining the scrolling to the row itself, and fitting each card into the width they actually have, means the page reads down the way it should and the carousel is something they step through deliberately.
Passes vs. fails
Passes
At narrow widths the row shows one full card at a time with a visible Next button, while the page around it scrolls only vertically.
Fails
A 'featured products' row fixed at 900 pixels wide that forces the entire page to scroll sideways on a narrow viewport.
How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
Other ways to satisfy this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C31sufficientReflow content with flexbox at narrow widths
- C32sufficientStack columns with grid and media queries
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
This guide is our interpretation of W3C technique G225: Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.