1.4.10 Reflow
Official description of the success criterion
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
What to do?
Ensure content reflows to fit a viewport without requiring horizontal scrolling.
Why is it important?
Enhances readability on small screens and for users with low vision.
Common pitfalls
A width of 320 CSS pixels is starting to be a bit narrow. Very often layouts are created for mobile widths of 375 pixels or even wider.
If a developer is not knowledgeable of accessibility, they might not allow the content to split into multiple lines e.g. in the header element.
How to test for it?
Vertical scrolling content should be functional at a width of 320 CSS pixels. You can start by testing that without any zooming. When you start testing the zooming, use a browser width of 1280 CSS pixels and then zoom to 400%. That is equivalent to a width of 320 CSS pixels.
Horizontal scrolling content should be functional at a height of 256 CSS pixels. Again, you can start by testing that height without any zooming. When you start testing the zooming, use a browser height of 1024 CSS pixels and zoom to 400%. This is equivalent to a height of 256 CSS pixels.
Some content is allowed to require two-dimentional scrolling. Some examples: maps and diagrams and data tables.