The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.
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 impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.
Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.
The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.
Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. 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.
Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).
User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).
The benefits are primarily for people with low vision. Of the 285 million people worldwide who are visually impaired, 14% are blind and 86% have low vision according to the World Health Organization (WHO). A significant proportion of people with low vision need more than a 200% increase in the size of content. From the WebAIM survey 25% of low vision users indicated needing magnification to 400% or more.
The main principle here is that the web content must be capable of resizing. It is not a device-specific issue. Starting with a desktop browser at 1280px wide and zooming 400% provides a mobile view of 320 px. This works in desktop/laptop browsers.
The whole concept is enabled by media queries (in CSS), which were designed to enable reformatting for mobile devices. However, the physics of the smaller screens means that expanding text and/or other content is more constrained. The layout method browsers use on small screen devices does not reflow in the same way, it magnifies (e.g. with pinch-zoom) and causes horizontal scrolling regardless of what an author does.
Note that the Resize Text (Success criterion 1.4.4) still applies so there should still be a method of increasing the text-size on smaller screen devices, even if it causes scrolling.
For content that is of a fixed ratio (video, images etc) they come under the "require two-dimensional layout" exception. In practice they can expand up to the width (and/or height) of the viewport, and be limited to that.
It is by dimension, in the same way that Resize Text (Success criterion 1.4.4) is by dimension. Zooming 200% means the width is 200% wider and height is 200% taller.
Using responsive design is the most effective method of achieving the goal of allowing people to zoom in to 400%. 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.
So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).
It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.
However, if content or functionality is removed that would fail this success criteria.
The focus of the Reflow success criteria is to enable users to zoom in without scrolling in two directions. 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.
Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu, and eventually most navigation options are behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling..