Horisontell rullning på mobiler

Silktide kontrollerar om dina sidor rullar i sidled på mobiltelefoner. Innehållet bör rymmas inom bredden på en liten skärm, så att besökare bara behöver rulla nedåt.

Varför detta är viktigt

När en sida är bredare än skärmen hamnar en del av varje textrad utanför synfältet, och läsaren måste dra fram och tillbaka för att följa innehållet. Det är tröttande för alla och ett verkligt hinder för personer med nedsatt syn (som ofta också förstorar sidan) och personer med motoriska funktionsnedsättningar. WCAG:s framgångskriterium 1.4.10 (Omflöde, i ) kräver att innehållet ska rymmas på en 320 pixlar bred skärm utan rullning i två dimensioner.

Vanligtvis är sidan som helhet problemfri och det är ett element som orsakar överskridningen – en bred tabell, en bild med fast bredd, en inbäddad video eller en lång sträng utan brytpunkter, till exempel en URL.

Så åtgärdar du problemet

Öppna sidan på en telefon (eller gör webbläsarfönstret 320 pixlar brett) och hitta det som sticker ut över högerkanten.
Åtgärda det problematiska elementet med responsiv :


/* Element med fast bredd gör sidan bredare än skärmen */
img.hero { width: 600px; }

/* Åtgärdat: skalas ned för att passa smala skärmar */
img.hero { max-width: 100%; height: auto; }

För breda datatabeller kan du låta tabellen rulla i sin egen behållare (overflow-x: auto), så att resten av sidan fortfarande ryms på skärmen.
Innehåll som verkligen behöver en tvådimensionell layout, till exempel kartor och diagram, får rulla – om detta är allt som rapporten visar kan du den.

Så testar Silktide detta

Läs in sidan som en mobil enhet.
Mät hur långt sidan sträcker sig utanför skärmens högra kant. Överskridning på mindre än 10 pixlar ignoreras som ett avrundningsfel.
Klassificera överskridningen efter hur många enheter den påverkar, från en liten överskridning som bara påverkar små telefoner (320 pixlar breda, som en iPhone 5) till en överskridning som är tillräckligt stor för att påverka stora telefoner (414 pixlar breda, som en iPhone 7 Plus).

Felsökning

Den relaterade kontrollen av mobilanpassning

Den här kontrollen rapporterar horisontell överskridning på sidor som i övrigt är mobilvänliga. Sidor som inte försöker stödja mobiler alls – ingen , liten text, extrem överskridning – rapporteras i stället av Zoom och rullning på mobiler, där åtgärden är en responsiv omdesign.

Jag kan inte se någon rullning

Små överskridningar kan vara osynliga på större telefoner. Testa med 320 pixlar bredd – webbläsarens utvecklarverktyg låter dig ställa in den exakta bredden – och leta efter något som går över högerkanten.