WCAG 2.1 – What is Reflow?

In our recent blog posts, we’ve been looking at each of the new criterion that have been added in WCAG 2.1. Continuing on this series, this post will look at 1.4.10 – Reflow.

Imagine that you’re trying to read a block of text in a book or on a website, but to make it more challenging, you’re reading it through a straw. As you get to the end of one line, you’ve got to quickly move to the start of the next line. However, this can be difficult get right and you might struggle to find the next line and it either slows down your reading, or you read the wrong line.

The problem with reading text

Users with low vision may have a similar problem when reading a block of text. As they magnify the page to help read a line of text, it becomes difficult to quickly move to the start of the next line without losing their place. This is to say, that both horizontal and vertical scrolling reduces reading comprehension and research papers have been written to highlight this fact.

However, this concern doesn’t just apply to text, but to any component of a website, including images, forms, tables and video.

An example of reading zoomed in text.

A user concentrating on a small portion of text has to scroll both vertically and horizontally to navigate, and this increases their chances of losing their place.

1.4.10 – Reflow (Level AA)

The WCAG Success Criterion for Reflow states:

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 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.

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.

Responsive websites

To overcome this problem, pages have been designed to be responsive, that is, automatically adjust the content to fit the width of a screen. You can see a working example of this on the Dig Inclusion website if you’re on a desktop and keep zooming in (press Control and + repeatedly). You’ll notice the content moves and shifts to fit the screen, and the menu collapses to save space. This responsive design means that the content only has to be accessed in one direction: vertically; there’s no horizontal (left to right) scrolling required.

This helps users with low vision because they can make the text appear larger without it losing form and without requiring scrolling left and right across a page.

The Dig Inclusion website in mobile mode

Specifically under WCAG requirements, a web page or downloadable document (such as a PDF) has to be able to zoom in to 400% of a standard resolution and scrolling made available in one direction only in order to pass this criterion.

400% zooming may sound like a lot, but when using a smaller screen, such as a mobile phone, a responsive page ‘zooms in’ automatically in order that the text and other features can be read on a smaller screen.

How is this different to Resize Text?

Criterion 1.4.4 – Resize Text was included in WCAG 2.0 and is still included in the latest requirements. With the resize text criterion, text had to be able to adjust to 200%. The new Reflow criterion is both an extension and an improvement on the Resize Text criterion. Whereas the Resize Text criterion stated that text must be resized to 200% without being hidden, the new criterion emphasises that all content must be able to be resized up to 400% the size of the original.

Exceptions

There are some notable exceptions to the Reflow requirement. A large screen item, such as a map or layout of a board game, or some data tables may require two dimensional scrolling in order to view all parts of the content.

Conclusions

The Reflow criterion states that a website must be able to be zoomed in to 400% the size of the original and this helps all users of a website. It helps uses with moderately low vision or cognitive disability users who may require increasing the size of a page for their viewing, but it also helps able bodied users who are viewing a website on a smaller screen, such as a mobile device.

Does your website meet the Reflow criterion?

It’s possible that your website has been designed in such a way that it will already meet the Reflow criterion. However, it could be that your web page doesn’t respond to the needs of a user and this restricts all users who may find your website difficult to use if they have a visual impairment or using a small screen.

Please feel free to contact us at Dig Inclusion to talk about Reflow and to discuss how we can test your website to make sure that it conforms to WCAG 2.1 standards.