Rammer og iframes

Iframes er en vanlig måte å bygge inn innhold fra andre tjenester på nettsiden din – kart fra Google Maps, videoer fra YouTube, betalingsløsninger eller chatbots. Men uten riktig merking kan disse rammene bli forvirrende barrierer for brukere som navigerer med skjermleser eller tastatur.

Hva betyr dette?

Et <iframe>-element laster inn en helt egen nettside inne i din nettside. For seende brukere er det vanligvis tydelig hva rammen inneholder – de ser kartet, videoen eller skjemaet visuelt. Men for skjermleserbrukere er en iframe bare en «ramme» uten kontekst, med mindre du gir den en beskrivende tittel.

WCAG har flere suksesskriterier som berører iframes, blant annet 2.4.1 (hoppe over blokker) og 4.1.2 (navn, rolle, verdi). I praksis koker det ned til noen enkle regler for å gjøre iframes tilgjengelige.

Hvorfor er det viktig?

Skjermlesernavigasjon

Når en skjermleserbruker navigerer gjennom en side, presenteres iframes som egne landemerker. Skjermleseren annonserer for eksempel «ramme» etterfulgt av tittelen. Uten tittel vil den bare si «ramme», og brukeren vet ikke om det er verdt å gå inn i rammen eller hoppe over den.

Tenk deg en side med tre iframes uten tittel. Brukeren hører «ramme, ramme, ramme» – og må gå inn i hver av dem for å finne ut hva de inneholder. Det er som å åpne tre dører uten skilt for å finne ut hvilket rom du leter etter.

Tastaturnavigasjon

Innholdet inne i en iframe kan motta tastaturfokus. Hvis brukeren tabber seg inn i en ramme uten å vite hva den inneholder, kan det være forvirrende. I verste fall kan brukeren bli «fanget» inne i rammen hvis innholdet håndterer tastaturfokus dårlig.

Tilgjengelighetsverktøy

Automatiske tilgjengelighetsverktøy som UUKontroll flagger iframes uten title-attributt som feil. Dette er en av de enkleste feilene å fikse, men også en av de vanligste.

Hvordan fikser jeg det?

Legg til title-attributtet

Hver <iframe> på siden din skal ha et title-attributt som beskriver innholdet i rammen. Tittelen bør være kort og beskrivende – tenk på den som et skilt på en dør.

<!-- Dårlig: Ingen tittel -->
<iframe src="https://maps.google.com/embed?q=Oslo"></iframe>

<!-- Bra: Beskrivende tittel -->
<iframe
  src="https://maps.google.com/embed?q=Oslo"
  title="Google Maps – Kart over kontoret vårt i Oslo">
</iframe>

Bruk unike titler

Hvis du har flere iframes på samme side, må hver ha en unik tittel. Hvis alle heter «Video», kan ikke brukeren skille dem fra hverandre.

<!-- Dårlig: Like titler -->
<iframe src="video1.html" title="Video"></iframe>
<iframe src="video2.html" title="Video"></iframe>

<!-- Bra: Unike, beskrivende titler -->
<iframe src="video1.html" title="Produktdemo – Slik kommer du i gang"></iframe>
<iframe src="video2.html" title="Kundehistorie – Hvordan Firma AS bruker tjenesten"></iframe>

Skjul dekorative iframes

Noen ganger brukes iframes til ting som ikke har noe meningsfullt innhold for brukeren – for eksempel sporingspiksler eller tekniske integrasjoner. I slike tilfeller bør du skjule rammen for hjelpemidler:

<iframe
  src="tracker.html"
  title=""
  aria-hidden="true"
  tabindex="-1"
  style="display: none;">
</iframe>

Merk: Bruk aria-hidden="true" og tabindex="-1" sammen for å sikre at rammen verken annonseres av skjermlesere eller kan motta tastaturfokus.

Unngå fokusfeller

Et vanlig problem med iframes er at brukeren kan bli «fanget» inni rammen – tastaturet lar dem navigere inn, men ikke ut igjen. Dette skjer typisk med tredjepartsinnhold som chatbots eller betalingsløsninger.

Test alltid at du kan navigere inn i og ut av en iframe med bare tastaturet (Tab og Shift+Tab). Hvis tredjepartsleverandøren din lager en fokusfelle, ta kontakt med dem og be om en fiks.

Ytelse og lazy loading

Et bonustips: Iframes kan påvirke sideytelsen. Bruk loading="lazy" for iframes som ikke er synlige når siden lastes, slik at de bare lastes når brukeren scroller ned til dem:

<iframe
  src="https://www.youtube.com/embed/abc123"
  title="Introduksjonsvideo – Universell utforming"
  loading="lazy"
  allow="accelerometer; autoplay; encrypted-media; gyroscope">
</iframe>

Sjekkliste for iframes

• Har alle iframes et beskrivende title-attributt?
• Er titlene unike hvis det er flere iframes på samme side?
• Kan brukeren navigere inn og ut av rammen med tastaturet?
• Er dekorative eller tekniske iframes skjult med aria-hidden="true"?
• Fungerer innholdet i rammen med tastatur alene?

Ved å følge disse enkle reglene sørger du for at innebygd innhold på nettsiden din er tilgjengelig for alle brukere – uansett hvordan de navigerer.