Success criterion 1.4.10 · Level AA
Reflow
“At 400% zoom I have to scroll sideways for every single line. It's like reading a novel through a keyhole.”
Success criterion 1.4.10 · Level AA
Reflow
Content can be presented without loss of information or functionality, and without scrolling in two directions, at a width of 320 CSS pixels.
Principle 1: Perceivable · Guideline 1.4: Distinguishable
What each role can do
- Product manager
- Make reflow at 320 px wide an acceptance criterion for every page.
- Designer
- Design single-column layouts for narrow widths; avoid fixed-width containers.
- Developer
- Use responsive CSS (flex, grid, relative units) and avoid horizontal overflow, except for tables, maps and diagrams.
- Tester
- Test at 1280 px wide and 400% zoom; confirm no horizontal scrolling for reading.
Once it is fixed
“Everything stacks into one tidy column now. I scroll down, and only down. Bliss!”
Next criterion: 1.4.11 Non-text Contrast