Gå til hovedinnhold

Informasjon, relasjoner og rekkefølge

Struktur og innhold henger tett sammen. Derfor er arbeidet med informasjon, relasjoner og rekkefølge viktig for alle som er involvert i produksjon av digitale læremidler, redaktører, designere og utviklere. I denne artikkelen har vi samlet råd og veiledning knyttet til ulike krav som er relatert til struktur i innhold og kode. Vi går ikke i detalj på spesifikke navigasjonselementer som del av god struktur, men linker til relevante ressurser.

Relevante krav​

  • 1.3.1 Sørg for at informasjon, struktur og relasjoner i innholdet kan forstås uavhengig av presentasjon.

  • 1.3.2 Presenter innhold i en rekkefølge som gir mening.

  • 4.1.2 Alle komponenter har navn og rolle bestemt i koden.

  • 4.1.3 Brukeren skal få statusbeskjeder om viktige endringer på nettsiden uten at det gir kontekstendring.

Brukergrupper​

  • Blinde og svaksynte elever
  • Elever med kognitive utfordringer
  • Elever med lesevansker
  • Elever med situasjonsbaserte utfordringer
  • Elever med nedsatt bevegelighet

Formål​

Formålet med kravene er å sikre at strukturen og sammenhengene i innholdet, samt hvordan det er kodet, fremstår tydelig også når presentasjonen endres, for eksempel gjennom skjermlesere eller andre hjelpemidler. I Standard Norges veileder, "Likeverdig tilgang til digitale læremidler i skole og utdanning," kapittel 5 forklares det hva det innebærer at pedagogisk formål ivaretas. Informasjon som er relevant for elevenes læring, skal komme frem gjennom innhold og struktur på en slik måte at det gir likeverdig tilgang for alle. Elever som brukere av digitale læremidler lærer mye om navigasjon av digitale flater i tillegg til læring knyttet til andre kompetansemål fra læreplanen. Dette gjør det spesielt viktig at digitale læremidler har god struktur og godt strukturert innhold. Les mer om digitale ferdigheter som grunnleggende ferdighet i læreplanen (Åpnes i ny fane)

Denne artikkelen forklarer hvordan digitale læremidler bør struktureres og kodes for å ivareta riktig informasjon og struktur. Dette gir brukere av hjelpemiddelteknologi og alternative navigasjonsformer en konsekvent måte å interagere med digitale læremidler på.

Utviklerrollen​

Som utvikler har du ansvar for å kode innhold slik at strukturen i informasjonen er tydelig gjennom HTML-elementer. Du har også ansvar for at verktøyene som settes opp for redaksjonell innholdsproduksjon muliggjør god semantisk struktur og riktig bruk av HTML-elementer. Les om tilgjengelig semantisk kode | UU tilsynet (Åpnes i ny fane)

  • Bruk semantiske HTML-elementer (h1-h6, ul, ol, table, nav, main, section, footer, etc.) for å angi tydelig struktur.

  • Navngi komponenter, elementer og grupper av elementer slik at formålet beskrives. For eksempel en knapp med teksten “lagre”. For andre elementer kan navn settes med title -attributtet eller aria-label. Dette varierer mellom forskjellige elementtyper. Les mer om hvordan tilgjengelig navn settes | W3C (Åpnes i ny fane)

  • Når tilstander og verdier kan settes av brukeren skal gitt tilstand eller verdi gjenspeiles i koden blant annet for å gjøre informasjonen tilgjengelig for å gjøre informasjonen tilgjengelig for hjelpemiddelteknologi. Et eksempel på dette er en knapps disabled tilstand. Ved bruk av <button> -elementet i HTML kan en inaktiv knapp gis attributtet disabled. Denne tilstanden er programmatisk gjengitt i koden, til forskjell fra å bare endre fargen eller funksjonen på knappen ved hjelp av CSS og Javascript uten at det er synlig i HTML -koden.

    <button disabled>Submit</button>

  • Sørg for at overskrifter og underoverskrifter følger en logisk rekkefølge. Spesielt viktig er det at det ikke gjøres hopp i overskriftsnivåer. For eksempel skal en side som har en <h1> -overskrift ikke ha <h3> -overskrifter uten at det også er <h2> -overskrifter i mellom.

  • Unngå bruk av visuelle elementer alene (f.eks. CSS-stiler) for å indikere struktur.

  • Implementer ARIA-landemerker der semantiske HTML-elementer ikke dekker behovet. Les mer om Aria landmarks | W3C (Åpnes i ny fane)

For statusbeskjeder og live oppdateringer skal riktig verdi brukes for role -attributtet. Oversikt over hvordan role og aria-live skal brukes (Åpnes i ny fane)

En ting som er viktig å ta i betraktning er at informasjon knyttet til aria-live kun blir tilgjengelig når informasjonen endres og også forsvinner når den har blitt lest opp av skjermleseren. Det finnes ingen etablert beste praksis for å løse denne utfordringen, men det finnes flere mulige tilnærminger. Dette er spesielt aktuelt for brukere av leselist (Leselist | Hjelpemiddeldatabasen Nav (Åpnes i ny fane)) som fort kan gå glipp av oppdateringer dersom de ikke har hendene på leselisten. Les om hvordan aria log role kan brukes | mdn web docs. (Åpnes i ny fane)

Bestepraksis​

Feller å unngå​

  • Ikke bruk CSS eller layout alene for å vise struktur.
  • Ikke bruk feil overskriftsnivåer.
  • Pass på at tabeller brukes til tabellinformasjon, ikke layout.

Tips og triks​

  • Struktur først: Begynn alltid med å lage tydelig og riktig semantisk struktur i HTML.
  • Test med skjermleser for å sikre at strukturen er forståelig.
  • Unngå unødvendig kompleksitet: En enkel, ryddig struktur er enklere å oppfatte for alle.

Les mer​