Uu: H5P (generelt)

Denne siden er ganske generell og det vil på sikt bli laget mer detaljerte sider om ulike H5P-typer. Slik som når og hvordan vi skal bruke de ulike og hva vi må tenke på når det gjelder uu.

Jevnt over er H5P-er utfordrende når det gjelder universell utforming. Det er flere grunner til det. Det er ofte kombinasjon av flere medier slik som bilde, tekst og video. H5P-ene har navigasjon som avviker fra øvrig navigasjon på ndla.no, og det er ikke alle typene som er utviklet med tanke på universell utforming. En H5P-type kan være tiltenkt en spesifikk type bruk og være universelt utformet for dette formålet. Selv om og det er likevel mulig å lage mange andre varianter.

H5P er mindre tilgjengelig for en del av våre brukere. En hovedregel er at viktig fagstoff skal ligge i fagartikkel (i ED). Viktig fagstoff må ikke kun bli presentert i en H5P. H5P-innholdet dukker ikke opp i nettsøk som er den vanligste veien inn til fagstoffet på våre sider. H5P krever mer av brukeren og er tidkrevende i produksjon og vedlikehold.

Det ligger en oversikt over H5P-innholdstyper på Zendesk og der finner du også konkrete tips fra LibreStudio om hvordan vi kan forbedre uu i hver enkelt H5P-type (rapporten fra LibreStudio er dessverre litt utdatert).

Les: Kvalitet i interaktivt innhold

Ikke legg ut på langtur med kompliserte og avanserte H5P-er om du ikke har dekket opp grunnleggende fagstoff om temaet i ED, og heller ikke har satt deg inn i denne H5P-typen og UU.

Kjente, gjennomgående uu-problemer for H5P

Generelle feil kan som oftest løses effektivt teknisk på et generelt nivå. Enten hos H5P-group, i vår Edlib-løsning eller i den enkelte H5P-innholdstype. Feilene vil likevel være en utfordring for store brukergrupper hver gang de møter en H5P i våre artikler. Det kan altså være relevant å vite om små feil siden de rammer bredt.

Mye av innholdet vårt er ikke oppdatert til siste versjon og en del er helt utdaterte (deprecated). Dette betyr at vi har gamle uu-bugs på lufta som er utbedret i nyproduksjon. Dette er spesielt omfattende for course presentation/fagpresentasjon.
Manglende oppdatering av språkfiler gir en blanding av norske og engelske ledetekster. Dette gjelder ofte "usynlige" tekster, altså tilbakemeldinger eller informasjon kun ment for skjermleser. Vi jobber med å få oppdaterte tekster inn i systemet vårt. Deretter må vi få hentet nye hjelpetekster inn hver enkelt H5P vi har publisert (forhåpentligvis med en effektivt teknisk rutine).
Hjelpetekster som forsvinner under/utfor kanten og/eller bakom knapper og gjør dem uleselige.
For svak fokusmarkering på knapper siden de kun baserer seg på nettleserens visning. Det er ikke godt nok at knappene blir litt mørkeblå eller at de får en linje rundt som ikke har kontrast nok mot knappeflaten.
Ord og uttrykk er ikke kodet med andre språk, hele H5P har kun et språkvalg. Dette betyr at innslag av andre språk vil bli lest opp på norsk av skjermleser.
Ingen H5P støtter nettleserbasert tekststørrelse (forstørring), og mange innholdstyper mister innhold om brukeren endrer linjeavstand og tegnavstand (innenfor wcag-kravene).
(Youtubevideoer satt inn i H5P har ikke mulighet for teksting). NDLA har policy om å ikke bruke youtube i noe innhold.

Kjente, gjennomgående problemer knyttet til spesifikke innholdstyper (med eksempler)

Drag the words kan ikke brukes med tastaturnavigasjon fordi man ikke får tak i ordene man skal dra.
Image Juxtaposition mangler kontrast (rammefarge) på "håndtaket" slik at det blir vanskelig å finne og er i liten grad mulig å bruke med tastatur.
Memory er vanskelig å navigere med skjermleser fordi man kan ende opp i bakgrunnen selv om det ligger en aktiv modal (popup-meldingsvindu) foran.
Flashcards går automatisk videre etter at svar er avgitt slik at brukeren kan få for lite tid til å få med seg fasit og bryter kravet om justerbar tid.
NDLA Timeline flytter ikke fokus til innhold når man velger en periode på tidslinja, så skjermleserbrukere vil få utfordringer. Med smalere nettleservindu forsvinner bilde nedenfor tekst og bak tidslinja uten at H5P-ramme utvides. Ved 400% zoom klippes en del av teksten.
Image Hotspot gir ingen informasjon til skjermleserbrukere om at den inneholder interaktivitet og man må derfor presisere dette i forkant.
NDLA Topic Map fungerer ikke med 400% zoom: Notat-fanen er ikke tilgjengelig uten horisontal scrolling.
Course Presentation kan ikke justere rekkefølge på elementer og slides må derfor bygges på nytt om fokusrekkefølge er feil. Svevetekst må ikke brukes, for den informasjonen kan ikke formidles til skjermleser.
Dokumentasjonsverktøy har en mengde elementer som er kodet på feil måte og derfor blir vanskelig å betjene med skjermleser.
Drag the words, Fill in the Blanks, Mark the words: Skjermleserfokus flyttes ikke til feedback ved oppgaveslutt så skjermleserbrukere har utfordringer med å få med seg tilbakemeldingene.

Tiltak for å forbedre uu

Utover de tekniske problemene er det flere tiltak vi kan gjøre for å forbedre uu i H5P-innhold når vi produserer:

Generelt

En hovedregel er at ikke tekstlig-innhold har tekstalternativ (WCAG 1.1.1).
Unngå i størst mulig grad å blande språk inni H5P, bortsett fra i innholdstypen Vocabulary Drill.
Velg riktig type. Bruk hver enkelt av H5P-typene til det de er ment til og utviklet for. Ikke endre på knappenavn og lignende.
Det er gode kontraster mellom ulike visuelle elementer (WCAG 1.4.11). Ulike visuelle elementer skal ha kontrastforhold 3:1 og tekst og tekstbakgrunn skal ha 4,5:1.
Unngå for mange medietyper i en H5P.
Videoinnhold er tekstet.
Bilder har alt-tekster.
Lyd har transkripsjon eller annen tekstversjon ved lydklippet.
Vi anbefaler H2 eller H3 i tittel i ED før H5P-oppgaven. Da vet brukeren hva som kommer. Det gjør også sida bedre for brukere som bruker skjermleser, da mange H5P-typer mangler overskriftsnivå.
Lag nødvendig introduksjonstekst ovenfor H5P. Husk å bruke teknologiuavhengige ord ("velg" i stedet for "klikk/trykk" og "flytt" i stedet for "dra").

Navigasjon og fokusrekkefølge

Det er tydelig og lett å forstå for brukeren hva hen skal gjøre.
Klikkbare elementer og slippsoner er lette å oppdage og bruke med hjelpemidler.
Det er naturlig rekkefølge i elementene (WCAG 1.3.2).
Det er best for eleven å ha hele H5P-en i ruta. Unngå at elevene må skrolle for å se hele H5P-en.
Bruker kan bruke ressursen med skjermleser og tastatur (WCAG 2.1.2).

Dra og slipp-oppgaver/fyll inn tekst/dra tekst

Dra og slipp-oppgaver skal ikke ha for mange felt (Over åtte par er mye).
Fyll inn ord/dra og slipp ord-oppgaver bør ikke være for lange. Inntil åtte felt er passelig. Maks ett ord per setning, elever trenger å kunne se/høre resten av setningen for å få med seg sammenhengen. Elever foretrekker å dra ord over å skrive inn ord.

Course Presentation

Course Presentation har innebygd sidenavigering. Vi bruker hovedsaklig denne. Eventuelle unntak skal klareres med deskkontakt før produksjon.
Unngå å bruke Course Presentation som "container" for mange ulike interaktive oppgavetyper. Det blir dårlig med plass, og gir to ekstra lag med ulike navigasjonsmetoder i tillegg til vanlig navigasjon på fagsiden på ndla.no. Legg heller oppgaver i artikkelen eller samle disse inn i Quiz (Question set).
Unngå kompliserte Course Presentations med mye ulikt innhold (ikke både fagstoff, oppgaver, bildeshow og refleksjonsoppgaver)
Vi unngår ensidige Course Presentations (tidligere brukt som kollasj). Kontakt din deskkontakt for alternativer, vi kan lage et sammensatt bilde, en SVG eller bruke grid-verktøy.

Uu-innhold om ulike innholdstyper

Øvrige uu-regler for tekst, lyd, video og bilde gjelder også her. Sett deg inn i aktuelt innhold om innholdstypene:

Uu og bestemte H5P-typer

Uu: kodekammer

Relatert innhold:

Kilde

Tilsynet for universell utforming av ikt. (u.å.). WCAG-standarden. Hentet 08.06.23 fra
https://www.uutilsynet.no/wcag-standarden/wcag-standarden/86

Skrevet av Stina Grolid

UTKAST TIL NY STRUKTUR UNDER HER:

Jevnt over er H5P-er utfordrende når det gjelder universell utforming og de er mindre tilgjengelig for en del av våre brukere. Det er flere grunner til det. De inneholder ofte en kombinasjon av flere medier, som bilde, tekst og video. H5P-ene har også navigasjon som avviker fra øvrig navigasjon på ndla.no, og det er ikke alle typene som er utviklet med tanke på universell utforming.

Viktig fagstoff skal ikke kun bli presentert i en H5P.

Les: Kvalitet i interaktivt innhold

Ikke legg ut på langtur med kompliserte og avanserte H5P-er om du ikke har dekket opp grunnleggende fagstoff om temaet i ED, og heller ikke har satt deg inn i denne H5P-typen og UU.

Generelle suksesskriterier for uu i h5p-innhold

Hver enkelt innholdstype brukes til det den er ment og utviklet for. Knappenavn, ledetekster og lignende er ikke endret på i produksjon.
H5P-en er tilknyttet en beskrivende h2/3/4 i ED før oppgaven/interaktiviteten (WCAG 2.4.6).
Brukeren er informert om hva oppgaven/interaktiviteten går ut på i brødteksten utenfor og før selve H5P-en. Feltet med uu-disclaimer/advarsel kan også brukes til å informere (WCAG 1.3.1).
Instrukser og forklaringer inneholder teknologiuavhengige ord ("velg" i stedet for "klikk/trykk" og "flytt" i stedet for "dra").
Det er tydelig og lett å forstå for brukeren hva hen skal gjøre.
Klikkbare elementer og slippsoner er lette å oppdage og bruke med hjelpemidler.
- - f.eks.: alle slippsoner har informative titler.
Ikke-tekstlig innhold har tekstalternativ (WCAG 1.1.1).
- - bilder har alt-tekst.
  - lyd har transkripsjon eller annen tekstversjon tilgjengelig.
    - - Merk: ingen innholdstyper gjør det mulig å legge til transkripsjon eller annen tekstversjon direkte knyttet til det interaktive ikonet for lydfila. Denne må gjøres tilgjengelig på andre måter.
  - videoinnhold er tekstet.
  - videoer har integrert synstolkning eller et tekstalternativ som tolker innholdet.
    - - Merk #1: ingen innholdstyper gjør det mulig å velge “Synstolket versjon” av en video.
        
        Merk #2: ingen innholdstyper gjør det mulig å legge til videotekst eller alt-tekst direkte knyttet til det interaktive ikonet for videofila. Denne må gjøres tilgjengelig på andre måter. Vær spesielt klar over dette under planlegging av NDLA Escape Room 360.
H5P-en er merket med det språket du har valgt for den. Hvis deler av H5P-en inneholder andre språk, må disse språkmerkes. Alle elementer har ikke nødvendigvis mulighet for språkmerking (WCAG 3.1.2).
Det er gode kontraster mellom ulike visuelle elementer (3:1) og mellom tekst og tekstbakgrunn (4.5:1) (WCAG 1.4.11).
H5P-innholdet er tilgjengelig uten at det krever scrolling i både horisontal og vertikal retning (WCAG 1.4.10). Aller enklest for brukeren er det om alt innhold får plass på skjermen uten scrolling i det hele tatt, for eksempel ved å utforme H5P-en kvadratisk eller i breddeformat. Kvadratisk format vil hindre at innholdet fremstår altfor smått i stående visning på mobil.
Brukerne er tilbudt alternative oppgaver de kan velge mellom, der det er hensiktsmessig. En ren tekstversjon kan være praktisk i mange tilfeller. En visuell oppgave kan kanskje teknisk sett være universelt utformet, men likevel ikke særlig pedagogisk stimulerende for alle. En alternativ oppgave med mindre fokus på det visuelle kan være nyttig for en del brukere.

Noe å vurdere? Planlegg ressursen slik at den kan fungere med kun tekst, uten noen H5P. Legg evt. deretter til interaktivt innhold. På den måten er vi sikret at det interaktive innholdet har et godt og gjennomarbeidet alternativ, selv om man skulle møte på uu-utfordringer i H5P-en.

Håndtering av uu-problemer på ulike nivåer

Alle innholdstypene fra H5P vi bruker i NDLA har på en eller annen måte uu-utfordringer ved seg. Disse må vi håndtere på ulike nivåer. En del feil må løses på et overordnet teknisk nivå, for eksempel internt i NDLA, i vår Edlib-løsning eller hos H5P-group. Av erfaring vet vi at slike endringer kan ta tid. Andre utfordringer kan håndteres av desk og språk i samarbeid med fagredaksjonene i planlegging og bygging av konkrete oppgaver.

Under følger en oversikt over kjente uu-utfordringer i innholdstypene som er godkjent til bruk hos oss. Merkingen vi har brukt er ...

A for Krever Alternativ = Enten kan hele innholdstypen være merket A og kreve et Alternativ, eller så kan spesifikk bruk av en innholdstype være merket (a), og kreve et Alternativ.

P for Krever grep i Produksjon = Man må ta uu-grep i produksjon.

TEK for Teknisk løsning = UU-problemet er meldt til Utforske som har meldt det videre eller jobber med å løse det internt. Det er antatt at feilen vil bli løst. Informasjon om TEK er i utgangspunktet ikke ment eller relevant for redaksjonene. Bare å hoppe over.

Gjelder generelt om innholdstyper

P: Alle H5P-er inneholder ett eller flere tekstfelt som ikke lar seg språkmerke (utover det å sette et bestemt språk for alt tekstinnhold). Hvor mange felt som gjør det mulig å språkmerke enkeltord varierer mellom innholdstyper. Merk: Ingen tittelfelt lar seg språkmerke. Se oversikt over innholdstyper og tekstfelt som tillater språkmerking (WCAG 3.1.2).
P: Felt for alternativ tekst til bilder gir plass til maks 255 tegn, inkludert mellomrom.
P: Språkoppdateringer blir ikke automatisk gjort gjeldende i eksisterende ressurser. Bytt derfor språk for å sikre at nyeste versjon av språkfiler er tatt i bruk i H5P-en. Bytt både i høyre "Lagre og lukk"-meny og under "Innstillinger og tekster" helt nederst.
TEK: For svak kontrast fokusområder ved tastaturnavigasjon (WCAG 2.4.7).
- - I versjonen på explore.ndla.no pr. 9.3.2026 er dette fikset.
TEK: Font-størrelsen på tekstinnhold i H5P påvirkes ikke selv om brukeren har endret dette i nettleserinnstillingene (WCAG 1.4.4).
- - (???) Feilen er omtalt i tilgjengelighetserklæringen. (???)
TEK: Ressurs-biblioteket, som finnes i en del innholdstyper, mangler felt for alt-tekst.
- - Vil bli ordnet med kommende oppdatering (før høsten 2026?)

Gjennomgang av uu i de ulike innholdstypene

Course Presentation: A

A: Innholdstypen er godkjent for bruk på ndla.no, men krever alltid et alternativ. Hvis man ønsker å bruke en Course Presentation: Legg til en uu-advarsel og vis til et likeverdig, universelt utformet alternativ med samme pedagogiske formål.

Drag and Drop: (a) KUN TEST

(a): Drag and Drop kan utformes på en måte som gir for høy kognitiv belastning for noen brukere. Bruk av visuelle elementer, mange flyttbare elementer, mange slippsoner og mye tekstinnhold kan hver for seg, men særlig i kombinasjon, gjøre oppgaven krevende. Dette gjelder spesielt for brukere med skjermleser.

Hvis man lager en Drag and Drop-oppgave der det er rimelig å anta at den kognitive belastningen vil være for stor for enkelte brukere: Legg til en uu-advarsel og vis til et likeverdig, universelt utformet alternativ med samme pedagogiske formål.

P: osv

Drag the Words (a)

(a): Drag the Words kan utformes på en måte som gir for høy kognitiv belastning for noen brukere. Hvis man ikke kan legge slippsonen helt til slutt i setningen blir oppgaven vanskeligere å løse med skjermleser. Vanskegraden øker videre hvis man legger til flere slippsoner i samme setning eller hvis setningene blir veldig lange.

- Unntak: I oppgaver der slippsonen må plasseres et annet sted enn på slutten av setningen, for eksempel i grammatikkoppgaver med setningsledd eller ordklasser, gjelder ikke kravet om et alternativ.

Hvis man lager en Drag the Words-oppgave der det er rimelig å anta at den kognitive belastningen vil være for stor for enkelte brukere: Legg til en uu-advarsel og vis til et likeverdig, universelt utformet alternativ med samme pedagogiske formål.

P: Ikke legg til mer enn én slippsone pr. setning.
P: Plasser slippsonen helt til slutt i setningen.
P: Ikke plasser mer enn én setning på hver linje.
P: Unngå ord på mer enn 17 bokstaver (bokstaver utover dette vil ikke vises etter at et ord er plassert).
P: Inkluder antall setninger i overskriften (også) inne i selve h5p-en.
P: Nummerer setningene.
P: Begrens lengden på setningene. Jo lenger setningene er, jo mer krevende vil det bli å huske konteksten for ordet som skal plasseres, hvis man løser oppgaven med skjermleser.

TEK: Lange svarord/tekst blir kuttet etter at de plasseres. For å se hele teksten igjen må brukeren starte oppgaven på nytt (WCAG 1.3.1). I AR.
- - (Det jobbes ikke med å rette feilen?)
TEK: Når man får opplest tilbakemelding på hvordan oppgaven gikk flytter selve fokusfeltet for skjermleser ikke til riktig sted, men går tilbake til starten på oppgaven. For å få lest opp tilbakemeldingen på nytt må brukeren bevege seg gjennom hele oppgaven. Ikke i AR.
- - Saken er meldt til H5P-Group (mars 2025) og vil bli fikset.
TEK: Svart kantlinje legges på de blå knappen på den nederste knappelinja. Den svarte linja har god kontrast mot det hvit på utsiden, men kun 2.88:1 mot blåfargen inne i knappen (WCAG 2.4.7). Ikke spesifisert i AR, 2.4.7 er kun omtalt generelt.
- - I versjonen på explore.ndla.no pr. 9.3.2026 er dette fikset.
TEK: Skjermlesernavigasjon er i praksis ikke mulig på bred skjerm/når ordene legger seg til høyre.
- - I versjonen på explore.ndla.no pr. 9.3.2026 er dette fikset.

Mark the Words (a)

(a): Mark the Words kan utformes på en måte som gir for høy kognitiv belastning for noen brukere. Hvis man ikke kan bygge oppgaven i henhold til lista med P-er under, vil den bli vanskeligere å løse med skjermleser.

Hvis man lager en Mark the Words-oppgave der det er rimelig å anta at den kognitive belastningen vil være for stor for enkelte brukere: Legg til en uu-advarsel og vis til et likeverdig, universelt utformet alternativ med samme pedagogiske formål.

P: Inkluder antall setninger i overskriften (også) inne i selve h5p-en.
P: Bruk 1 linje pr. setning.
P: Begrens antall setninger. Åtte er mange.
P: Nummerer setningene.

TEK: Når man får opplest tilbakemelding på hvordan oppgaven gikk flytter selve fokusfeltet for skjermleser ikke til riktig sted, men går tilbake til starten på oppgaven. For å få lest opp tilbakemeldingen på nytt må brukeren bevege seg gjennom hele oppgaven. Ikke i AR.
- - Saken er meldt til H5P-Group (mars 2025) og vil bli fikset.
TEK: Svart kantlinje legges på de blå knappen på den nederste knappelinja. Den svarte linja har god kontrast mot det hvit på utsiden, men kun 2.88:1 mot blåfargen inne i knappen (WCAG 2.4.7). Ikke spesifisert i AR, 2.4.7 er kun omtalt generelt.
- - I versjonen på explore.ndla.no pr. 9.3.2026 er dette fikset.
TEK: Kontrasten mellom rammen som dukker opp når man hovrer et ord (med musepeker) og hvit bakgrunn er ikke høy nok (WCAG 1.4.11).
- - Ignorer. I versjonen på explore.ndla/wordpress (9.3.2026) er dette fikset.

Question Set KUN TEST

Test

NDLA Timeline: A

A: Innholdstypen er godkjent for bruk på ndla.no, men krever alltid et alternativ. Hvis man ønsker å bruke NDLA Timeline: Legg til en uu-advarsel og vis til et likeverdig, universelt utformet alternativ av med samme pedagogiske formål.