This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

Accessibility

How does a website stay readable on a phone without horizontal scrolling?

A website stays readable without horizontal scrolling if its content automatically wraps into a single column at a narrow display width — the standard sets this at 320 pixels. This width corresponds to a narrow phone or a heavily zoomed-in view on a computer. Anyone who then has to scroll back and forth for every line loses their train of thought while reading.

Reflow: content adapts to the width

Reflow means: as the viewport narrows, the content rearranges itself — columns sitting side by side stack on top of each other, images shrink, lines wrap sooner. This affects two groups at once. First, phone users — for many websites, the majority of visitors. Second, visually impaired people on a computer who zoom pages in heavily: at high zoom, the visible area looks exactly like a narrow display. If the page then doesn't reflow, they have to scroll right and back again for every single line — reading becomes a test of patience. Typical causes are fixed-width tables, embedded maps that are too large, and images with fixed pixel dimensions.

How our measurement engine measures horizontal scrolling

Our measurement engine renders your page in a real browser at several screen widths — including the narrow 320-pixel view — and measures whether a horizontal scrollbar appears and by how many pixels the content overflows. Only genuine, re-measured scrollability counts as a finding; to rule out random hits caused by loading delays, the check measures twice when in doubt and honestly marks inconsistent results as "verify on a real device". Every finding names the affected screen width and is backed up with a screenshot. The results flow into both the Accessibility check area and the Responsive check area — it's the same measurement.

Examples

Fixed width on mobile

Not met

.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }

Passes

.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }

With a width of 320 pixels (400 percent zoom), the content flows around; only tables and cards may have their own scroll area.

Shrink your browser window on a computer step by step down to a narrow column — if a horizontal scrollbar appears, there's a problem.
Check tables first: large data tables need their own solution on a phone, such as scrollable containers with a visible hint.
Ask your agency to replace fixed pixel widths on images and containers with flexible values.
Test embedded content such as maps and videos in the narrow view — third-party components overflow most often.
Check the mobile view after every major content update, before the page goes live.

Deutsche Fassung dieser Seite

FAQ

Why is 320 pixels the exact benchmark width?

The WCAG standard sets 320 CSS pixels as the check width. That corresponds to a narrow smartphone — and at the same time to the view that results when a visually impaired person zooms a normal computer view in fourfold. Passing at this width without horizontal scrolling covers both cases.

Is horizontal scrolling always forbidden on websites?

For normal text and control elements, it should be avoided at narrow display widths. Exempt is content that's inherently two-dimensional — large data tables, maps, charts. There, targeted scrolling within the element is permitted, ideally with a visible hint that there's more to see.

How does the audit service test the mobile display?

The measurement engine renders the page in a real browser at several screen widths and measures, pixel-accurately, whether horizontal overflow occurs. Only re-measured scrollability counts; with inconsistent results, the check measures twice and recommends verification on a real device. Findings are backed up with screenshots.