Content can reflow without loss of information or functionality, and without requiring scrolling in two dimensions. (Level AA)

Rationale

Objective: Ensure content can be enlarged without requiring horizontal scrolling

The key intended beneficiaries of Reflow are low-vision users who want to be able to enlarge text yet still see the content in their viewport without scrolling across the page.

With Reflow, width constraints are placed on horizontally read languages such as English, while height constraints are placed on vertically read languages such as Chinese. The contraints are as follows:

  • Vertical scrolling content "can be presented without loss of information or functionality, and without requiring scrolling in two dimensions" at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content can be presented in the same manner at a height equivalent to 256 CSS pixels.

"Scrolling in two dimensions" refers to forcing the user to scroll in both the X dimension (left and right) as well as the Y dimension (up and down) in order to view the content. Such scrolling makes it difficult to keep your place when relocating from the end of a long line to the start of the next line, especially when text is magnified. Since IBM mainly produces horizontally read content, we have simplified the objective of this guidance to say "horizontal scrolling" which is the scrolling to avoid in most written languages, including English.

The WCAG requirements of Reflow are written in such a way that an author can test for reflow on a desktop browser with typical 1280x1024 pixel dimensions by zooming the content to 400%. If the content expands without requiring scrolling in both dimensions, this is mathematically the same as reducing the window to 320x256 pixels.

The requirement for Reflow can be thought of as complementary to the pre-existing WCAG 2.0 need to Resize Text, which requires text to be able to be doubled in size. Resize does not require text to reflow, but merely to enlarge. When combined with Reflow, it means that the starting size of text must be able to resized to 200% while still having the ability to reflow so that horizontal scrolling is not needed.

Exception: Parts of the content "which require two-dimensional layout for usage or meaning" do not need to meet this requirement. Two-dimensional content includes maps, videos and images, which generally rely on a maintained aspect ratio to be intelligible. As well, even relatively simple data tables may not fit within the confines of a reduced viewport and thus data tables are also excepted. It is important to note that there are advisory techniques that allow images to be displayed and tabular information to be transformed to fit within a constrained viewport. Where possible, content authors are encouraged to adopt such techniques.

IBM has simplified the normative language of this checkpoint. Refer to Understanding 1.4.10 (external link to WCAG) for more information.

Development Techniques

This paragraph appears in all checkpoints. Review the General techniques as well as other tabs applicable to your technology.  Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.

General techniques

Any item in this section represents a technique or combination of techniques deemed sufficient. Ensure you review WCAG Common Failures to avoid development mistakes.

Mobile Native (iOS) techniques

There are no specific Mobile Native iOS techniques for this checkpoint. Refer to the General techniques section.

Eclipse techniques

There are no specific Eclipse techniques for this checkpoint. Refer to the General techniques section.

Windows-based (MSAA+IA2) techniques

There are no specific Windows-based (MSAA+IA2) techniques for this checkpoint. Refer to the General techniques section.


Many links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation 05 June 2018: http://www.w3.org/TR/WCAG21/

Copyright © 1994-2019 World Wide Web Consortium, ( Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.

Copyright © 2019 IBM Corporation