Responsive Design and Reflow

Introduction

The vast majority of websites have a responsive design. Responsive design is the use of HTML and CSS to ensure that web pages are optimized for multiple devices, regardless of the size of their screens. The viewport presents the part of a web page that is visible to the user, and viewport sizes vary based on the user’s device. For example, a mobile phone may have a viewport width of 375 pixels, a tablet 768 pixels, and a laptop 1280 pixels. Magnification, such as zooming in and out, also changes the size of the viewport.

An important component of responsive design is reflow, which is how a web page adapts to fit viewports of different sizes.

How is Reflow Activated?

Reflow can be triggered by a device’s native viewport size (e.g., a mobile phone) or when the use of magnification would otherwise require a user to scroll horizontally to view all of a web page’s content on their screen. Reflow works by adding CSS breakpoints that activate at certain viewport sizes. The CSS breakpoints change the layout of the page to fit the new viewport, while containing all the text content, causing the page to reflow. Another name for this technique is responsive layout, as the layout responds when the viewport changes.

Why is Reflow Important?

Users with low vision may rely on web page magnification to enlarge text that would otherwise be too small for them to read. Users with cognitive or learning disabilities such as dyslexia may also benefit from magnification.

For these users, it is essential that no content is lost when they zoom the page, and that they don’t need to scroll horizontally to read the content. It is very difficult to read page content when the user must scroll or pan to read text that extends off the side of the screen.

What is Required for Accessibility?

WCAG Success Criterion 1.4.10 - 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

This means that for content that normally scrolls vertically, there must be no loss of information or functionality, and no horizontal scrolling required, down to a viewport width equivalent to 320 CSS pixels. This ensures that content will reflow when users zoom full-size displays or use small devices.

Setting your browser width to 1280 pixels wide and zooming a page to 400% is typically very similar to setting the width to 320 pixels.

An example of a page that fails these requirements is this archived NASA article. At 400% zoom, the page’s content requires horizontal scrolling to read. Additionally, the “MORE” link on the left side overlaps page content making it difficult to read.

Exceptions

Most content should not require horizontal scrolling to read, but there are some exceptions if content requires a two-dimensional layout. Content that requires a two-dimensional layout includes maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.

How to Test Reflow

1. In Chrome, open Developer Tools (right-click on the page and click “Inspect” in the context menu).
2. Resize the browser window to 1280 pixels wide. The dimensions of the page display at the top right of the DevTools window.
3. Press Ctrl/command and:
   • + to zoom in (larger)
   • - to zoom out (smaller)
   • 0 to reset to 100%
4. Zoom from 100% to 400%.

At each zoom level, ensure that no content or functionality is lost, and that no horizontal scrolling is present (unless the content requires horizontal scrolling—e.g., a data table or map that is wider than the page). Test that dialogs, accordions, tooltips, and menus are usable at up to 400%.