Intent of this Success Criterion
The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.
For people with low vision, enlarged text with reflow enables reading. It is critical. Enlargement enables perception of characters. Reflow enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.
Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.
How reflow works
User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.
Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.
In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.
Viewing distance and display resolution
The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.
Different types of display are typically used at different viewing distances. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In Fig. 1 above, each vertical line shall represent a 16px letter. The letter projected onto the retina remains the same size even though the absolute size of the letter on different displays (phone, tablet, laptop and desktop) is quite different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.
Visibility and availability of content
How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.
The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.
Content exceptions for reflow
Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).
Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to data tables.
Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). This Success Criterion therefore does not apply to interfaces which provide toolbars.
Browsers in mobile operating systems
The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.
In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent support issue.
Responsive web design and other ways to meet this Success Criterion
Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).
For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.
Avoiding scrolling in horizontally and vertically written languages
The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.
The relation of Reflow to the Success Criterion 1.4.4 Resize Text
The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. The Resize Text (Success criterion 1.4.4) also applies, so it should be possible to increase the size of all text by at least 200% as well. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.