Understanding WCAG SC 1.4.10 Reflow

Success Criterion 1.4.10 Reflow (Level AA): 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% 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% zoom.
Examples of content which requires 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.

People with low vision use zoom functionality more often than not to read the contents of a web site. In some cases, some users may require more than 200% or – to be more specific – up to 400% of zoom to read the content. Given this use case, there is a high chance of content being hidden to a particular side or being cut off, making it difficult to read.
This success criterion requires that the content reflows vertically or aligned to a single column without requiring the use of two dimensional scrolling. Technically speaking, the reflow must be supported up to 400% zooming on a desktop with 1280 PX screen which is equivalent to 320 CSS PX. This measurement comes down to a mobile device which has the minimum screen size.

How do we meet this?

Responsive Web Design (RWD) is the only answer to this critical problem. Writing the CSS media queries for different viewport widths would fix most of the issues here. In simple terms, as the user zooms up to 400% or views the content on a small mobile device, the screen realest ate shrinks. RWD, in turn, fits the content into the screen in spite of how smaller the screen is.

What is expected?

Generally, if a menu is horizontally spread over a big screen, it either shrinks to a single column menu or further wrapped in a hamburger menu at the top of the main content when the user zooms the page. Similarly, content can be wrapped within a toggle type element that can expand/collapse or show/hide them in a single column. All that matters is that the SC requires that there should be no loss of content or functionality and/or a horizontal scroll bar.

Exceptions

Videos, charts, graphs, complex tables and authoring tools that have editing toolbars and any content or user interface components that require two dimensional scrolling to understand the content need not meet the success criterion.

Points to Ponder

Related Reads