​Content contribution: Dai Green, Quality Assurance, MNIT partnering with Minnesota Management and Budget; JoAnn Rautio, Quality Assurance, MNIT partnering with the Minnesota Department of Employment and Economic Development; Kim Wee, Webmaster, MNIT partnering with the Minnesota Department of Education. 

Editor’s note: This is the latest article in our series “WCAG 2.1 – Improving Digital Accessibility.” Missed the first installments? While on the Accessibility News page review the feed for WCAG 2.1 in titles or the summary. Subscribe to our monthly newsletter to be sure you get each installment in this series! 

​We’ve explored Reflow in two previous articles, which covered the benefits of Reflow, how it impacts PDFs, and where it isn’t required, such as in tables: 

• ​Easy Read that will Demystify Tables, Reflow, and Magnification
• ​Oh Snap! Startling Discoveries When You Reflow Your PDF 

​We wanted to dig further into how Reflow impacts the roles of developers and quality assurance experts, and what they need to consider for building desktop and mobile web applications and native mobile apps and testing for conformance. This article is aimed at those who have familiarity with digital accessibility. 

What is Reflow? 

​Here’s a quick refresher on what Reflow is: It enables users to zoom content to 400% without having to scroll in two directions, and that text reflows within the width of the user’s device (regardless of what that device is). 

​Why Reflow? 

​WCAG 2.0 already addressed text resizing and magnification (1.4.4 Resize Text), so why has another zooming standard been added? WCAG 2.1 aims to address gaps in prior versions. Reflow helps to better meet the needs of users with disabilities, most notably for people who have low vision, cognitive disabilities, can’t move easily, or use mobile devices. 

​Reflow & Web Development 

​Reflow impacts the user agent*. For web and mobile applications, the user agents are: 

• ​Desktop browsers. 
• ​Mobile device browsers. 
• ​Native mobile apps – unlike with a desktop browser or mobile web application, these apps are built for Apple (iOS computers, iPhone, iPad) or Android mobile phones and tablets. Apps are downloaded and installed via an app store. They may have access to system resources, like Global Positioning Systems (GPS) or the camera. 

​*We spoke about other types of user agents in the previous articles mentioned, including PDF readers. 

​Design 

​It is important that web content be responsive to a user’s behavior and environment (e.g., screen size, changing viewport, platform, and orientation) and not adaptive (i.e., displaying an alternate version dependent on user agents or other factors).  

​If web pages are built according to the principals of responsive web design, Reflow should happen automatically. This design is enabled by CSS media queries that reformat the web content for different viewport widths at particular breakpoints. This provides optimized layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are triggered by narrower viewports and also when using the browser’s zoom function. 

​Responsive design is also efficient. One design will work regardless of the device, eliminating the need for different versions.  

​Note: It’s important to mention that most native mobile apps do not combine Reflow and Resize Text in the same way as desktop browsers. Native mobile apps can support Reflow to adjust the content to the new viewport width when the device orientation changes. However, these apps often can only zoom content to 200% with one-dimensional scrolling (which meets SC 1.4.4 Resize Text) but cannot maintain the one-dimensional scroll to 400%. Developers should make sure there is no limit to change the landscape on mobile, as it will further restrict the reflow of content. 

​How to ensure Reflow in Web Design 

• ​Ensure that horizontal scroll is not introduced at a width equal to 320 CSS pixels for vertical content.   
• ​Ensure that vertical scroll is not introduced at a height of 256 CSS pixels for horizontal content.   
• ​Ensure that long URLs and strings of text support Reflow.  

​Exceptions 

​Reflow may not be possible for web content that requires two-dimensional layout for usage or meaning where it is necessary to keep toolbars in view while manipulating content. Examples include maps and diagrams, video, games, presentations, data tables (not individual cells), and interfaces.  

​Testing 

​Although development and design are critical points to incorporate accessibility, testing is crucial to ensure content is, and remains, accessible. Here are pointers to test your web content (make sure to test on multiple devices*):

1. ​​Set the device’s browser zoom level to 400%.  
2. ​Set the browser window size to be 1280 pixels wide and 1024 pixels high.  
3. ​Open a separate window or screen to the same web page. Set the zoom level to 100 % and maintain the window size at 1280px by 1024px. 
4. ​Compare the two displays to check that functionality remains the same and content is not missing on the magnified view. 
   1. ​If content is missing, verify it has been made available in an accessible alternative way (i.e., a drop-down menu or popup) which can be accessed through a button or link, or another simple and intuitive action. 
5. ​In the magnified display (400% zoom), check for: 
   1. ​One scroll in one dimension.  
   2. ​For content read horizontally, check that all content and functionality is available without horizontal scrolling. 
   3. ​For content read vertically, check that all content and functionality is available without vertical scrolling. 
   4. ​If the browser is not capable of zooming to 400%, you can reduce the width or height of the browser proportionally. For example, at 300% zoom, the viewport should be sized to 960px wide. 
   5. ​Content is not cropped or expanded out of its frame. 
   6. ​Content doesn’t overlap. 
   7. ​Content remains sufficiently contrasted (for text and non-text elements).

​For a web page designed to adjust container sizes as text size changes: 

• ​Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature). 
• ​Examine the text to ensure the text container size is adjusted to accommodate the size of the text. 
• ​Ensure that no text is "clipped" or has disappeared. 

​*Native mobile apps will require slight modifications to test Reflow. We recommend working with a developer who specializes in building these apps to ensure your test plan properly accommodates the capabilities. 

​Training & Resources 

• ​How to Meet WCAG 2.1 Quick Reference Guide.
• Understanding SC 1.4.10 Reflow. 
• ​WCAG 2.1 Techniques that apply to Reflow: 
  • ​C31: Using CSS Flexbox to reflow content. 
  • ​C32: Using media queries and grid CSS to reflow columns. 
  • ​C33: Allowing for Reflow with Long URLs and Strings of Text. 
  • ​C38: Using CSS width, max-width and flexbox to fit labels and inputs. 
  • ​G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text. 
  • ​SCR34: Calculating size and position in a way that scales with text size. 
• ​Mozilla Developer Network (MDN): Responsive Design. 
• ​If you are a state employee, there are role-based trainings specific to WCAG 2.1 criteria. 
• ​Web Accessibility Initiative’s (WAI) Accessibility Evaluation Tools List.​