Horizontaal scrollen op mobiel

Silktide controleert of je pagina's op mobiele telefoons zijwaarts scrollen. Content moet binnen de breedte van een klein scherm passen, zodat bezoekers alleen naar beneden hoeven te scrollen.

Waarom dit belangrijk is

Wanneer een pagina breder is dan het scherm, valt een deel van elke tekstregel buiten beeld en moet de lezer heen en weer slepen om de content te volgen. Dat is vermoeiend voor iedereen en vormt een echte belemmering voor mensen met een beperkt gezichtsvermogen (die de pagina vaak ook vergroten) en mensen met motorische beperkingen. WCAG-succescriterium 1.4.10 (Herschikken, van ) vereist dat content op een scherm van 320 pixels breed past zonder in twee dimensies te scrollen.

Meestal is de pagina als geheel in orde en veroorzaakt één element de overloop - een brede tabel, een afbeelding met een vaste breedte, een ingesloten video of een lange tekenreeks die niet kan worden afgebroken, zoals een URL.

Zo los je dit op

Open de pagina op een telefoon (of maak je browservenster smaller tot 320 pixels) en zoek wat voorbij de rechterrand uitsteekt.
Los het probleem met het betreffende element op met responsieve :

/* Element met vaste breedte maakt de pagina breder dan het scherm */
img.hero { width: 600px; }

/* Opgelost: schaalt naar beneden om op smalle schermen te passen */
img.hero { max-width: 100%; height: auto; }

Laat brede datatabellen in hun eigen container scrollen (overflow-x: auto), zodat de rest van de pagina nog steeds op het scherm past.
Content die echt een tweedimensionale indeling nodig heeft, zoals kaarten en diagrammen, mag scrollen - als dat het enige is wat de controle laat zien, kun je deze .

Hoe Silktide test

Laad de pagina alsof je een mobiel apparaat gebruikt.
Meet hoever de pagina voorbij de rechterrand van het scherm komt. Overloop van minder dan 10 pixels wordt genegeerd als afrondingsfout.
Classificeer de overloop op basis van het aantal apparaten waarop deze voorkomt, van een lichte overloop die alleen kleine telefoons treft (320 pixels breed, zoals een iPhone 5) tot een overloop die groot genoeg is om grote telefoons te treffen (414 pixels breed, zoals een iPhone 7 Plus).

Problemen oplossen

De gerelateerde controle voor mobiel ontwerp

Deze controle meldt horizontale overloop op pagina's die verder mobielvriendelijk zijn. Pagina's die helemaal geen ondersteuning voor mobiel proberen te bieden - geen , kleine tekst, extreme overloop - worden in plaats daarvan gemeld door Mobiel zoomen en scrollen, waarbij de oplossing een responsief herontwerp is.

Ik zie geen scrollen

Kleine overlopen zijn mogelijk niet zichtbaar op grotere telefoons. Test met een breedte van 320 pixels - met de ontwikkelaarstools van je browser kun je de exacte breedte instellen - en kijk of iets de rechterrand overschrijdt.