Exploring WCAG 2.1 — 1.4.10 Reflow

Our series on the new WCAG 2.1 Success Criteria continues with the new level AA criteria aimed at low vision.  There are 4 new success criteria under the 1.4 guideline, Distinguishable. This post reviews 1.4.10 Reflow.

1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

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.

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

Overview

Don’t let the math confuse you. The starting values of 1280 x 1024 are an accepted “standard” desktop size.  Zooming by 400% reduces the width to 320 (1280 divided by 4) and the height to 256 (1024 divided by 4) which are “standard” mobile sizes.  Many sites today use responsive design to adjust the view of the application to match the screen size. The need for resizing may be due to zooming on a desktop device or viewing within a smaller viewport such as a mobile device.

The 20 second video below demonstrates how the Knowbility website adusts to a changing window size.  While viewing the Knowbility web site in Chrome I zoomed from 100 to 400%. When zoomed, the page has a vertical arrangement and I scroll in one direction, up and down, to access information.  Notice how the navigation menu across the top collapses into a menu button in the upper right as the screen size diminishes.  

Note: Video contains moving/scrolling content.

Exclusions

There are some features that can’t be adjusted to scroll in only one direction. Maps are a good example.  You can’t break up a map into a stack of  blocks.  It  needs to scroll in both directions to remain usable. Some graphics and images must also scroll in both directions to display correctly.

Who Benefits?

Users with low vision who need to make the content larger benefit when the layout adjusts. Research shows that horizontal scrolling significantly reduces reading comprehension.¹ It is easier for  for people who enlarge text to read word-wrapped text line by line rather than scrolling back and forth across long lines of text. People with mobility issues may have difficulting scrolling in more than one direction. Everyone benefits when all content is easily viewed on a mobile device.

Takeaways

Use responsive design to allow your content to zoom and respond to various screen sizes.