Zijwaarts scrollen op een telefoon: wat WCAG 1.4.10 van je vraagt
Twee richtingen tegelijk scrollen is vermoeiend voor iedereen en onwerkbaar voor wie ver inzoomt. De regel heet reflow, en hij is meetbaar.
Wat de regel zegt
Bij een schermbreedte van 320 pixels moet je inhoud verticaal scrollen, niet horizontaal. 320 pixels is niet willekeurig: dat is wat overblijft als iemand op een gewone telefoon tot 400 procent inzoomt. Uitzonderingen zijn er voor dingen die die breedte echt nodig hebben, zoals een landkaart of een grote tabel.
Wat we vinden
Bij 37 van de 70 gemeten webshops liep de inhoud op 320 pixels breder dan het scherm. Onze scanner meet dat niet door naar de stylesheet te kijken, maar door de pagina echt op die breedte te openen en te proberen of er iets te schuiven valt. Daarna zoeken we het element op dat het breedst is, want dát is wat je bouwer nodig heeft.
De vier oorzaken die we tegenkomen
- Een vaste breedte in pixels. Een blok van
width:1200pxkrimpt niet mee. Gebruikmax-widthin plaats vanwidth. - Een tabel met veel kolommen. Zet er een omhulsel omheen dat zelf mag scrollen, in plaats van de hele pagina breed te maken.
- Een lang woord of een lange url. Een productcode van veertig tekens duwt
de pagina open.
overflow-wrap:anywhereop links en codes lost het op. - Een afbeelding zonder maximum. Eén regel css:
img{max-width:100%;height:auto}.
Zo controleer je het
Maak je browservenster op de computer zo smal als hij gaat, of zet de ontwikkelaarsmodus op een schermbreedte van 320 pixels. Verschijnt er onderin een horizontale schuifbalk? Dan zit het fout, en het element dat eruit steekt vind je door in de inspecteur van boven naar beneden te zoeken naar het blok dat breder is dan het scherm.
Nog een controle die twee seconden kost: zoom in je browser naar 400 procent. Wat dan overblijft, is wat een deel van je klanten dagelijks ziet.
Bronnen
- Eigen meting bij 70 Nederlandse webshops, 14 september 2026: 37 shops met zijwaarts scrollen op 320 pixels
- WCAG 2.1, succescriterium 1.4.10 Reflow (niveau AA)