Zoom og responsivitet

For mange brukere med nedsatt syn er zoom en livsnødvendighet. De forstørrer teksten eller hele siden for å kunne lese innholdet. Hvis nettsiden din ikke tåler forstørring – enten fordi zoom er deaktivert, teksten kuttes av, eller innholdet krever horisontal scrolling – stenger du disse brukerne ute. WCAG har to sentrale kriterier som handler om dette: 1.4.4 «Endring av tekststørrelse» og 1.4.10 «Dynamisk tilpasning (reflow)».

Hva sier WCAG 1.4.4 – Endring av tekststørrelse?

Suksesskriteriet 1.4.4 er et nivå AA-krav og sier at tekst skal kunne forstørres opp til 200 prosent uten bruk av hjelpeteknologi, og uten at innhold eller funksjonalitet går tapt. Det betyr at brukeren skal kunne bruke nettleserens innebygde zoom-funksjon (vanligvis Ctrl/Cmd + pluss) og fortsatt kunne bruke nettsiden fullt ut.

Kravet gjelder for all tekst, inkludert tekst i menyer, knapper, skjemaer og feilmeldinger. Bilder av tekst er unntatt dersom de kan tilpasses visuelt, men generelt bør du unngå bilder av tekst.

Hva sier WCAG 1.4.10 – Dynamisk tilpasning (reflow)?

Suksesskriteriet 1.4.10, også et nivå AA-krav, går enda lenger. Det krever at innholdet skal kunne vises ved en bredde tilsvarende 320 CSS-piksler (som tilsvarer 400 prosent zoom ved 1280 pikslers bredde) uten at brukeren trenger å scrolle i to retninger. For vertikalt scrollende innhold betyr det ingen horisontal scrolling. For horisontalt scrollende innhold (som enkelte tabeller eller kart) betyr det ingen vertikal scrolling.

I praksis betyr dette at nettsiden din må være responsiv. Innholdet må flyte og tilpasse seg smale skjermer eller sterkt forstørrede visninger.

Hvorfor er dette viktig?

• Svaksynte brukere trenger ofte 200–400 prosent forstørring for å lese tekst. Hvis siden bryter sammen ved zoom, kan de ikke bruke den.
• Eldre brukere forstørrer ofte teksten fordi standardstørrelsen er for liten.
• Mobilbrukere har i praksis en smal viewport som ligner på et forstørret skrivebordsbilde. God reflow betyr god mobilopplevelse.
• Kvalitetskrav: Både 1.4.4 og 1.4.10 er nivå AA-krav og svært sentrale i både tilsyn og praktisk tilgjengelighetsarbeid.

Vanlige feil

Zoom er deaktivert i viewport-meta

En av de vanligste og mest alvorlige feilene er å hindre brukeren i å zoome:

<!-- FEIL: Hindrer zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- RIKTIG: Tillater zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Fjern maximum-scale=1.0 og user-scalable=no fra viewport-taggen din. Disse parameterne ble opprinnelig brukt for å unngå zoom-problemer på eldre mobiltelefoner, men i dag er de bare en barriere for tilgjengelighet.

Faste bredder på containere

Elementer med fast bredde i piksler kan føre til horisontal scrolling:

/* FEIL: Fast bredde som forhindrer reflow */
.innhold {
  width: 960px;
}

/* RIKTIG: Fleksibel bredde */
.innhold {
  max-width: 960px;
  width: 100%;
}

Absolutte enheter for skriftstørrelse

Bruk relative enheter som rem eller em i stedet for px for skriftstørrelser. Mens moderne nettlesere skalerer piksler ved zoom, gir relative enheter bedre kontroll og er mer robuste:

/* ANBEFALT: Relative enheter */
body {
  font-size: 1rem;     /* Tilsvarer vanligvis 16px */
}

h1 {
  font-size: 2.5rem;   /* Skalerer med grunnstørrelsen */
}

small {
  font-size: 0.875rem;
}

Tekst i bilder

Tekst som er en del av et bilde kan ikke forstørres uavhengig av bildet. Bruk ekte HTML-tekst med CSS-styling i stedet for å legge tekst i bilder. Unntaket er logoer, der tekst i bilde er akseptabelt.

Praktiske tips for responsivt design

Bruk CSS media queries

Media queries lar deg tilpasse layouten for ulike skjermstørrelser:

.kortliste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .kortliste {
    grid-template-columns: 1fr;
  }
}

Test med ulike zoom-nivåer

1. 200 % zoom: Trykk Ctrl/Cmd + pluss til nettleseren viser 200 %. Sjekk at alt innhold er tilgjengelig og lesbart.
2. 400 % zoom eller 320px bredde: Sett nettleservinduet til 1280 piksler bredde og zoom til 400 %, eller bruk utviklerverktøyene til å simulere en 320 piksler bred viewport. Sjekk at det ikke kreves horisontal scrolling.

Ikke lås skjermretning

Tvangslåsing av skjermretning med CSS eller JavaScript bryter med WCAG 1.3.4. Noen brukere har nettbrettet eller telefonen montert i en fast posisjon og kan ikke rotere den. La brukeren bestemme orienteringen selv.

Hva sjekker UU-Kontroll?

Vår skanner oppdager automatisk om viewport-meta-taggen hindrer zoom, om det finnes elementer med faste bredder som kan forhindre reflow, og om det brukes tekst i bilder. Vi rapporterer disse funnene med konkrete anbefalinger for utbedring.

God zoom- og reflow-støtte handler ikke bare om å følge regelverket. Det handler om å bygge nettsider som fungerer for alle – uansett skjermstørrelse, synsstyrke eller foretrukket zoom-nivå.