Mobiel zoomen en scrollen
Silktide controleert of je pagina's werken op kleine schermen zonder bezoekers te dwingen in te zoomen en de pagina in twee richtingen te verslepen om de tekst te lezen. Pagina's die hier niet aan voldoen, zijn meestal helemaal niet ontworpen voor mobiele apparaten.
Waarom dit belangrijk is
Een pagina die alleen voor desktop is gemaakt op een telefoon lezen, betekent inzoomen op een tekstkolom en vervolgens voor elke afzonderlijke regel zowel horizontaal als verticaal scrollen — pijnlijk voor iedereen en onmogelijk voor veel mensen met een verminderd gezichtsvermogen of motorische beperkingen. Mobiele apparaten zijn inmiddels goed voor het grootste deel van het webverkeer, dus een pagina als deze stelt de meerderheid van de bezoekers teleur en wordt erdoor lager gerangschikt door zoekmachines. WCAG-succescriterium 1.4.10 (Herschikken, van ) vereist dat inhoud opnieuw wordt gerangschikt voor een scherm van 320 pixels breed, zonder tweedimensionaal scrollen.
Zo los je het op
- Gebruik responsive webdesign, zodat de pagina op smalle schermen opnieuw wordt gerangschikt naar één kolom. Moderne -lay-out (media queries, flexbox, grid) maakt dit standaardpraktijk; de meeste sitethema's ondersteunen dit direct.
- Neem een correcte -tag op in je paginatemplate:
<!-- Hiermee renderen mobiele browsers de pagina op de breedte van het apparaat -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Test de pagina op een breedte van 320 pixels (de kleinste gangbare telefoonbreedte) en controleer of niets horizontaal scrollen afdwingt — brede tabellen, afbeeldingen met een vaste breedte en lange reeksen tekens zonder afbreekpunten zijn veelvoorkomende boosdoeners.
Als een pagina praktisch niet responsive kan worden gemaakt, kun je de bevinding .
Zo test Silktide dit
- Laad de pagina als een mobiel apparaat.
- Beoordeel of de pagina ontworpen lijkt voor mobiel gebruik. Een pagina voldoet niet wanneer een
van deze situaties zich voordoet:
- De pagina heeft geen bruikbare viewport-tag, of de viewport geeft een vaste breedte aan van meer dan 480 pixels.
- Meer dan 35% van de tekst wordt te klein weergegeven om te lezen (minder dan 10 pixels).
- De pagina scrollt horizontaal over meer dan 40% van de schermbreedte.
- De browser moet uitzoomen tot onder 60% om de pagina op het scherm te laten passen.
- Rapporteer de pagina wanneer deze niet voldoet, één keer per pagina.
Problemen oplossen
De gerelateerde controle voor horizontaal scrollen
Mobiel horizontaal scrollen rapporteert kleinere hoeveelheden horizontale overloop op pagina's die verder mobielvriendelijk zijn. Deze controle detecteert het extreme geval waarin de pagina helemaal geen mobiele ondersteuning probeert te bieden. De oplossing is daarom het ontwerp responsive maken in plaats van één overlopend element aan te passen.
Delen van mijn pagina hebben echt een tweedimensionale lay-out nodig
WCAG staat uitzonderingen toe voor inhoud die een tweedimensionale lay-out nodig heeft om bruikbaar te zijn, zoals kaarten, gegevenstabellen en diagrammen. De pagina eromheen moet nog steeds opnieuw worden gerangschikt; als een gemarkeerde pagina zo'n uitzondering is, keur je de bevinding goed.