For ‘Reflow’, you must ensure all content retains meaning and function without scrolling in two dimensions.
Some users with visual impairments need to resize text to read it comfortably.
When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.
How to Pass ‘Reflow’
- Ensure vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels
- ensure horizontal content doesn’t require a vertical scroll at a height of 256 CSS pixels
- Where multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view)
- Complex data tables
Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.
It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Reflow your content into a single vertical column when enlarged.
320 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.
256 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%.
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.