Question 1

What is WCAG 1.4.10 Reflow?

Accepted Answer

WCAG 1.4.10 (Reflow) is a Level AA success criterion that requires content to be presentable without loss of information or functionality, and without requiring scrolling in two dimensions at:
      
        Vertical scrolling content: Width of 320 CSS pixels
        Horizontal scrolling content: Height of 256 CSS pixels
      
      In practical terms: At 400% zoom on a 1280px wide screen, the effective width is 320px. Content must reflow to fit without horizontal scrolling.
      Exceptions: Some content types are exempt from this requirement:
      
        Images (photos, screenshots, diagrams)
        Video
        Games
        Data tables (but should provide alternative view)
        Toolbars where functionality requires specific layout

Question 2

Why do users need to zoom to 400%?

Accepted Answer

Many users need high zoom levels to read content:
      
        Low vision: Need larger text to read comfortably
        Age-related vision decline: Common as people age
        Reading disabilities: Larger text improves comprehension
        Situational: Viewing on different devices or in bright sunlight
      
      Why 400%? WCAG chose this level because:
      
        Provides enough magnification for most low vision users
        Equivalent to 320px viewport (common mobile width)
        Balances accessibility with technical feasibility
        Maps to standard browser zoom capabilities
      
      If content doesn't reflow at 400%, users are forced to scroll horizontally to read each line - extremely difficult and frustrating.

Question 3

How do I test reflow on my website?

Accepted Answer

Testing strategies for WCAG 1.4.10 compliance:
      Browser zoom:
      
        Open your website in a browser
        Zoom to 400% (Ctrl/Cmd + or zoom to 400% in settings)
        Check if you can read all content without horizontal scrolling
        Verify no content is cut off or hidden
      
      Viewport resize:
      
        Open browser DevTools
        Enable device toolbar / responsive design mode
        Set viewport to 320px wide
        Check that all content is visible without horizontal scroll
      
      What to check:
      
        Text wraps properly (no cut-off words)
        Images scale down appropriately
        Navigation menus work or stack vertically
        Multi-column layouts collapse to single column
        No horizontal scrollbar appears
        All functionality remains accessible

Question 4

What about data tables?

Accepted Answer

Data tables are exempt from the reflow requirement, but you should still provide alternatives: Options for accessible tables: Responsive tables: Stack cells vertically on mobile Scrollable container: Wrap table in horizontally scrollable div with clear indicators Alternative views: Provide list view or cards as alternative Progressive disclosure: Show summary, expand for details Download option: Offer CSV/Excel download for complex data Example of scrollable table:

...

.table-wrapper { overflow-x: auto; max-width: 100%; } The key is making it clear to users that the table scrolls horizontally.

Question 5

Does responsive design automatically mean reflow compliance?

Accepted Answer

Not necessarily! Responsive design helps but doesn't guarantee compliance:
      Responsive design typically:
      
        Uses media queries for different screen sizes
        Adapts layout for mobile, tablet, desktop
        Changes at specific breakpoints (768px, 1024px, etc.)
      
      Reflow requirement needs:
      
        Content works at ANY width down to 320px
        No horizontal scrolling at 400% zoom
        Continuous adaptation, not just breakpoints
        Must work between breakpoints too
      
      Additional steps needed:
      
        Test at 320px width specifically
        Use flexible layouts (flexbox, grid with auto)
        Avoid absolute positioning with fixed widths
        Ensure all functionality works at high zoom
        Test with browser zoom, not just window resize

Question 6

How do I handle fixed-width elements like logos?

Accepted Answer

For elements that need specific dimensions:
      Logos and branding:
      .logo {
  width: 100%;
  max-width: 200px; /* Limit on large screens */
  height: auto;
}

@media (max-width: 320px) {
  .logo {
    max-width: 150px; /* Smaller on mobile */
  }
}
      Icons and UI elements:
      
        Use SVG for scalability
        Set max-width instead of fixed width
        Allow elements to scale with em/rem units
        Provide text alternatives for icon-only buttons
      
      Buttons and controls:
      .button {
  padding: 0.5em 1em;
  font-size: 1rem;
  /* Size scales with text */
}

/* Avoid this: */
.button {
  width: 200px;
  height: 40px;
}
      Use padding and relative units so elements scale with zoom.

Reflow Tester – Test 400% Zoom Accessibility

Reflow Tester

WCAG 1.4.10

This means:

Who Benefits

How to Fix

Common Issues

Examples of Real-World Usage

Web Developers & Designers

Accessibility Specialists

QA & Testing Teams

Mobile Developers

Product Managers

UX Researchers

Complete Reflow Testing Features

Zoom Level Testing

Viewport Width Simulator

Effective Width Calculator

WCAG Compliance Indicator

Live Preview

CSS Code Examples

Best Practice Guidance

Low Vision Support

How to Use the Reflow Tester

Frequently Asked Questions

Still have questions?