What does WCAG 1.4.10 (Reflow) actually require?

Content must reflow to a single column at 320 CSS pixels wide (equivalent to 400% zoom at 1280px) without loss of information or functionality, and without needing two-dimensional scrolling. Horizontal scrolling is only permitted for content that genuinely needs it, like data tables or maps.

Why 320 pixels specifically?

320 CSS px is the width a 1280px desktop viewport collapses to when zoomed 400%, and it also matches the narrowest common mobile width. Meeting 320px ensures both zoomed-in low-vision users and small-screen users can read content in one column.

Does a green result guarantee full compliance?

No. This tool catches the most common failure — horizontal overflow — but reflow also covers content that gets clipped or hidden. Always confirm with real keyboard and screen-reader testing at 400% zoom in a live browser.

Is my HTML uploaded anywhere?

No. The markup is rendered into a sandboxed iframe inside your own browser tab using a blob URL. Nothing is transmitted to any server, so you can safely test internal or unreleased markup.

Why is a table or pre block flagged?

Wide tables, code blocks, and preformatted text legitimately need horizontal scrolling and are an allowed exception under 1.4.10. The tool flags them so you can confirm they are intentional, not styling bugs that should reflow.

Reflow Viewport Width Checker

The Reflow Viewport Width Checker renders your HTML inside a 320 CSS-pixel-wide frame and reports any element that spills past the edge. WCAG 2.1 Success Criterion 1.4.10 (Reflow) requires that content reflow into a single column at 320px without two-dimensional scrolling — the layout a 1280px desktop collapses to at 400% browser zoom. This tool simulates that condition so you can catch overflow bugs without manually zooming a real browser.

How it works

The checker writes your pasted markup into a sandboxed iframe sized to exactly 320 CSS pixels wide. Once rendered, it walks the document and measures each element:

It compares scrollWidth of the document root against the 320px viewport — if the document scrolls horizontally, reflow has failed somewhere.
It then inspects every element and flags any whose getBoundingClientRect().right extends past the 320px edge, or whose scrollWidth exceeds its clientWidth.
Each offender is reported with its tag name, a short class hint, and its measured width so you can locate the rule causing the overflow (usually a fixed width, a min-width, a wide image, or white-space: nowrap).

Tables, pre, and code blocks are listed separately because they are the explicitly allowed exception in 1.4.10 — they may scroll horizontally when their content genuinely requires it.

Tips and notes

The most common real-world failures are fixed pixel widths (width: 600px), large unscaled images, and display: flex rows that never wrap. Replace fixed widths with max-width: 100% and add flex-wrap: wrap.
Long unbroken strings (URLs, tokens) overflow at 320px; add overflow-wrap: anywhere to the container.
A clean result here means no horizontal overflow, but you should still verify at 400% zoom in a real browser that nothing is clipped or overlapped, since reflow also covers hidden content.