1.4.10 - Reflow
Benefits users with:
- all disability types except screen reader users
- particularly, low vision
Intent
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 per cent, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.
Ways to meet the criterion
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.
320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400 per cent zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400 per cent zoom.
Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.
Examples
Zooming in / changing browser size
Desktop viewport width1200px with 100 per cent zoom
Success
- Content reflows when zooming in / changing the browsers size.
- Users can view content without scrolling horizontally.
Failure
- Content does not reflow when zooming in / changing the browsers size.
- Content is hidden when zooming in / changing the browsers size..
- Horizontal scroll bar shows up.
Testing principles
- Set a desktop viewport width 1280px.
- Testing cases:
- Zooming in 400 per cent to set the viewport width to 320px.
- Set the viewport width to 320px by narrowing the browser window.
- Check if content reflows without losing or hiding content element on both 2.1 and 2.2 testing cases, or check that there is a way to reach the same or equivalent content via discolure widgets, pop-ups, or links to other views.