The 2025 TestParty Guide to WCAG 1.4.10 – Reflow (Level AA)

Why did the fixed-width layout go to therapy? Because it couldn't adapt to change and kept making everyone scroll sideways!

WCAG 1.4.10 Reflow ensures that users can zoom content to 400% without being forced to scroll horizontally on desktop or vertically on mobile. This criterion is critical for people with low vision who need to magnify content—and it's a cornerstone of modern responsive design.

Table of Contents

• What WCAG 1.4.10 Requires
• Why This Matters
• Quick Implementation Guide
• Common Mistakes to Avoid
• How to Test for WCAG 1.4.10
• How TestParty Helps
• FAQs

What WCAG 1.4.10 Requires

At its core, Reflow means your content must adapt to narrow viewports without requiring two-dimensional scrolling. Specifically:

• Vertical scrolling content must work at a width of 320 CSS pixels (equivalent to 1280px at 400% zoom)
• Horizontal scrolling content must work at a height of 256 CSS pixels (equivalent to 1024px at 400% zoom)
• Users should never need to scroll both horizontally and vertically to read content

Key exceptions:

• Content that inherently requires 2D layout gets a pass: images, maps, diagrams, video, games, data tables, presentations, and interfaces where toolbars must stay visible while manipulating content
• The criterion applies to the content itself, not to individual UI components that legitimately need fixed dimensions

What's affected:

• Text content, paragraphs, and headings
• Navigation menus
• Forms and input fields
• Cards, panels, and content blocks
• Any layout that could force horizontal scrolling when zoomed

Why This Matters

People with low vision often zoom browser content to 200%, 300%, or 400% to read comfortably. If your layout doesn't reflow, they're forced to scroll horizontally to read each line of text—an exhausting, disorienting experience that makes your content effectively unusable.

From a compliance perspective, Reflow is a Level AA requirement under WCAG 2.1 and 2.2, which means it's mandatory for ADA compliance, Section 508 conformance, EN 301 549 (the European standard), and the European Accessibility Act. Lawsuits and demand letters increasingly cite responsive design failures, especially in ecommerce checkout flows and forms.

The business case is straightforward: responsive design isn't just accessible—it's expected. Mobile traffic accounts for over 60% of web usage, and users who can't complete tasks on your site will go to a competitor who got the basics right.

Quick Implementation Guide

Modern CSS makes Reflow compliance achievable with a few core techniques:

1. Use responsive units

• Prefer %, em, rem, vw, and vh over fixed px widths
• Set max-width instead of width for containers

2. Implement flexible layouts

• Use CSS Grid or Flexbox for layout structure
• Let content wrap naturally with flex-wrap: wrap

3. Apply media queries

• Target @media (max-width: 320px) to ensure narrow viewport support
• Stack columns vertically on small screens

4. Make text and inputs flexible

• Use width: 100% or max-width: 100% on form inputs
• Avoid fixed-width text containers

5. Test at 400% zoom

• Zoom your browser to 400% and verify no horizontal scrolling occurs

Example: Responsive card layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 100%;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, base width */
  max-width: 100%;
  padding: 1rem;
}

@media (max-width: 320px) {
  .card {
    flex-basis: 100%; /* Full width on narrow screens */
  }
}

This approach uses Flexbox (C31) to let cards wrap naturally. At 320px width, cards stack vertically without horizontal overflow.

Common Mistakes to Avoid

Fixed-width containers that don't adapt Setting width: 1200px on a main container forces horizontal scrolling at narrow viewports. Use max-width: 1200px instead, so the container shrinks when needed.

Absolute positioning that breaks reflow Positioning elements with fixed pixel coordinates (left: 500px) can push content off-screen. Use relative positioning or Flexbox/Grid alignment instead.

Long URLs and unbreakable strings A URL like https://example.com/very-long-product-name-that-never-breaks will overflow its container. Apply word-break: break-word or overflow-wrap: break-word to allow wrapping (C33).

Content that disappears when zoomed Using overflow: hidden on containers can clip content at high zoom levels. This is a direct violation (F102). Ensure content remains visible and accessible, even if layout shifts.

Sticky headers that consume vertical space Fixed headers that take up 30% of viewport height at 400% zoom leave little room for actual content. Consider un-fixing sticky elements at narrow widths using media queries (C34).

How to Test for WCAG 1.4.10

Manual testing is essential for Reflow, though automated tools can catch some layout issues.

Manual checklist:

• Set your browser zoom to 400% (or resize viewport to 320px wide)
• Scroll through every page and template
• Verify no horizontal scrollbar appears for text content
• Confirm all content remains visible (nothing clipped or hidden)
• Test forms, navigation, and interactive elements at high zoom

Automated scanning:

• Tools like axe DevTools and WAVE can flag fixed-width elements and overflow issues
• TestParty's DOM analysis detects containers with fixed pixel widths and missing responsive units
• Automated tools can't fully assess visual reflow—human review is required

Browser DevTools:

• Use responsive design mode to simulate 320px width
• Toggle device emulation to test mobile viewports
• Inspect elements for fixed widths and positioning

How TestParty Helps

TestParty's AI-powered platform detects, diagnoses, and helps remediate Reflow violations across your entire site—before they reach production.

What TestParty detects:

TestParty's automated scanning analyzes your CSS, DOM structure, and rendered layouts to identify Reflow risks:

• Fixed-width containers (e.g., width: 1000px without max-width)
• Elements using absolute positioning that may break reflow
• Overflow issues where content is clipped or hidden at narrow viewports
• Missing or incorrect media queries for 320px breakpoints
• Form inputs and labels with fixed pixel dimensions
• Long text strings (URLs, product names) without proper wrapping rules

TestParty simulates multiple viewport sizes during scans, flagging any page that requires horizontal scrolling at 320px width. It also detects CSS properties like overflow: hidden that commonly cause content to disappear (F102).

How TestParty suggests fixes:

For each Reflow violation, TestParty generates concrete, code-level remediation suggestions:

• Replace fixed width with max-width and responsive units
• Add or update media queries to stack content vertically at narrow widths
• Suggest Flexbox or Grid implementations (C31, C32) with example code
• Recommend word-break and overflow-wrap properties for long strings (C33)
• Propose max-width: 100% for images and iframes (C37)

These AI-generated fixes are reviewed by your team or TestParty specialists before being committed. TestParty doesn't apply changes blindly—it provides diffs and patches that integrate into your code review process, ensuring design intent is preserved.

Developer workflow integration:

Reflow issues often reappear when new features are added or templates are modified. TestParty prevents regressions by integrating directly into your development lifecycle:

• CI/CD gates block pull requests that introduce fixed-width layouts or missing media queries
• IDE and PR annotations flag Reflow violations at the line level, with suggested fixes inline
• Pre-commit hooks catch layout issues before code is pushed

For teams working with design systems or component libraries, TestParty scans at the template level. Fixing a Reflow issue in a shared card component automatically cascades the improvement across hundreds or thousands of pages.

Ongoing monitoring:

After remediation, TestParty continuously monitors your site for Reflow compliance:

• Dashboards track viewport behavior and zoom compatibility over time
• Automated regression testing ensures new deployments don't reintroduce horizontal scrolling
• Audit-ready reports document Reflow conformance for legal and procurement reviews

TestParty's monitoring is especially valuable for ecommerce sites and SaaS platforms where content and layouts change frequently. You'll know immediately if a new product page, checkout flow, or admin panel breaks Reflow requirements.

Because TestParty works at the code level—not as a cosmetic overlay—your Reflow improvements are durable, maintainable, and fully integrated into your front-end architecture.

Some TestParty features described in this article are currently under development. Visit TestParty.ai to learn more about our current capabilities and roadmap, or book a demo at TestParty.ai/book-a-demo to see TestParty in action.

Disclaimer: Some of this article was generated with Large Language Models (LLMs) and Artificial Intelligence (AI). There may be some errors and we advise you to consult with human professionals for detailed questions.

FAQs About WCAG 1.4.10

What is WCAG 1.4.10 Reflow in plain language?

Reflow means your website must work without horizontal scrolling when users zoom to 400% or view it on a 320px-wide screen. Content should stack vertically and remain fully readable without forcing users to scroll sideways.

Is WCAG 1.4.10 required for ADA compliance?

Yes. WCAG 1.4.10 is a Level AA criterion introduced in WCAG 2.1, and Level AA conformance is the standard for ADA compliance. It's also required under Section 508, EN 301 549, and the European Accessibility Act.

Do data tables need to reflow at 320px?

No. Data tables are explicitly exempt from Reflow requirements because they inherently require two-dimensional layout. However, you should still provide responsive table solutions (like horizontal scrolling for the table only, or a mobile-friendly card view) to improve usability.

Does Reflow apply to mobile apps?

WCAG 1.4.10 primarily targets web content, but the principle applies to mobile apps as well. Native apps should support system-level zoom and text scaling without breaking layouts or requiring two-dimensional scrolling.

What's the difference between Reflow and Resize Text (1.4.4)?

WCAG 1.4.4 Resize Text requires that text can be resized up to 200% without loss of content or functionality. Reflow (1.4.10) goes further, requiring that content adapts to very narrow viewports (equivalent to 400% zoom) without horizontal scrolling. Both are Level AA requirements, and both are essential for low-vision users.

Can I use horizontal scrolling for carousels and galleries?

Yes, if the content inherently requires 2D layout—like an image gallery or a timeline—horizontal scrolling is allowed. The key is that the page itself shouldn't require horizontal scrolling to read text or access core functionality.