WCAG – 1.4.10 Reflow (Level AA)

1.4.10 Reflow (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: 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.

Requirements

  • Make sure that all content and functionality are available on 320pt-wide screens.
  • Make sure your pages are responsive and the content will ‘reflow’ to a single column gracefully.
  • A simple browser based test is to view the page with a viewport width of 320px, or 1280px at 400% zoom.
    • You can zoom in on a Mac in Chrome by pressing Command and + key, until you see the resolution hit 400%.

Benefitted Disability Types

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 difficulty scrolling in more than one direction. Everyone benefits when all content is easily viewed on a mobile device.

Why is it important?

  • People who are sight impaired often use screen magnification to resize page content and this can cause info to get lost.
  • Scrolling can often be difficult for some disabled users, more so when horizontally or both horizontally and vertically at the same time.

Summary

  • Make sure users can access all information and functionality on a screen that’s as wide as on the iPhone5, without needing to scroll in both directions.
  • On smaller devices or when content is zoomed there should be no loss of information or functionality, and users should not be required to scroll content both vertically and horizontally.

Common Mistakes

  • Content does not reflow to a single column when zoomed.
  • Horizontal scrolling appears in both directions at some low resolutions when content is zoomed.
  • Using fixed sized containers and fixed position content (CSS)
  • Use of <code><pre> formatted content (such as code) can cause horizontal scrolling. Using the CSS declarations such as word-wrap: break-word; on <code><pre> in small viewports will help to avoid horizontal scrolling at all.

Design Guide

Reflow Examples for IOS


label.numberOfLines = 0


override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if traitCollection.horizontalSizeClass == .compact {
      stackView.axis = .vertical
    } else {
      stackView.axis = .horiztonal
    }

    if traitCollection.preferredContentSizeCategory >= .accessibilityLarge {
        stackView.axis = .vertical
    } else {
        stackView.axis = .horiztonal
    }
}

NOTE: You could also observe traitCollectionDidChange to modify UICollectionView layouts to reflow your layout.

Reflow Examples for Android

All Views will automatically allocate its content, as long as there’s no height restriction. Using android:layout_height="wrap_content" is strongly recommended whenever possible.

If you’re using a ConstraintLayout, make sure it has match_parent on both height and width to fill the whole viewport. Make sure all its child Views are properly constrained to the edges.

In case of a screen with a huge load of content, it’s recommended to add a ScrollView to allow the users to scroll vertically when the screen is zoomed.

Reflow Examples for Flutter

Flutter will by default shrink and grow its widgets to meet the content height restriction as long as the container of the text/content does not have a set height.

If a widget goes off screen on a device it will show a overflow error on the screen during development.

Text in Text() widgets will naturally be softwrapped but can have this functionality toggled.

softWrap: bool, 

Make sure that your screen/widget is scrollable you can use widgets like SingleChildScrollView() to wrap your ui to make it scrollable.

Widgets like ListView.builder are scrollable by default.

SingleChildScrollView(
      child: 
)

Scrolling direction is locked to a default direction but can have this toggled.

scrollDirection: Axis.enum, 

Reflow Examples for Web

Displaying code

The use of <code><pre> formatted content (such as code) can cause horizontal scrolling. Using the CSS declarations such as word-wrap: break-word; on <code><pre> in small viewports will help to avoid horizontal scrolling at all.

References

  1. UILabel developer reference
  2. UITraitCollection developer reference
  3. UICollectionViewLayout developer reference
  4. ConstraintLayout developer reference
  5. W3C’s detailed explanation with techniques and examples.
  6. Accessibility Guidelines- Github.io