WebsightWhat it asks for, in plain English
Content has to work at a width of 320 CSS pixels without the reader having to scroll both down and across to read a line of text. 320 pixels is a small phone, and it is also what a 1280 pixel desktop window becomes at 400 percent zoom, which is how many people with low vision browse. Content that scrolls sideways by design, such as a long horizontal timeline, gets the same rule the other way round at a height of 256 CSS pixels.
Reflow means the layout changes to fit: columns stack, menus collapse, images shrink. It does not mean everything must still be visible at once.
Some things genuinely need two dimensions and are exempt: data tables, maps, diagrams, complex toolbars, and games. Even then, the rest of the page around them should still reflow.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.10 page has the full intent, techniques and definitions.
Who it affects
Someone with low vision browsing at 400 percent zoom has to scroll right and back left for every single line of a paragraph, which is slow enough to make them give up.
A person with a motor impairment finds two-direction scrolling with a trackpad or switch exhausting.
Anyone on a small or older phone sees the right-hand third of the page cut off.
Example
The row is a fixed 620 pixels wide, so the phone-sized frame has to scroll sideways to show Wednesday.
The cards wrap onto new lines when they run out of room. No sideways scrolling, nothing lost.
Show the markup behind both examples
<style>body{margin:0;padding:14px;font-family:system-ui;font-size:14px}p{margin:0 0 6px;color:#374151}.phone{width:300px;border:2px dashed #94a3b8;overflow:auto;padding:8px}.row{width:620px;display:flex;gap:10px}.row div{flex:1;background:#dbeafe;padding:10px;border-radius:6px}</style>
<p>A 320px wide screen, simulated:</p>
<div class="phone"><div class="row"><div>Monday: 9 to 5</div><div>Tuesday: 9 to 5</div><div>Wednesday: 9 to 5</div></div></div><style>body{margin:0;padding:14px;font-family:system-ui;font-size:14px}p{margin:0 0 6px;color:#374151}.phone{width:300px;border:2px dashed #94a3b8;overflow:auto;padding:8px}.row{display:flex;flex-wrap:wrap;gap:10px}.row div{flex:1 1 120px;background:#dbeafe;padding:10px;border-radius:6px}</style>
<p>A 320px wide screen, simulated:</p>
<div class="phone"><div class="row"><div>Monday: 9 to 5</div><div>Tuesday: 9 to 5</div><div>Wednesday: 9 to 5</div></div></div>How to check it
- On a desktop browser with the window about 1280 pixels wide, zoom to 400 percent (Ctrl or Cmd and plus, repeatedly).
- Scroll down through the page. A horizontal scrollbar on the whole page, or text you have to scroll sideways to finish reading, is a failure.
- Check menus, forms and dialogs at this size, not just the home page.
- Alternatively, set the browser's device emulator to 320 pixels wide and repeat.
What Websight checks for 1.4.10
Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.
Only a person can check this. A scanner looks at the page at one size and cannot tell what the layout does at 320 pixels. Websight lists it in its manual checklist.
Practical tips
- Use max-width: 100% on images and media, and avoid fixed pixel widths on containers.
- Build with flexible units (percent, rem, fr) and flex-wrap or grid auto-fit so things wrap by themselves.
- For a genuine data table, let the table itself scroll sideways inside its own box rather than the whole page.
Other criteria in guideline 1.4, Distinguishable
- 1.4.1 Use of Color (level A)
- 1.4.2 Audio Control (level A)
- 1.4.3 Contrast (Minimum) (level AA)
- 1.4.4 Resize Text (level AA)
- 1.4.5 Images of Text (level AA)
- 1.4.11 Non-text Contrast (level AA)
- 1.4.12 Text Spacing (level AA)
- 1.4.13 Content on Hover or Focus (level AA)