Responsive Design and Reflow: Meeting WCAG 2.1 Success Criterion 1.4.10

WCAG 2.1web accessibilityaccessibility guidelinesWCAG complianceBrowseCheck
·11 min read

WCAG 2.1's Reflow success criterion (1.4.10) addresses a critical gap in web accessibility: ensuring content works when users zoom or view it on narrow screens. For users with low vision who rely on significant magnification, horizontal scrolling at high zoom levels creates nearly impossible navigation challenges. Understanding and implementing proper content reflow isn't just about compliance—it's about ensuring millions of users can actually access your content.

What is the Reflow Success Criterion?

WCAG 2.1 Success Criterion 1.4.10 (Level AA) 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
  • 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."

In practical terms: users should be able to zoom to 400% (or view on 320px wide screens) and access all content by scrolling in only one direction—vertically for typical pages, horizontally for things like timelines.

Why Reflow Matters

The User Experience Problem

Imagine reading an article while zoomed to 400% to see the text clearly. Without proper reflow:

  1. You read the first few words of a line
  2. You scroll right to read the rest of the line
  3. You scroll back left to start the next line
  4. You repeat this for every single line

This two-dimensional scrolling makes reading exhausting or impossible. Many users simply give up and leave.

Who Benefits from Reflow

People with low vision zoom content to read comfortably. Some users need 200%, 300%, or even 400% zoom to perceive text clearly.

Mobile users on small devices (320px width is common on older or budget smartphones) need content that adapts to narrow viewports.

People with cognitive disabilities benefit from simplified, linear layouts that don't overwhelm with complex multi-column designs at high zoom.

Everyone benefits from flexible, responsive designs that work across device sizes and user preferences.

Understanding the 320 CSS Pixel Requirement

Why 320 Pixels?

320 CSS pixels represents the width of common small smartphone displays and also corresponds to a desktop browser at 1280px wide zoomed to 400%.

The math:

  • Desktop browser at 1280px width
  • Zoomed to 400% (4x magnification)
  • Effective viewport: 1280 ÷ 4 = 320 CSS pixels

Testing Reflow Compliance

Test reflow two ways to catch all issues:

Method 1: Desktop at 400% Zoom

  1. Set browser window to 1280px wide
  2. Zoom to 400% (Ctrl/Cmd + +)
  3. Navigate the entire page vertically only
  4. Verify no horizontal scrolling required
  5. Check that all content and functionality remains accessible

Method 2: Narrow Browser Window

  1. Resize browser to 320px wide (use responsive design mode)
  2. View at 100% zoom
  3. Navigate the entire page vertically only
  4. Verify same accessibility as Method 1

Both methods should yield the same result: content accessible with only vertical scrolling.

Exceptions to Reflow Requirements

Certain content types require two-dimensional layout for meaning or usage. These are exempt from reflow requirements:

Images, maps, and diagrams: Complex visuals that lose meaning when linearized. A map needs two dimensions to be useful.

Video and games: Inherently require specific aspect ratios and dimensions.

Data tables: Complex tables showing relationships between data points. However, consider responsive alternatives where possible.

Toolbars: Interface elements requiring specific spatial layouts for advanced functionality (like photo editing toolbars).

Presentations and slides: Content specifically designed for landscape/wide viewing.

What's NOT Exempt

Text content: Articles, blog posts, product descriptions must reflow.

Simple tables: Tables that can be linearized (like simple pricing tables) should use responsive patterns.

Navigation menus: Must adapt to narrow viewports (hamburger menus are fine).

Forms: Form fields must stack vertically at narrow widths.

Images of text: These shouldn't exist anyway (WCAG 1.4.5), but if present, they must reflow like any other content.

Responsive Design Patterns for Reflow

Pattern 1: Mobile-First Responsive Design

Start with narrow viewport design and progressively enhance for wider screens.

/* Mobile-first: Single column by default */
.container {
  width: 100%;
  padding: 1rem;
}

/* Enhance for wider screens */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Pattern 2: Flexible Grid Layouts

Use CSS Grid or Flexbox with flexible sizing.

/* Flexbox that wraps to single column */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px; /* Wraps when less than 300px */
  min-width: 0; /* Prevents overflow */
}

/* CSS Grid with auto-fit */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Pattern 3: Responsive Navigation

Transform horizontal navigation to vertical at narrow widths.

/* Horizontal nav at wide widths */
.nav {
  display: flex;
  gap: 2rem;
}

/* Vertical nav at narrow widths */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

Pattern 4: Overflow Handling

For content that legitimately needs horizontal space, provide alternatives.

/* Tables with horizontal scroll */
.table-container {
  overflow-x: auto;
  margin-bottom: 1rem;
}

/* But provide mobile-friendly alternative */
@media (max-width: 640px) {
  .table-desktop {
    display: none;
  }
  .table-mobile-cards {
    display: block;
  }
}

Common Reflow Violations and Fixes

Violation 1: Fixed-Width Containers

Problem: Container with fixed pixel width doesn't shrink below that width.

/* ❌ Causes horizontal scrolling */
.container {
  width: 1200px;
}

Fix: Use max-width with percentage width.

/* ✅ Reflows properly */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem; /* Breathing room on small screens */
}

Violation 2: Inflexible Multi-Column Layouts

Problem: Multi-column layout that doesn't stack on narrow screens.

/* ❌ Stays side-by-side even when too narrow */
.sidebar {
  width: 300px;
  float: left;
}

.main-content {
  width: 900px;
  float: left;
}

Fix: Use responsive techniques that stack at narrow widths.

/* ✅ Stacks when narrow */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

Violation 3: Horizontal Navigation Overflow

Problem: Too many navigation items cause horizontal overflow.

/* ❌ Overflows when items don't fit */
.nav {
  display: flex;
  white-space: nowrap;
}

Fix: Allow wrapping or use hamburger menu pattern.

/* ✅ Wraps or hides in menu */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 640px) {
  .nav {
    flex-direction: column;
  }
}

Violation 4: Images Exceeding Container

Problem: Images with fixed widths cause horizontal scrolling.

<!-- ❌ May overflow container -->
<img src="large-image.jpg" width="1000">

Fix: Make images responsive with max-width.

/* ✅ Never exceeds container */
img {
  max-width: 100%;
  height: auto;
}

Violation 5: Content Overflow Due to Absolute Positioning

Problem: Absolutely positioned elements don't respect container boundaries at narrow widths.

/* ❌ May overflow at narrow widths */
.positioned-element {
  position: absolute;
  right: -100px;
  width: 300px;
}

Fix: Use responsive positioning or switch to flow layout at narrow widths.

/* ✅ Adapts to narrow widths */
.positioned-element {
  position: relative; /* Default flow */
}

@media (min-width: 768px) {
  .positioned-element {
    position: absolute;
    right: -100px;
    width: 300px;
  }
}

Text Spacing and Reflow

Related to reflow is WCAG 2.1 Success Criterion 1.4.12 (Text Spacing), which requires no loss of content when users override spacing:

  • Line height (line spacing) to at least 1.5 times the font size
  • Paragraph spacing to at least 2 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size

Why this matters for reflow: Users with dyslexia and other reading disabilities often need modified spacing. Your layout must accommodate these changes without breaking or hiding content.

How to test: Use browser extensions like "Text Spacing Editor" to apply WCAG spacing values and verify no content loss or overlap.

Common issues:

  • Fixed heights that truncate text when spacing increases
  • Overlapping elements when line height increases
  • Hidden content when text wraps differently
  • Broken layouts when word spacing changes

How to fix:

  • Avoid fixed heights; use min-height if needed
  • Provide adequate spacing between elements
  • Test with increased spacing values
  • Use flexible layouts that accommodate text reflow

Responsive Tables: A Special Challenge

Tables pose unique reflow challenges since they're inherently two-dimensional. Strategies for making tables responsive:

Strategy 1: Horizontal Scroll for Complex Tables

For data tables that genuinely need two dimensions, allow horizontal scrolling with clear indication.

<div class="table-wrapper" role="region" aria-label="Employee data table" tabindex="0">
  <table>
    <!-- Complex table content -->
  </table>
</div>

.table-wrapper {
  overflow-x: auto;
  margin-bottom: 1rem;
}

table {
  min-width: 600px; /* Prevents excessive squishing */
}

Strategy 2: Responsive Card Layout

Transform table rows into cards at narrow widths.

/* Desktop: Normal table */
table {
  width: 100%;
}

/* Mobile: Cards */
@media (max-width: 640px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }

  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: bold;
  }
}

Strategy 3: Simplified Mobile View

Show fewer columns on mobile, with option to view full table.

@media (max-width: 640px) {
  .table-column-optional {
    display: none;
  }
}

Provide "View full table" link that opens modal or new page with complete data.

Testing Tools for Reflow Compliance

Browser DevTools

Chrome/Edge DevTools:

  1. Open DevTools (F12)
  2. Click device icon for responsive mode
  3. Set width to 320px
  4. Scroll through page checking for horizontal scroll

Firefox Responsive Design Mode:

  1. Open Responsive Design Mode (Ctrl+Shift+M)
  2. Set viewport to 320x568 (iPhone SE size)
  3. Test vertical-only scrolling

Browser Zoom Testing

  1. Set browser to 1280px width
  2. Zoom to 400% (Ctrl/Cmd and + multiple times)
  3. Verify no horizontal scrolling
  4. Test all interactive elements remain accessible

Automated Tools

axe DevTools: Checks for some reflow issues though manual testing still required.

BrowseCheck: Continuous monitoring can catch reflow issues in production by testing at multiple viewport widths.

Lighthouse: Includes some responsive design checks, though not comprehensive for reflow.

Manual Testing Checklist

  • [ ] Page displays without horizontal scrolling at 320px width
  • [ ] All text content is readable
  • [ ] All images display within viewport
  • [ ] Navigation is accessible
  • [ ] Forms can be completed
  • [ ] Buttons and links are tappable
  • [ ] No content is cut off or hidden
  • [ ] Reading order remains logical
  • [ ] Tables provide accessible alternatives or scroll indication

Best Practices for Reflow-Friendly Development

Use Relative Units

Prefer rem, em, %, and vh/vw over fixed px values for widths and spacing.

Adopt Mobile-First Approach

Start with narrow viewport design, progressively enhance for wider screens.

Test Early and Often

Don't wait until QA. Test reflow during development at multiple viewport widths.

Use CSS Grid and Flexbox

Modern layout methods handle responsiveness better than floats and positioning.

Set Proper Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this, mobile browsers assume desktop width and scale down, preventing proper reflow.

Avoid Horizontal Overflow

Set overflow-x: hidden carefully—it can hide content instead of reflowing it. Better to fix the underlying cause.

Conclusion

WCAG 2.1's Reflow success criterion ensures content works for users who zoom significantly and for small screen users. Meeting this requirement means content must be accessible at 320 CSS pixels wide (equivalent to 1280px at 400% zoom) with only vertical scrolling.

Key strategies for reflow compliance:

  • Use responsive design with flexible layouts
  • Adopt mobile-first development approach
  • Employ CSS Grid and Flexbox for adaptable designs
  • Make images and media responsive with max-width: 100%
  • Transform multi-column layouts to single columns at narrow widths
  • Provide alternatives for complex tables
  • Test at both 320px width and 400% zoom

Reflow isn't just about passing WCAG criteria—it's about building resilient, flexible interfaces that work across the spectrum of devices, screen sizes, and user preferences. Users shouldn't have to hunt for content by scrolling in two directions. Proper reflow ensures everyone can access your content comfortably, regardless of how they need to view it.

Ready to test your site's reflow? Open your browser, resize to 320px width, and verify every page works with only vertical scrolling. Then zoom to 400% and repeat. These simple tests reveal whether your content truly works for all users.

← Back to blog