Mobil zoomning och rullning

Silktide kontrollerar att dina sidor fungerar på små skärmar utan att tvinga besökare att zooma in och dra sidan åt två håll för att kunna läsa den. Sidor som misslyckas här har vanligtvis inte utformats för mobila enheter över huvud taget.

Varför detta är viktigt

Att läsa en sida som endast är utformad för datorer på en telefon innebär att zooma med två fingrar till en textkolumn och sedan rulla både åt sidan och nedåt för varje enskild rad – plågsamt för alla och omöjligt för många personer med nedsatt syn eller motoriska funktionsnedsättningar. Mobila enheter står nu för merparten av webbtrafiken, så en sådan sida misslyckas för majoriteten av sina besökare, och sökmotorer rankar den lägre på grund av det. WCAG:s framgångskriterium 1.4.10 (Omflöde, nivå AA i WCAG) kräver att innehåll flödar om så att det fungerar på en skärm som är 320 pixlar bred utan tvådimensionell rullning.

Så åtgärdar du problemet

1. Använd responsiv webbdesign så att sidan flödar om till en enda kolumn på smala skärmar. Modern CSS-layout (mediefrågor, flexbox och grid) gör detta till standardpraxis; de flesta webbplatsteman har stöd för det direkt.
2. Inkludera en korrekt viewport-tagg i sidans mall:

<!-- Talar om för mobila webbläsare att rendera med enhetens bredd -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Testa sidan med en bredd på 320 pixlar (den minsta vanliga telefonbredden) och kontrollera att inget tvingar fram horisontell rullning – breda tabeller, bilder med fast bredd och långa strängar som inte kan brytas är vanliga orsaker.

Om en sida i praktiken inte kan göras responsiv kan du godkänna resultatet.

Så testar Silktide detta

1. Läs in sidan som en mobil enhet.
2. Bedöm om sidan verkar vara utformad för mobiler. En sida misslyckas när något av följande gäller:
   • Den saknar en användbar viewport-tagg eller så anger viewporten en fast bredd på över 480 pixlar.
   • Mer än 35 % av texten renderas för liten för att kunna läsas (under 10 pixlar).
   • Den kan rullas horisontellt mer än 40 % av skärmens bredd.
   • Webbläsaren måste zooma ut till under 60 % för att få plats med sidan på skärmen.
3. Rapportera sidan när den misslyckas, en gång per sida.

Felsökning

Den relaterade kontrollen av horisontell rullning

Horisontell rullning på mobiler rapporterar mindre mängder horisellt överskott på sidor som i övrigt är mobilvänliga. Den här kontrollen fångar det extrema fallet där sidan inte alls försöker stödja mobiler, så lösningen är en responsiv omdesign i stället för att justera ett enskilt element som överskrider bredden.

Delar av min sida behöver faktiskt en tvådimensionell layout

WCAG tillåter undantag för innehåll som behöver en tvådimensionell layout för att vara användbart, till exempel kartor, datatabeller och diagram. Sidan runt omkring ska fortfarande flöda om; om en flaggad sida är ett sådant undantag ska du godkänna resultatet.

Läs mer

• Förstå framgångskriterium 1.4.10: Omflöde (WCAG 2.1)
• Varför testar Silktide med en iPhone 5?
• Horisontell rullning på mobiler
• Utformad för mobiler