Mobile zoom and scrolling

Silktide checks that your pages work on small screens without forcing visitors to zoom in and drag the page around in two directions to read it. Pages that fail here usually haven't been designed for mobile devices at all.

Why this matters

Reading a desktop-only page on a mobile phone means pinch-zooming into a column of text and then scrolling both across and down for every single line - painful for everyone, and impossible for many people with low vision or motor impairments. Mobile devices now account for most web traffic, so a page like this fails the majority of its visitors; search engines penalise it. WCAG success criterion 1.4.10 (Reflow, of ) requires content to reflow to a 320-pixel-wide screen without two-dimensional scrolling.

How to fix it

Use responsive web design, so the page reflows into a single column on narrow screens. Modern layout (media queries, flexbox, grid) makes this standard practice; most site themes support it out of the box.
Include a correct tag in your page template:

<!-- Tells mobile browsers to render at the device's width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Test the page at 320 pixels wide (the smallest common mobile phone width) and check nothing forces horizontal scrolling - wide tables, fixed-width images, and long unbreakable strings are frequent culprits.

If a page cannot practically be made responsive, you can the finding.

How Silktide tests this

Load the page as a mobile device.
Judge whether the page appears designed for mobile. A page fails when any of these hold:
- It has no usable viewport tag, or the viewport declares a fixed width over 480 pixels.
- More than 35% of its text renders too small to read (under 10 pixels).
- It scrolls horizontally by more than 40% of the screen width.
- The browser has to zoom out below 60% to fit the page on screen.
Report the page when it fails, once per page.

Troubleshooting

Mobile horizontal scrolling reports smaller amounts of horizontal overflow on pages that are otherwise mobile-friendly. This check catches the extreme case where the page is not attempting to support mobile at all, so the fix is a responsive redesign rather than adjusting one overflowing element.

Parts of my page genuinely need two-dimensional layout

WCAG allows exceptions for content that requires two-dimensional layout to be usable, such as maps, data tables, and diagrams. The page around them should still reflow; if a flagged page is such an exception, approve the finding.