La brukeren velge skjermretning (WCAG 1.3.4)

Noen brukere har nettbrettet eller telefonen montert fast i en holder - kanskje til en rullestol eller et stativ ved sengen. De kan ikke rotere enheten. Andre foretrekker liggende visning fordi det gir mer plass til tekst. WCAG 1.3.4 sikrer at nettsider og apper fungerer i begge retninger, slik at ingen stenges ute på grunn av tvungen orientering.

Hva sier kravet?

WCAG 1.3.4 Visningsretning krever at innhold ikke begrenses til bare stående (portrett) eller bare liggende (landskap) visning, med mindre en bestemt visningsretning er helt nødvendig for funksjonaliteten.

Kravet er klassifisert som nivå AA, som betyr at det inngår i minimumskravene for norske virksomheter. Det ble introdusert med WCAG 2.1 og er spesielt relevant for mobile enheter og nettbrett.

I praksis betyr dette at du ikke skal låse orienteringen på nettsiden din. Brukeren må selv kunne velge om de holder enheten i stående eller liggende posisjon, og innholdet må tilpasse seg uten at funksjonalitet eller informasjon går tapt.

Unntaket gjelder tilfeller der orienteringen er essensiell for funksjonaliteten. Et piano-app som trenger full bredde for å vise tangentene, eller en sjekk-app som må matche en fysisk sjekks dimensjoner, kan ha gyldig grunn til å låse orienteringen. Men slike unntak er sjeldne - de aller fleste nettsider og apper har ingen grunn til å begrense visningsretning.

Hvorfor er dette viktig?

Brukere med fysiske begrensninger

Mange brukere med nedsatt motorikk har enheten montert i en fast posisjon. En rullestolbruker kan ha et nettbrett montert på armlenet i liggende posisjon. Hvis nettsiden din krever stående visning, kan de rett og slett ikke bruke den.

Brukerpreferanser varierer

Noen brukere med nedsatt syn foretrekker liggende visning fordi det gir dem mer plass til å forstørre innholdet. Andre foretrekker stående visning for å lese lange tekster. Å respektere brukerens valg er en grunnleggende del av god tilgjengelighet.

Ulike enheter, ulike bruksmønstre

Desktop-skjermer er som regel i liggende format. Mobiler brukes oftest i stående. Nettbrett brukes i begge. Nettsiden din må fungere uansett.

Slik oppfyller du kravet

Ikke lås orientering i CSS

Den vanligste måten å bryte dette kravet på er å bruke CSS-mediespørringer som skjuler innhold eller bryter layout i én bestemt orientering:

/* Dårlig: Tvinger innhold til å bare fungere i stående */
@media (orientation: landscape) {
  body {
    display: none;
  }
  .roter-melding {
    display: block;
  }
}

/* Bra: La innholdet tilpasse seg begge orienteringer */
@media (orientation: landscape) {
  .innhold {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (orientation: portrait) {
  .innhold {
    padding: 0 1rem;
  }
}

Ikke lås orientering i web app manifest

Hvis du har en Progressive Web App (PWA), sjekk manifest.json. Feltet orientation kan låse retningen:

{
  "name": "Min App",
  "display": "standalone",
  "orientation": "any"
}

Bruk verdien "any" eller fjern orientation-feltet helt. Verdier som "portrait" eller "landscape" låser orienteringen og bryter kravet.

Ikke lås orientering via JavaScript

Noen utviklere bruker Screen Orientation API for å låse orientering programmatisk. Unngå dette med mindre det er helt nødvendig for funksjonaliteten:

// Dårlig: Tvinger portrettmodus
screen.orientation.lock("portrait");

// Bra: Ikke bruk orientation.lock() med mindre det er
// genuint nødvendig (f.eks. et spill som krever det)

Design for begge orienteringer

Sørg for at layouten din fungerer i begge retninger. Bruk fleksibel CSS som tilpasser seg tilgjengelig plass:

.kort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

Med auto-fit og minmax tilpasser rutenettet seg automatisk til tilgjengelig bredde, uansett orientering.

Test i begge orienteringer

Test nettsiden din i både stående og liggende visning. Sjekk spesielt:

• At alt innhold er synlig og lesbart i begge orienteringer
• At navigasjonen fungerer i begge retninger
• At skjemaer kan fylles ut og sendes inn uansett orientering
• At modale dialoger og popups ikke forsvinner eller overlapper i den ene retningen

I Chrome DevTools kan du enkelt simulere ulike orienteringer gjennom enhetsverktøyet (Ctrl+Shift+M). Bytt mellom stående og liggende for å se hvordan siden oppfører seg.

Vanlige feil

• «Vennligst roter enheten din»-meldinger som blokkerer hele innholdet i én retning. Dette er det mest åpenbare bruddet.
• Låst orientering i manifest.json - mange PWA-maler inkluderer "orientation": "portrait" som standard.
• JavaScript som låser orientering via screen.orientation.lock() uten gyldig grunn.
• Layout som kollapser i liggende visning - innhold som overlappes eller forsvinner fordi CSS-en ikke er testet i begge retninger.
• Modale dialoger som ikke fungerer i liggende modus - dialogbokser som er høyere enn skjermen i liggende visning og ikke kan scrolles.
• Video-spillere som tvinger liggende modus - med mindre videoen er i fullskjerm (der det er akseptabelt å foreslå orientering).

Husk at dette kravet handler om å respektere brukerens valg og fysiske situasjon. De aller fleste nettsider har ingen grunn til å begrense orientering. La innholdet tilpasse seg - det er det responsive design handler om.