Kapittel 3:

Universell utforming

Forfatter: Dan Andersen

Universell utforming (UU) vil si å gjøre innhold tilgjengelig for alle, uavhengig av funksjonsevne. Dette er det både et ønske og en forpliktelse for NDLA å få til. Det er bare noen enkle grep som skal til for å bedre brukeropplevelsen for flere.

Lovgrunnlag og prinsipper for universell utforming

Formålsparagrafen i den norske diskriminerings- og tilgjengelighetsloven sier:

Lovens formål er å fremme likestilling og likeverd, sikre like muligheter og rettigheter til samfunnsdeltakelse for alle, uavhengig av funksjonsevne, og hindre diskriminering på grunn av funksjonevne.

Loven skal bidra til nedbygging av samfunnsskapte funksjonshemmende barrierer og hindre at nye skapes.

For deg som jobber med innhold på nett, finnes det et sett med regler og anbefalinger for å nå dette målet. En standard er definert i Web Content Accessibility Guidelines, WCAG 2.0.

WCAG 2.0 opererer med fire grunnprinsipper for UU. De kan oppsummeres i «POUR»:

  • Perceivable: Er det mulig for alle brukere å oppfatte alt innholdet?
  • Operable: Er det mulig for alle brukerne å betjene og navigere nettstedet?
  • Understandable: Er innholdet forståelig for alle brukere?
  • Robust: Er alt innholdet tilgjengelig for alle brukere uansett enhet, plattform og teknologi?

I denne guiden vil vi ikke gå gjennom alle reglene fra WCAG, men vi presenterer dem som er relevante for deg som skal produsere innhold.

Innholdet er godt strukturert og lett å lese

For at det skal være lettere for mennesker å lese og forstå innholdet, er det viktig med god struktur på teksten, og at de ulike elementene er lette å få øye på. For datamaskinene som skal tolke informasjonen og gjøre den lesbar, både for menneskeøyne og skjermlesere, er det viktig med riktig koding. Sørg derfor for at titler, ingress, brødtekst og lister er tydelige, og at det er lett å skille dem fra hverandre.

Titler

Titler hjelper leseren til å orientere seg i teksten og skal være presise og dekkende for innholdet. I editoren velger vi “Heading 2», «Heading 3» osv. på mellomtitler og underoverskrifter. Overskriftsnivåene i editoren samvarer med H-tagger i html-koden: H1, H2, H3, H4, H5 og H6. H1 vektes høyest og har størst synlighet, både for brukeren og datamaskinen.

  • ‍Vi må velge et “Heading”-format for alle mellomtitler, slik at de får en H-tag. Hvis vi for eksempel bare bruker fet skrift, vil ikke nettlesere og skjermlesere kunne tolke at det er overskrifter.
  • H1 benyttes maksimalt én gang pr. side, og er hovedoverskriften på siden. Den kodes automatisk fra tittelfeltet i malen.
  • H2 brukes på titler ett nivå under hovedoverskriften og H3 to nivåer under. De kan benyttes flere ganger pr. side. Det vil si at vi i editoren velger «Heading 2» på øverste nivå av underoverskrifter, og «Heading 3» på andre nivå underoverskrifter, osv.
  • Når vi velger mellom overskriftsformatene Heading 2, Heading 3 osv., skal vi ikke tenke på hvilken størrelse vi synes ser finest ut, men hvilket nivå vi vil fortelle datamaskinene at overskriftene skal tolkes som.

Ingress

Ingressen er som regel det første brukeren leser av en tekst. Den skal forberede brukeren på hva teksten handler om. I publiseringsverktøyet for ndla.no har ingresser egne felt i editoren og stilsettes automatisk av eksisterende kode. De skal skille seg visuelt fra titler og brødtekst, og den skal være mer synlig enn brødteksten.

Brødtekst og avsnitt

Brødtekst deles i avsnitt for at leseren skal kunne forholde seg til ett moment om gangen og lettere få med seg innhold og sammenheng.  I koden omsluttes hvert avsnitt med en P-tag. Den syntetiske talen i skjermleseren tolker denne tagen slik at den lager en naturlig pause i opplesningen.

  • ‍I vår editor lager du avsnittene som vanlig med enter-tasten. Da blir det automatisk hardt linjeskift med P-tag i koden, og skjermleseren vil lage pause.
  • Det er viktig å ikke bruke dobbelt og trippelt linjeskift. Det resulterer i tomme P-tagger som skjermleseren tolker som flere pauser etter hverandre.
  • Bruker du shift + enter, vil du få et «mykt linjekift». Det bruker du bare der du trenger et linjeskift uten avsnittsskift. Den vil vises i koden som <br>, og skjermleseren vil ikke legge inn avsnittspause, men lese uavbrutt.

Lister

Lister strukturerer innholdet både visuelt og i selve koden. I editoren finnes det en egen funksjon for lister, benytt denne. Da blir listen korrekt kodet. Ikke kopier og lim inn lister med stilregler fra andre dokumenter. Selv om det ser riktig ut, kan koden bli feil. Lim heller inn teksten som ren tekst og konverter til liste i editoren.

Eventuelt:

Lister strukturerer innholdet både visuelt og i selve koden.

  • ‍I editoren vår har vi egne formateringsvalg for punktlister og nummererte lister. Bruk disse slik at listene blir korrekt kodet.
  • Hvis du skal lime inn lister fra andre dokumenter, konverterer du til ren tekst før du limer inn, og konverterer deretter til liste i editoren. Lister med stilregler fra andre dokumenter kan se riktige ut, men koden blir feil.

Tegn

I skriftlig tekst har vi en del tegn til rådighet som vi kan bruke til å nyansere framstillingen, men som i mange tilfeller ikke er obligatoriske å bruke. Det gjelder særlig parenteser, tankestreker og bindestreker, som skjermlesere vil forsøke å tolke og lese opp i syntetisk tale. Vi bør derfor unngå disse tegnene der teksten kan fungere like bra uten.

Du kan lære mer om språkbruk under kapittelet om språk og tone.

Lenketekster er beskrivende og presise

Lenketeksten skal fortelle brukeren hvor lenken fører. Da bruker vi lenketekster som:

Disse lenketekster forteller brukerne hva som lastes ned, eller hva de kan forvente å finne. Legg merke til at det første eksempelet også forteller filformatet og -størrelse på nedlastingen.

Siden lenketeksten skal fortelle oss om innholdet det leder oss til, kan den med fordel være lengre enn et par ord. Test gjerne om lenken du lager, er forståelig, om du ikke ser teksten rundt den.

Vi unngår lenketekster av typen

Brukeren trenger nemlig ikke å bli fortalt hva en lenke gjør, det vet vi alle. Det brukeren vil vite, er hva den fører til.

Bilder er relevante og har alt-tekst

Bilder bruker du for å hjelpe brukerne med å forstå innholdet. Derfor er det viktig å vurdere om bildene du legger inn, er beskrivende og relevante for innholdet eller bare dekorative. Dekorative bilder ønsker vi i størst mulig grad å unngå.

Alle bilder som benyttes, skal ha en alt-tekst. Alt-teksten beskriver motivet i bildet for dem som ikke kan se det. Det er også nyttig om bildet av en eller annen grunn ikke lastes. Unntaket er dekorative bilder. Da skal du fortsatt benytte alt-atributten, men innholdet skal være blankt. Slik får skjermlesere beskjed om at de kan hoppe over bildet.

Du kan lære mer om bilder og grafikk under kapittelet om bilder.

Tabeller er ryddige

Tabeller bruker vi først og fremst til å framstille data av ymse slag. Tabellfunksjonen i NDLAs editor koder med <div>-tag og ikke med <tab>, og kan til en viss grad også brukes til utforming av siden. Vær da obs på at skjermleseren alltid leser hele raden fra venstre til høyre, før den begynner på neste rad. Test resultatet både med skjermleser og på nettbrett.

For at alle brukerne skal kunne ha glede av dataene i tabellen din, er det viktig å huske på følgende:

  • ‍Alle celler må inneholde tekst, slik at alle kan lese dem.
  • Gi gjerne tabellen en beskrivende tittel. I editoren vår er den beskrevet som Tabelltittel, i koden bli dette en <caption>-tag.
  • Bruk celleoverskrifter for titler og grupperinger i selve tabellen. I editoren vår er den beskrevet som Grupperingstittel, som blir en <th>-tag i koden.

Vi kan gjerne bruke supplerende bilder for å forklare data i tabellen. Se mer i kapittelet om bilder.

Videoer har undertekster og transkripsjon

Video er en ypperlig læringsressurs og fungerer svært effektivt gjennom sin bruk av både lyd og bilde. Spesielt er det gode ressurser for dem som har problemer med å lese tekst. Men skal man få fullt utbytte, må man kunne se og som regel også kunne høre. For å optimalisere tilgjengeligheten på denne ressursen er det derfor to ting du må huske på.

  • ‍Undertekster for å hjelpe dem som ikke kan høre lyden fra filmen, eller som kan ha problemer med å forstå muntlig norsk.
  • Transkripsjon av innholdet og dialogen, slik at de som benytter skjermleser fordi de ikke kan se, kan få med seg innholdet. Dette er også nyttig dersom videoen ikke kan spilles av.