Perceivable · Level AA · 1.4.10
Reflow
At 400% zoom (roughly a 320px-wide viewport), content has to reflow into a layout that only needs vertical scrolling — no scrolling sideways just to finish reading a line of text. At that zoom level someone sees only a small slice of the page at a time, so anything that forces horizontal scrolling to keep reading adds real physical and cognitive effort on top of the low vision itself.
- Low vision
How to recognize it
Zoom the browser to 400%, or resize the viewport to 320px wide — same effect — and check whether every line of text can be read by scrolling only vertically. Common failures: a layout built with fixed pixel widths (a table used for page structure, a sidebar with a hardcoded width) that refuses to shrink, forcing horizontal scroll to reach content sitting off to the side; a multi-column layout that never collapses to one column at narrow widths, cutting text lines off mid-sentence; a navigation bar set to scroll horizontally instead of wrapping. This is a different failure from unreadable text size — that's 1.4.4's territory — this is specifically about needing to scroll in two directions just to keep reading, even once the text itself is large enough to see clearly.
How to fix it
Build layouts with relative units and responsive techniques — percentage or fr-unit grids, flexbox with wrapping enabled, max-width instead of a fixed width — so the layout naturally collapses to a single column once the viewport gets down to 320px, instead of overflowing sideways. Real exceptions exist for content that genuinely needs two-dimensional space to make sense: a data table's grid structure, a map, a diagram, a video (though inside a table, each individual cell's own content still has to reflow — it's just the table's row/column structure that's exempt). A marketing page laid out with fixed-width divs isn't one of those cases just because making it responsive is inconvenient.
Example
Avoid
.layout {
width: 1200px;
}.sidebar {
width: 300px;
float: left;
}
.content {
margin-left: 320px;
width: 900px;
}.nav {
white-space: nowrap;
overflow-x: scroll;
}Prefer
.layout {
width: 100%;
max-width: 1200px;
}.sidebar,
.content {
width: 100%;
}
@media (min-width: 700px) {
.sidebar { float: left; width: 300px; }
.content { margin-left: 320px; }
}.nav {
display: flex;
flex-wrap: wrap;
}