WCAG 1.4.10 Reflow: How to Make Websites Work Without Horizontal Scrolling

What WCAG 1.4.10 Reflow requires

WCAG 1.4.10 Reflow (WCAG 2.2, Level AA) asks that content can be presented without loss of information or function when the page is reflowed. Practically, that means users should not need to scroll horizontally to read or use content when they enlarge text up to 400% or view the page in a narrow viewport (320 CSS pixels wide). Exceptions apply for content that genuinely requires two dimensions, such as complex charts or maps.

Why Reflow matters for users

Many people rely on text magnification or narrow screens. If a site forces horizontal scrolling it breaks reading flow and interaction. Reflow improves readability, keyboard focus order, and the experience for people using screen magnifiers or small devices.

Common ways pages fail Reflow

• Fixed-width containers set in pixels that do not shrink.
• Two-column layouts that do not stack at narrow widths.
• Large unbreakable strings such as long URLs, code, or single-word headings.
• Wide images, videos or iframes that overflow their containers.
• Tables with many columns that require horizontal scrolling to view all cells.
• Absolute positioning or transforms that place elements outside the viewport.
• Third-party widgets that inject fixed-size frames or styles.

How to make pages reflow: practical fixes

The following checklist covers layout, typography, media, forms and components. Apply each fix and retest at 400% and 320px.

1. Use flexible layout patterns

• Prefer CSS flexbox or grid with fluid sizing over fixed pixel columns.
• Switch multi-column layouts to a single column under 320px. Example approach: for a two-column container use flex-direction: column in a max-width: 320px media query so items stack vertically.
• Use box-sizing: border-box so padding does not add unexpected width.

2. Size with relative units

• Use em, rem, % or vw for widths and spacing. Avoid fixed px widths for main containers.
• Set form controls and buttons to width: 100% where appropriate so they fill the available column.

3. Let text wrap

• Allow long words and URLs to break by using CSS like overflow-wrap: anywhere or word-break: break-word.
• Avoid inserting long unbroken strings. If you must show long data, provide a wrapped visual and an accessible copy if needed.

4. Make images and media fluid

• Use max-width: 100% and height: auto so media scales down in the column.
• For embedded iframes use a fluid wrapper that maintains aspect ratio and shrinks to the container width.

5. Rework tables and data

• Consider transforming wide tables into stacked blocks on small viewports. Each row becomes a vertical group with labels and values.
• If the table is inherently two-dimensional and cannot be converted, ensure a clear accessible alternative is provided and document the exception.

6. Avoid positioning that forces overflow

• Do not rely on absolute positioning to place content that must remain readable. Use flow layout so content moves naturally when the container narrows.

7. Tame third-party content

• Sandbox embeds and override iframe CSS where possible so they adopt the container width.
• If a vendor widget cannot reflow, isolate it and provide an accessible fallback or link to the content.

Step-by-step workflow to fix a reflow failure (information gain)

This is a practical sequence you can follow on any page that breaks at 400% or 320px.

1. Reproduce the failure. Open dev tools, set viewport to 320px and zoom to 400% in a desktop browser. Note which elements cause horizontal scroll or clipped controls.
2. Find the offender. Inspect computed widths and look for elements wider than the viewport, fixed pixel widths, or transforms. Check images, tables and iframes first.
3. Apply the simplest fix. Change width: 600px to max-width: 100% or switch a two-column wrapper to flex-direction: column at max-width: 320px.
4. Address wrapping. Add overflow-wrap: anywhere to text containers for long words and data fields.
5. Retest at 400% and in the 320px viewport. Confirm no horizontal scrolling and that all interactive elements remain operable and visible.
6. Repeat for other breakpoints and components. Test with keyboard only and with screen magnifier if possible.

Testing checklist and tools

• Manually zoom the page to 400% in Chrome, Firefox or Safari and check for horizontal scroll.
• Set the browser width to 320 CSS pixels using dev tools and test for single-column layout and operable controls.
• Use a screen magnifier (Windows Magnifier, macOS Zoom) to confirm focus order and visible controls when magnified.
• Check with keyboard only to ensure interactive elements are reachable without hidden overflow.
• Record failures and add regression tests for responsive breakpoints in your CI process.

Allowed exceptions and edge cases

WCAG allows exceptions where two-dimensional layout is essential to the content. Examples include detailed maps, spreadsheets shown in full, and complex diagrams. When you rely on such an exception, provide an accessible alternative or a concise explanation so users understand why the content cannot reflow.

Common developer mistakes to avoid (information gain)

• Treating browser zoom by transform: scale as a substitute for real reflow. That may keep content visible but breaks layout and focus order.
• Only testing on mobile device sizes while ignoring desktop zoom magnification behavior.
• Relying on overflow: auto with horizontal scroll instead of letting the layout stack vertically.

Quick developer checklist

• No fixed-width main containers in px
• Multi-column blocks stack to a single column at 320px
• Images and iframes use max-width: 100%
• Long words can break: overflow-wrap: anywhere
• No essential controls require horizontal scrolling when zoomed

Further notes

Reflow works best when accessibility is part of design from the start. Small changes to layout and sizing prevent large accessibility debts later. Treat reflow tests as part of your acceptance criteria for responsive components.