Reflow makes sure content adapts to different screen sizes, eliminating the need for horizontal scrolling and letting users zoom in up to 400% without losing any functionality or readability.
Quick history lesson: Reflow was defined before the advent of smartphones. Reflow is meant to ensure that you can zoom 400% on a desktop and still use the site, but because they defined a desktop screen size as 1280×1024 pixels, it meant that your site needed to adjust itself to fit into a 320×256 pixel frame.
Which just happens to match the iPhone 5, so we get sites that work on small mobile devices without scrolling in 2 dimensions (which is to say it should scroll up and down OR left to right, but not BOTH at the same time.) Neat, eh? So stop saying iPhone 5s are ancient and remember to test for that screen size.
Who this impacts
- People with low vision: They need to zoom in on text without breaking the layout or requiring side-scrolling.
- People using smartphones or small devices: Small screens benefit from content that reflows to fit without requiring side-scrolling or zooming in.
- People with motor impairments: Simplifying the layout to avoid horizontal scrolling reduces the physical effort needed to interact with content.
- People with cognitive impairments: Simplified, readable layouts help users focus on the content without the distraction of adjusting the view.
- Everyone: Responsive, reflowable content ensures a smooth, user-friendly experience across all devices.
How to meet Reflow
- Ensure the layout reflows on small screens: Design content to adapt and flow properly on a viewport width of 320px, so it fits on mobile devices without the need for horizontal scrolling.
- Test zooming up to 400%: Make sure content remains functional and clear when zoomed in up to 400% without requiring users to scroll horizontally.
- Check for vertical scrolling only: Ensure users can scroll vertically but not horizontally, even when zoomed in or viewing on smaller screens.
Practical example
Catbook redesigns its layout to ensure that when readers zoom in, the text automatically reflows, keeping the layout simple and preventing side-scrolling. This ensures that even at 400% zoom, users can read the content in a single vertical flow, which generally matches the size of mobile phones.
Exceptions
Tables and certain visual media like maps may be exempt from the reflow requirement if the information cannot be presented effectively with reflow.
Top tips
- Design responsively from the start: Use responsive design techniques to ensure your content adjusts smoothly to various screen sizes.
- Test zooming and reflow: Regularly test your site at 400% zoom and on different screen widths to make sure the layout holds up.
- Use media queries effectively: Leverage CSS media queries to create layouts that reflow properly across different devices and zoom levels.
What’s the difference between 1.4.4 Resize Text and 1.4.10 Reflow?
While both aim to help users with visual impairments, they target different aspects of readability and layout on a webpage.
WCAG 1.4.4: Resize Text focuses specifically on making text larger. It requires that users be able to zoom in on text up to 200% without needing assistive tools like screen magnifiers—and without the page layout going haywire. So, if you need that extra boost in text size to comfortably read, this guideline makes sure the content still looks good and stays functional at that larger scale.
WCAG 1.4.10: Reflow, on the other hand, is all about the layout. This criterion requires that content can be zoomed in up to 400% without needing horizontal scrolling. It ensures that everything—text, images, buttons—fits nicely within the screen’s width, especially on mobile devices or smaller screens where zooming in is common. The idea is to keep scrolling in one direction (usually up and down), so users aren’t stuck scrolling side to side to follow content.
In short, 1.4.4 focuses on scaling text, while 1.4.10 makes sure the whole page layout adapts smoothly to high levels of zoom without breaking usability.