Universell utforming når vi skriver, designer og utvikler innhold
Her finner du informasjon og råd om universell utforming i ulike typer innhold.
En viktig del av å lage en god, universell utformet løsning er tekstene. Følg derfor skrivereglene.
Komponentene i designsystemet er testet mot kravene i WCAG 2.1, nivå AA. Men det er viktig at du likevel tester universell utforming i din løsning. Anbefalte mønstre i designsystemet vil også gi deg mange god råd.
Tilsynet for universell utforming av ikt (uutilsynet) har løsningsforslag for nettsider med gode råd og eksempler på hvordan du skal møte kravene.
Farger er viktig på nett. Du skal sørge for god lesbarhet og alternativer til farger som betyr noe mer.
Tilstrekkelig kontrast mellom bakgrunn og tekst/meningsbærende grafikk er viktig for god lesbarhet, men ekstra viktig hvis du har nedsatt kontrastsyn eller for eksempel bruker mobil i sterkt sollys.
Kravet for tilstrekkelig kontrast for tekst er minst 4.5:1 og minst 3.0:1 for meningsbærende grafikk.
Kontrast kan måles med bruk av verktøy.
Riktig: Svart tekst på hvit bakgrunn har beste mulige kontrast på 21:1.
Galt: Lysegrå tekst på hvit bakgrunn har for dårlig kontrast på 2.11:1
Tips
- Bruk verktøy som måler kontrastforhold, for eksempel Wave, Color Contrast Analyser, WCAG color contrast checker.
- Standardfarge på tekst brukes ofte på ulike bakgrunner, for eksempel i bokser og varsler. Test de ulike kombinasjonene.
- Bilder av tekst skal også bestå kontrastkrav.
- Sjekk kontrast også når noe bytter farge f.eks. ved tastaturfokus.
- Husk at grafikk, for eksempel rødt kryss eller grønn avhuking, er meningsbærende og må ha tilstrekkelig kontrast.
Farger brukes ofte for å si at noe er aktivt/valgt, at tekst er lenke, at røde tall er negative og grønne tall er positive og så videre.
Ikke alle ser farger og derfor må du sørge for å gi minst ett annet visuelt alternativ, for eksempel ved hjelp av understreking, ekstra tekst/ikon og lignende.
Riktig: Lenke med farge og minst ett annet alternativ
Galt: Kun farge som viser at tekst er lenke
Tips
- Sørg for at alternativet også har tilstrekkelig kontrast.
- Bruk alternativer konsistent.
- Vær spesielt oppmerksom på fargeendringer i løpende tekst eller repetitivt innhold, for eksempel datoer i en kalender.
- Test nettsiden din med simulator for ulike typer fargeblindhet.
WCAG: 1.4.1
Navigasjon og handlinger er essensielt på web. Noen av de viktigste spørsmålene du må tenke på for lenker og knapper er:
- Er det enkelt for brukerne å forstå hva som vil skje når du velger en lenke/knapp?
- Er det tydelig visuelt hva som er lenker/knapper?
- Kan lenkene/knappene brukes med tastatur?
- Kan du se hvilken lenke/knapp som har tastaturfokus?
Tips
- Vær tydelig og ikke bruk navn som for eksempel "Les mer" og "Her".
- Følg skrivereglene for lenker
- Unngå repeterende lenker til samme sted, for eksempel 3 lenker i forbindelse med tittel, bilde og tekst på en forsidenyhet.
- Grafiske lenker og knapper skal ha en alternativ tekst
- Husk tydelig og konsistent visuelt tastaturfokus
Video og lyd skal ha alternativer for mennesker som ikke kan se eller høre. Husk også at video/lydavspilleren som brukes skal være universelt utformet.
Synstolking
Synstolking er å beskrive levende bilder i en video/film. Mennesker som ikke ser eller kan ha problemer med å tolke levende bilder, skal gis informasjon ved hjelp av lyd. Noen ganger foreligger det allerede en voice-over i lydsporet som forklarer det som vises, derfor må det gjøres en skjønnsmessig vurdering om en video trenger synstolking eller ikke.
Det finnes flere varianter av synstolking og måter å oppnå dette på. En veileder for synstolking med eksempler finnes på universell.no.
Tips
- Tenk på synstolking når videoen planlegges for å unngå etterarbeid.
- Lukk øynene når videoen spilles. Går du glipp av viktig informasjon?
- Hvis videoen har synstolking, hvordan får du spilt av dette?
- Kan videoavspilleren brukes uten mus?
Teksting
Et lydspor, for eksempel en podcast, skal ha et tekstalternativ for hørselshemmede. Video med dialog skal ha undertekster. Meningsbærende lyd, for eksempel signal, skal også tekstes.
Det finnes automatisk og egenprodusert teksting. En veileder for teksting finnes på universell.no.
Tips
- Er det enkelt å finne tekstalternativet?
- Er det mulig å skru på undertekster i videoen?
- Går du glipp av noe i tekstingen hvis du skrur av lyden?
Grafiske elementer er viktige virkemidler på web og brukes oftest for
- å skape visuell variasjon (dekor)
- navigasjon (lenker og knapper)
- presentasjon og visuell relevant informasjon til for eksempel artikkeltekst
Du skal tilby et alternativ for de som ikke kan se bilder, eventuelt unngå ekstra "støy" for bilder som er dekor/pynt.
Riktig: Alternativ tekst på dekor/pynt bør unngås
Galt: Alternativ tekst på dekor/pynt skaper ekstra "støy" for skjermleserbrukere.
Tips
- Alle meningsbærende bilder skal ha alternativ tekst. Bruk alt-attributt med korte, enkle beskrivelser:
<img alt="Logo Statens innkreving">
OBS: Unngå filnavn som alternativ tekst. - Dekorative bilder bør skjules for skjermleserbrukere for å unngå "støy". La alt-attributtet stå tomt:
<img alt=""> - Bilder som er lenker skal beskrive målet til lenken, for eksempel:
<img alt="Til skattetetaten.no"> - Grafiske knapper skal også ha en alternativ tekst.
- Bruk uutilsynets løsningsforslag for bilder og grafikk for alternativtekster på bilder.
- Unngå bilder av tekst.
Et enkelt, tydelig språk og tekst med god lesbarhet er veldig viktig på nett.
Skatteetaten har språkprofil og skriveregler og mal for skrifttype i designsystemet.
Noen typiske utfordringer knyttet til tekst og språk på nett kan være:
- For mange ord og lange setninger
- Mye vanskelige og uvanlige ord
- Forkortelser
- For liten tekst, tekst- og linjeavstand
- Spesielle skrifttyper som kan gi dårligere lesbarhet
- Lite beskrivende navn på sider, lenker og knapper
- Manglende kode for språk på hele nettstedet eller deler av tekst på annet språk
Riktig: Skrifttype- og størrelse gir god lesbarhet
Galt: Skrifttype- og størrelse gir dårligere lesbarhet
Tips
- Følg Skatteetatens språkprofil og skriveregler.
- Les Språkrådets tips for klarspråk.
- Tenk på gode, beskrivende sidetitler og tydelige lenke- og knappenavn. Det skal være lett å forstå hvor du er på et nettsted og hva som skjer når du velger lenke/knapp.
- Bruk lang-attributt for å kode nettstedet ditt med et hovedspråk og eventuelle enkelttekster på andre språk, for eksempel et sitat på engelsk (lang=en).
- Velg skrifttyper uten seriffer og unngå tekststørrelse under 9 pt.
- Setninger bør være på 80 tegn eller mindre.
- Sjekk kontrast på tekst og husk at bakgrunnsfarger endrer seg på ulike typer innhold.
God struktur og beskrivende overskrifter på web bidrar til bedre oversikt og raskere navigering.
Overskrifter
Bruk av kodede overskrifter med riktige nivåer sier noe om hvordan siden er organisert og kan brukes til navigering.
Riktig: Gode inndelinger av innhold med riktig hierarki
Galt: Feil hierarki
Tips
- Tenk på hierarki. H2 hører under H1, H3 under H2 og så videre.
- Hvis tekst stiles og brukes til å dele inn/bryte opp, bør det sannsynligvis være en H-tag
- Bruk stiler for oppnå riktig utseende, ikke H-taggen som har det utseendet du ønsker
- Det er vanligvis en H1 i toppen av hovedinnholdet
Annen inndeling og semantikk
Semantiske elementer på en nettside har en betydning utover visuell presentasjon. Bruk slike elementer for å dele opp siden i regioner og for å definere innhold. Hjelpemiddelbrukere har nytte av dette for få en oversikt over hvordan en side er bygget opp og hva den inneholder, og kan også brukes til navigering.
Riktig: Alt innhold inkluderes i logisk sideinndeling
Galt: Innhold ligger utenfor sideinndelingen og inkluderes ikke semantisk.
Tips
- Semantiske elementer som <header>, <nav>, <main>, <footer> og så videre, bør brukes med fornuft for å dele opp ulike deler av siden. For mange inndelinger kan få siden til å fremstå mer kompleks og virke ustrukturert.
- Regioner av samme type, for eksempel <nav> bør navngis for å si hva de ulike inneholder. En vanlig måte å gjøre dette på er bruk av aria-label.
Et vanlig eksempel som gir samme visuelle resultat, men hvor kun det ene elementet har semantisk betydning er <b> og <strong>. Begge gir fet tekst, men kun <strong> formidler dette semantisk.
WCAG: 1.3.1
Skjemaer kan være visuelt og kognitivt utfordrende å bruke for alle. Enkle og tydelige feltnavn, tilby tilstrekkelig hjelp og nøyaktig koding er viktige faktorer for å lykkes med et godt skjema.
Tips
- Vær konkret og ikke spør etter mer enn det du må.
- Gi beskjed om felt er obligatorisk og/eller krever et spesielt format.
- Ha kodet kobling mellom ledetekst og felt, og mellom felt og feilmelding.
- Gjør feltet tydelig visuelt. Du skal lett kunne se hvor du skal skrive inn, krysse av og så videre.
- Placeholder skal ikke erstatte eller være identisk med ledetekst/label, men gi et tips/hint til hva som skal inn i feltet.
- Alle nettsider skal være uten store kodefeil. Skjema er typisk innhold der det er lett å gjøre feil, for eksempel med id-er som ikke er unike.
WCAG: 1.3.1, 1.3.5, 2.4.6, 2.5.3, 3.3.1, 3.3.2, 4.1.1, 4.1.2
Mønsterbibliotek: Obligatoriske felt, Feilmeldinger, Ledetekst
All funksjonalitet skal kunne brukes med kun tastatur, ha logisk rekkefølge og visuelt fokus for at du hele tiden skal kunne se hvor du er. Du skal heller ikke bli låst fast et sted på siden i en såkalt tastaturfelle. Noen typiske utfordringer med tastaturnavigasjon kan være:
- Interne hopp på siden, for eksempel Hopp til hovedinnhold, ruller siden visuelt til riktig sted, men flytter ikke tastaturfokuset.
- Visuelt tastaturfokus mangler på enkelte interaktive elementer.
- Mange løsninger er Single Page Apps og må håndtere fokus "manuelt".
- Tastaturnavigasjon beholdes på elementer som er visuelt skjult, for eksempel en meny som er lukket.
Riktig: Bakgrunns- og tekstfarge endrer seg ved tastaturfokus
Galt: Kun pil som flytter seg ved tastaturfokus.
Tips
- Bruk tabulator og naviger gjennom nettsiden for å sjekke om den følger kravene.
- Husk å teste tastaturfokus i funksjonalitet som åpner/lukker seg, for eksempel menyer og dialogvinduer. Hvor er tastaturfokuset? Må du navigere fra toppen av siden og ned til der du var eller beholdes fokuset på logisk sted?
- Bruk visuelt tastaturfokus på en tydelig og konsistent måte.
WCAG: 1.4.13, 2.1.1, 2.1.2, 2.4.1, 2.4.3, 2.4.7, 3.2.1
Mønsterbibliotek: Single page-applikasjon (SPA)
Du skal kunne bruke nettsider og apper på nettbrett og mobil uten miste informasjon og funksjonalitet, og slippe horisontal rulling/scrolling.
Riktig: Tekst og grafikk plasseres på en måte som sikrer god lesbarhet ved forstørring.
Galt: Lesbarheten blir dårligere fordi elementer overlapper ved forstørring
Tips
- Bruk opptil 400% zoom i nettleser og/eller mobil til å teste på ulike skjermflater.
- Ha et ekstra fokus på testing av menyer og funksjonalitet og lignende, som endrer seg på ulike skjermflater.
Tabeller skal brukes til presentasjon og sammenstilling data, ikke til utseende og layout. Du kan gjerne ha et visuelt alternativ til en tabell, for eksempel bilde eller diagram, men du bør ikke erstatte tabellen.
Tips
- Legg vekt på riktig koding og struktur. Husk at relasjonene er avgjørende for å kunne forstå og navigere på en logisk måte i tabellen.
- Gi tabellen et godt navn med <caption>.
- Har du komplekse data? Se hva du kan gjøre for å forenkle. Kan for eksempel tabellen deles opp?
- Les Utilsynets løsningforslag for tabeller
- WAIs veiledning for tabeller
WCAG: 1.3.1
Mønsterbibliotek: Store tabeller
Det skal være enkelt å bytte mellom faner og navigere til faneinnholdet, og det skal være tydelig hvilken fane som er valgt. Rammer (iframes) brukes typisk til videoavpillere og skal navngis.
Tips
- Tenk på tastaturnavigasjon når du lager faner.
- Husk at kun endring av bakgrunnsfarge på valgt fane ikke tilstrekkelig
- Ha et kodet alternativ for å si hvilken fane som er valgt
- W3s eksempel på faner
- Gi gode, beskrivende navn til rammer ved hjelp av title-attributt.
Innhold som endres og oppdateres automatisk på web, for eksempel statusbeskjeder eller chat, kan kreve ekstra fokus for å sikre at alle får med seg endringene. Koding med WAI-ARIA og fortløpende testing er viktig for å lykkes.
Tips
- Riktig koding med WAI-ARIA bør ha et ekstra fokus
- Legg vekt på hyppig testing under utvikling