Reflow Tester – Test 400% Zoom Accessibility

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

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.

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

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: <div class="table-wrapper" role="region" aria-label="Scrollable data table" tabindex="0"> <table>...</table> </div> .table-wrapper { overflow-x: auto; max-width: 100%; } The key is making it clear to users that the table scrolls horizontally.

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

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.