This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Responsive
Why must a website not scroll sideways on mobile?
A website must not scroll sideways on mobile, since otherwise visitors can only reach content by shifting the page back and forth with a finger. Many give up beforehand and leave the page. That's why the WCAG accessibility guideline requires, in rule 1.4.10, that content adapt to the screen width. The audit service measures the overhang in pixels across four device sizes, and names, where clearly identifiable, the element causing it.
How horizontal scrolling happens on mobile
The cause is almost always an element with a fixed width: a table with many columns, an image at its original size, or a building block from a template made for large screens. On a desktop monitor, this is barely noticeable, since there's enough room there. On a smartphone at 390 pixels wide, the same element overhangs the edge, and the browser shows a horizontal scrollbar. Visitors then see only a portion of the content, and constantly have to shift the page while reading. A single element that's too wide is enough to make the whole page scroll sideways — which is why it's worth finding and fixing exactly that one element.
How the audit service measures the overhang
The check loads your page in a real browser at four device sizes: 390, 768, 1440, and 1920 pixels wide. It then compares the content's width against the screen's width, and actually tries to shift the page sideways. Only once that succeeds does the finding count — an overhang the browser clips itself produces no scrollbar and therefore isn't reported as one. Every measurement runs twice; only what both runs agree on gets reported. The report states the overhang in pixels and, where clearly identifiable, the element causing it, along with a screenshot. That way, your agency knows immediately where to start.
What accessibility rule WCAG 1.4.10 requires
Rule 1.4.10 ("Reflow") of the WCAG guideline requires content to adapt to the available width, without visitors having to scroll in two directions. The idea behind it: people with visual impairments zoom pages in heavily; whatever then overhangs sideways is lost to them. The same adaptability helps every visitor with a small screen — the majority, in other words, since many websites are read mainly on mobile today. A passed check is therefore a step toward both accessibility and a more usable website at once. The check is a technical examination; whether legal obligations apply to your business is for legal counsel to clarify.
- Open your homepage on your own phone and swipe left and right. If the page moves sideways, there's an overhang.
- Check pages with tables, large images, or embedded videos especially — that's where overhangs happen most often.
- Pass on the element and pixel count named in the audit report to your agency, instead of having them search for it themselves.
- Repeat the check on mobile after every major change to the website.
