Chapter 32: Text reflow

People with low vision typically enlarge the text to read the content on the screen. With a 100% scaled width to the content is usually displayed in 2 or 3 columns. When the user uses the browser zoom functionality to enlarge the text, the content reflows and is displayed in a single column. When the content reflows, users will have difficulty to scroll both horizontally and vertically.
Allowing to scroll the page only in one direction even when browser zoom is set to 400% will be helpful for low vision users. This success criteria 1.4.10 reflow exactly recommends it. Enlarging the text will allow the low vision users to clearly look at each character and reflow is useful to track the content they are reading. It will be often difficult for low vision users to get to the exact next line after reading through the end of previous line. With reflow enabled tracking becomes easy.
Responsive web design is similar to supporting reflow. The idea is to fit the content within the boundaries even when the user zoom to 400%. Allow the user to read the content scrolling only in one direction. The spacing and the placement of the elements may be changed but the content or functionality must not be lost.
This is similar to a responsive design. When an URL is viewed on a desktop it may display all the navigation items but the same URL when viewed on a tab it may show the navigation items as accordion and on a mobile it may display as a hamburger menu.

Exceptions to content reflow

Few content elements loose the meaning when viewed only in one direction. Such situations and elements are exempted from this success criteria. Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content

Points to remember

  1. One direction scrolling does not always mean vertical scrolling. The content with language written vertically on the screen requires horizontal scrolling when the content reflows.
  2. The maximum zoom level to check for reflow in this success criteria is 400%.
  3. When user zooms up to 400% content should demand user to scroll only in one direction. The content should not be hidden or overlapped, functionality and elements on the page should not be missed.

More Information

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.