In web design, supporting reflow refers to the process of fitting content to match the user’s viewport. The viewport is the visible area of the page, which may change depending on the user’s web browser, device, and preferences.
Reflow is important for web accessibility, and the Web Content Accessibility Guidelines (WCAG) require content to support reflow. In other words, content must be responsive to changes in the viewport rather than adaptive (serving completely different versions of the content depending on the user agent or other factors).
Here’s the full text of WCAG 2.1 Success Criterion (SC) 1.4.10, “Reflow:”
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.
So, how does following this guideline support the experiences of people with disabilities — and how can you identify potential reflow issues before they affect your audience?
Reflow provides users with more options for engaging with web content
Many people live with disabilities that change their browsing habits or preferences. For example, people with low vision may magnify content in order to read text, and people with motor control disabilities may enlarge websites to navigate more comfortably.
If your website doesn’t support reflow, these users may encounter barriers. Your users might need to scroll in two directions (horizontally and vertically) to read a single sentence. Some content may appear out of order on a smaller screen, which can confuse your readers. Important navigational elements may disappear entirely, preventing people from finding the information they need.
Responsive web design — or reflow — solves these problems. It’s also an essential consideration for the modern internet: When your content changes to match the viewport, your visitors can enjoy the same basic experience, regardless of whether they’re using a tablet, smartphone, or a desktop computer.
Related: 4 Incredible Benefits for Web Design Agencies That Incorporate Accessibility
Support reflow to provide web users with a more consistent experience
Web designers have numerous tools available for building responsive websites. Many content management systems (CMS), including WordPress, are designed to support reflow, but your design decisions will determine whether your site is truly responsive.
By using the best practices of CSS (cascading style sheets), you can optimize the visual appearance of your website on different platforms without altering its HTML structure. This makes your site more predictable. Regardless of how your audience finds your page, they’ll find the same functionality and content.
Quickly test your website’s responsive design
To check whether your website meets WCAG’s requirements, zoom your website by 200% or more. You can do this with simple keyboard commands:
- On Windows computers, use the Ctrl and + keys to zoom in.
- On Mac OS computers, use the Command and + keys.
As the screen real estate shrinks, you’ll notice some changes. On a responsive site, the content will be reorganized into a single vertical column as the viewport becomes smaller.
If your content isn’t responsive, however, you’ll need to scroll horizontally and vertically to read all of the content. Needless to say, that’s not a great experience for users — many people have issues tracking text when scrolling in two directions.
Related: How CSS Benefits Accessibility
Avoid common accessibility barriers when designing responsive websites
Some content requires multi-dimensional scrolling. For example, diagrams, maps, video games, and data tables may have toolbars that need to remain in view at all times, and single-direction scrolling might make these elements unusable. WCAG allows an exception for these types of content, so you don’t need to support reflow in these instances.
A few more tips to keep in mind when designing your site:
- Test your content in a variety of environments. Some users may use high contrast modes or set their own preferences for fonts and background colors. Make sure your site is navigable and understandable for these users.
- Don’t force visitors to use a certain display orientation. Avoid restricting the mobile display to portrait or landscape mode (unless doing so is essential for accessing certain features).
- Check your site’s keyboard accessibility. As you scroll through the site using the Tab and Shift + Tab commands, the keyboard focus should move in a predictable way.
- If your site uses an element that cannot reflow (such as a graph or map), consider providing a text description of any important information included in the element.
- While writing CSS markup, use color thoughtfully. Follow WCAG’s requirements for color contrast and never use color alone to convey meaning.
- As content reflows, your site’s organization may change. This is acceptable as long as the content appears in a predictable order and all functionality is still accessible. In other words, content should not be hidden.
Designing an accessible website takes effort, but it’s much easier when you prioritize accessibility from the first stages of development. For more guidance, reach out to our experts or download the Definitive Website Accessibility Checklist eBook.
