Zooming og rulling på mobil

Silktide kontrollerer at sidene dine fungerer på små skjermer uten å tvinge besøkende til å zoome inn og dra siden rundt i to retninger for å lese den. Sider som ikke består denne kontrollen, er vanligvis ikke utformet for mobile enheter i det hele tatt.

Hvorfor dette er viktig

Å lese en side som bare er laget for datamaskiner, på en telefon betyr at man må zoome inn på en tekstkolonne og deretter rulle både sidelengs og nedover for hver eneste linje – smertefullt for alle, og umulig for mange personer med nedsatt syn eller motoriske funksjonsnedsettelser. Mobile enheter står nå for mesteparten av nettrafikken, så en side som denne svikter for flertallet av besøkende, og søkemotorer rangerer den lavere på grunn av det. WCAG-suksesskriterium 1.4.10 (Omflytting, i ) krever at innholdet omflyttes slik at det får plass på en skjerm som er 320 piksler bred, uten todimensjonal rulling.

Slik løser du det

Bruk responsiv webdesign, slik at siden omflyttes til én kolonne på smale skjermer. Moderne -layout (mediespørringer, flexbox, grid) gjør dette til standard praksis; de fleste sidetemaer støtter dette direkte.
Inkluder en korrekt -tagg i sidemalen:

<!-- Forteller mobile nettlesere at siden skal vises med enhetens bredde -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Test siden med en bredde på 320 piksler (den minste vanlige telefonbredden), og kontroller at ingenting tvinger frem vannrett rulling – brede tabeller, bilder med fast bredde og lange strenger som ikke kan brytes, er vanlige årsaker.

Hvis en side i praksis ikke kan gjøres responsiv, kan du funnet.

Slik tester Silktide dette

Last inn siden som en mobil enhet.
Vurder om siden ser ut til å være utformet for mobil. En side består ikke når noe av følgende gjelder:
- Den har ingen brukbar viewport-tagg, eller viewporten angir en fast bredde på over 480 piksler.
- Mer enn 35 % av teksten vises så liten at den er vanskelig å lese (under 10 piksler).
- Den ruller vannrett mer enn 40 % av skjermbredden.
- Nettleseren må zoome ut til under 60 % for å få plass til siden på skjermen.
Rapporter siden når den ikke består, én gang per side.

Feilsøking

Den relaterte kontrollen for vannrett rulling

Mobile horizontal scrolling rapporterer mindre mengder vannrett overflyt på sider som ellers er mobilvennlige. Denne kontrollen fanger opp det ekstreme tilfellet der siden ikke forsøker å støtte mobil i det hele tatt, så løsningen er en responsiv redesign i stedet for å justere ett enkelt element som går utenfor siden.

Deler av siden min trenger faktisk en todimensjonal layout

WCAG tillater unntak for innhold som krever todimensjonal layout for å være brukbart, for eksempel kart, datatabeller og diagrammer. Siden rundt dem bør fortsatt omflyttes; hvis en rapportert side er et slikt unntak, kan du godkjenne funnet.