Category: Mobile Accessibility

Content Reflow on Mobile

Also known as: Reflow, Responsive Reflow, WCAG 1.4.10 Reflow

Simply put

Content reflow is the ability of a web page to rearrange itself so it can be read and used on small screens or when zoomed in, without forcing the user to scroll sideways to see everything. This helps people who use mobile devices, screen magnification, or have low vision. When reflow works well, no information or features are lost as the layout adjusts to fit a narrower view.

Formal definition

Reflow is addressed by WCAG Success Criterion 1.4.10 (Reflow), a Level AA criterion added in WCAG 2.1. It generally requires that content be presentable without loss of information or functionality, and without requiring scrolling in two dimensions, at a width equivalent to 320 CSS pixels (commonly framed as supporting content up to 400% zoom for a viewport of 1280 CSS pixels). This is typically achieved through responsive design techniques such as CSS breakpoints that change the page layout at defined viewport sizes so content adapts to the available space. Certain content that requires two-dimensional layout for use or meaning (for example some data tables, images, or interfaces) may be excepted. Meeting 1.4.10 supports users on mobile devices, users of screen magnification, and users with low vision; verifying reflow generally requires manual testing across viewport sizes and zoom levels rather than automated checks alone.

Why it matters

Content reflow directly affects whether people can read and operate a web page when they need to enlarge it or view it on a small screen. Without reflow, users who zoom in or use screen magnification may be forced to scroll horizontally to read a single line of text or reach a control, which makes content slow and frustrating to use and can cause information or functionality to be lost entirely. This burden falls most heavily on people with low vision, users of screen magnification, and the large population of people accessing the web on mobile devices.

Reflow is codified as WCAG Success Criterion 1.4.10, a Level AA criterion added in WCAG 2.1. Because AA is the conformance level most commonly cited as a target in accessibility policies, settlements, and agency guidance, reflow is frequently part of what organizations assess when evaluating their digital properties. Meeting this criterion supports a more usable experience across the wide range of viewport sizes and zoom levels people actually use.

It is important to note that satisfying 1.4.10 is one part of accessibility, not a guarantee of a fully accessible experience or of legal compliance. Conformance requirements evolve through regulation and case law, and this entry is not legal advice; organizations should consult qualified counsel and current agency rulemaking for their specific obligations.

Who it's relevant to

Users with low vision and screen magnification users

People who enlarge content or rely on screen magnification benefit most directly from reflow. When a page reflows correctly, they can read and operate it without being forced to scroll horizontally to follow a line of text or reach a control, and no information or functionality is lost as the layout adjusts.

Mobile device users

People accessing sites on small screens rely on content adapting to narrow viewports. Responsive layouts that reflow allow content to remain readable and usable on mobile devices instead of requiring two-dimensional scrolling.

Front-end developers and designers

Developers and designers implement reflow through responsive techniques such as CSS breakpoints that change the layout at defined viewport sizes. They also determine when a two-dimensional layout is genuinely required for use or meaning (for example some data tables or images), which the criterion may except.

QA and accessibility testers

Verifying reflow generally requires manual testing across viewport sizes and zoom levels rather than automated checks alone. Testers confirm that content presents without loss of information or functionality and without horizontal scrolling at the target width.

Compliance officers and accessibility program owners

Because 1.4.10 is a Level AA criterion and AA is the level most commonly cited as a target, program owners often include reflow in conformance assessments. Meeting it supports usability but does not by itself guarantee full accessibility or legal compliance, and requirements continue to evolve; consult qualified legal counsel for specific obligations.

Inside Content Reflow on Mobile

Reflow (WCAG 2.1 Success Criterion 1.4.10)

A Level AA success criterion added in WCAG 2.1 that generally requires content to be presentable without loss of information or functionality, and without requiring scrolling in two dimensions, at a width equivalent to 320 CSS pixels (or 256 CSS pixels of height for vertically scrolling content). It is commonly relevant to mobile displays and to zoomed desktop views.

Single-direction scrolling

The expectation that users generally scroll in only one direction to access content. For vertically scrolling content, horizontal scrolling should not be required to read text or reach controls, and vice versa.

Exceptions for certain content

The criterion allows exceptions for parts of content that require a two-dimensional layout for usage or meaning, such as data tables, complex images, maps, diagrams, video, and interfaces where controls must remain visible while content scrolls.

Responsive design techniques

Layout approaches such as fluid grids, flexible images, CSS media queries, and relative units that allow content to adapt to narrow viewports and support reflow without horizontal scrolling or clipping.

Relationship to zoom and resize

Reflow interacts with viewport size and magnification; content that reflows well on a small screen often also supports users who zoom on larger screens. It is distinct from, though related to, other criteria addressing text resizing and content presentation.

Common questions

Answers to the questions practitioners most commonly ask about Content Reflow on Mobile.

Does WCAG's reflow requirement only apply to mobile devices?

No. Although reflow is often discussed in the context of mobile, the underlying WCAG success criterion (Reflow, added in WCAG 2.1 at Level AA) is not device-specific. It addresses the ability of content to be presented without loss of information or functionality and without requiring scrolling in two dimensions, which is commonly evaluated by testing at a defined viewport width or by applying zoom on a desktop browser. The goal is to support users who zoom or use small viewports generally, not just users on phones.

If a page passes reflow, does that mean it is fully accessible and legally compliant on mobile?

No. Meeting the Reflow success criterion addresses one specific aspect of accessibility. It does not guarantee an accessible experience across all disabilities, nor does it ensure conformance with other WCAG criteria such as those covering text spacing, target size, or orientation. Conformance is also distinct from usability and from legal compliance; passing a criterion does not by itself provide immunity from legal claims. Comprehensive evaluation generally requires manual review and assistive technology testing in addition to automated checks. This is general information and not legal advice.

How is content reflow typically tested?

Reflow is commonly evaluated by presenting content at a narrow viewport width or by applying browser zoom, then checking whether content and functionality remain available without requiring scrolling in two dimensions. Testers generally verify that no information or functionality is lost and that horizontal scrolling is not introduced for content intended to be read vertically. Certain content that requires a two-dimensional layout for usage or meaning may be treated as an exception under the applicable success criterion.

What CSS techniques generally support content reflow?

Responsive design approaches are commonly used to support reflow. These often include flexible, relative units rather than fixed pixel widths, responsive layout methods that allow content to wrap or stack, and media or container queries that adapt layout to the available viewport. Avoiding fixed-width containers and horizontal-only layouts for text content generally helps content reflow without introducing two-dimensional scrolling.

How should data tables and other wide content be handled for reflow?

Content that inherently requires a two-dimensional layout, such as some data tables, may fall under the exception in the applicable success criterion when a two-dimensional presentation is necessary for use or meaning. Where feasible, designers often provide adaptations so the content remains usable at narrow widths, but any exception should be applied only where the two-dimensional layout is genuinely required. Testing should confirm that the rest of the page still reflows as expected.

Can automated tools confirm that content reflows correctly?

Automated tools can flag some layout and overflow issues, but they detect only a portion of accessibility problems. Confirming that content reflows without loss of information or functionality generally requires manual verification at the relevant viewport width or zoom level, along with review of how content behaves in practice. Manual and assistive technology testing are commonly needed to supplement automated checks.

Common misconceptions

Reflow simply means the site must be 'mobile-friendly' or use responsive design.

Responsive design is a common way to satisfy reflow, but the criterion is defined by a specific measurable behavior: presenting content at roughly 320 CSS pixels wide without loss of information or functionality and without two-dimensional scrolling. A site can appear mobile-friendly yet still fail if content is clipped or requires horizontal scrolling at that width.

The Reflow criterion applies only to mobile phones.

Reflow is often discussed in a mobile context, but it also applies to users who zoom or magnify content on larger screens, since high zoom levels produce a narrow effective viewport. The criterion is defined by CSS pixel dimensions rather than by device type.

All content must reflow to a single column with no exceptions.

The criterion explicitly permits exceptions for content that requires a two-dimensional layout for its use or meaning, such as data tables, maps, diagrams, and video. These do not have to be forced into single-direction scrolling.

Best practices

Test content at a viewport width equivalent to 320 CSS pixels (and appropriate height for horizontally scrolling content) to verify no information or functionality is lost and no two-dimensional scrolling is required.

Use responsive design techniques such as fluid grids, flexible media, relative units, and media queries so layouts adapt gracefully to narrow viewports and high zoom levels.

Apply the criterion's exceptions deliberately, reserving two-dimensional layouts for content that genuinely requires it, such as data tables, maps, and complex diagrams, rather than as a workaround for layout problems.

Verify reflow behavior at high desktop zoom levels as well as on small screens, since magnification produces a narrow effective viewport that this criterion also addresses.

Combine automated checks with manual testing and assistive technology review, since automated tools detect only a portion of reflow-related issues and cannot confirm that content remains usable and understandable.

Document how sticky headers, fixed controls, and overlays behave at narrow widths to confirm they do not clip content or force horizontal scrolling.