Definition for WCAG 2.1 success criterion 1.4.10
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.
Note: 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.
Note: 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.
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.
This success criterion is primarily for people with low vision. According to the World Health Organization, of the 285 million people worldwide who are visually impaired, 14% are blind and 86% have low vision. A significant proportion of people with low vision need more than a 200% increase in the size of content. From the WebAIM survey (2013), 25% of low vision users indicated needing magnification to 400% or more.
Zooming the page for horizontally written languages where pages scroll vertically by default (for example, English) should not require horizontal scrolling. Zooming the page for vertically written languages (for example, Japanese, Korean, Chinese can be written horizontally or vertically) that 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. 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 clipped on 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.
Note: The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can achieve 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 "equivalent to" 320px wide. Many sites currently cater to that range of sizes, and that number will increase as more sites update to be small-screen friendly.
Note: 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.
Note: 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 criterion does not apply to data tables. Interfaces that 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).
Testing success criterion 1.4.10
Input into spreadsheet
- Fail
- Horizontal and vertical scrolling occurs at 400% zoom.
- Pass
- All content remains readable without horizontal and vertical scrolling at 400% zoom.
How to test
- Set the full-page zoom level to 400%; in most browsers, this can be achieved either through the browser's user interface, menu options, or by using the Ctrl + + or command + + keyboard shortcut.
- Verify if any content overlaps, breaks out of its containing elements, is cut off, or otherwise becomes unreadable or inoperable. In particular, look for elements which have been floated/anchored to specific positions in the page (e.g. containers that are absolutely positioned to the right-hand side of the viewport) which may now be overlapping important content.