Universell utforming vil sørge for at alle kan bruke nettsiden din, uansett forutsetninger. Alle nettsider og apper skal være tilrettelagt mennesker med funksjonsnedsettelser ved å lage teknologiske løsninger som fungerer for alle. Dette er helt nødvendig for noen, men bra for alle.
Universell utforming
Fra 1.januar 2021 må alle nettsider være universelt utformet (UU). Lurer du på hvordan du skal få til universell utforming av tekst, bilder eller video? Vi gir deg en gjennomgang av de viktigste punktene du må tenke på fremover, går gjennom fordelene for brukerne og virksomheten, forteller hva kravene betyr for din bedrift, og gir tips til hvordan dere kan lykkes.
Diskriminerings- og tilgjengelighetsloven krever at nettløsninger er universelt utformet fordi vi ønsker at alle skal kunne delta, også på den digitale arenaen. Universell utforming gjelder alle typer nettløsninger, Facebook og sosiale medier, samt apper. Vi må presisere at dette gjelder for bedriftsprofiler og ikke privat. Dersom din virksomhet kun driver med salg rettet mot andre bedrifter (B2B) vil kravene også gjelde. Ideen med UU er å lage en løsning som flest mulig kan bruke med minst mulig spesialløsninger ved siden av. Kravene til nettløsninger er beskrevet i WCAG 2.0.
Trenger du hjelp med nettsiden? Vi sørger for at nettsiden din blir optimalisert mot Google og følger kravene om universell utforming. Kontakt oss, så slår vi av en prat angående dine behov.
WCAG 2.0
WCAG er en internasjonal standard som gir retningslinjer for å gjøre innhold på nett tilgjengelig for alle mennesker, spesielt dem med nedsatt funksjonsevne av varierende grad. Forskrift om universell utforming av IKT sier at nettsider må oppfylle 35 av 61 suksesskriterier i WCAG-standarden.
Hovedprinsippene i WCAG 2.0 er at nettsiden skal være mulig å oppfatte, betjene og forstå. WCAG skal også sikre at innhold fungerer på alle enheter. Difi kontrollerer at kravene følges ved å føre tilsyn. Dersom et nettsted ikke følger kravene, vil Difi kreve retting og kan ilegge bøter.
Fordeler med UU
Det er vanskelig å argumentere mot UU når man ser alle fordelene som kommer med universell utforming av nettsiden.
Universell utforming er hovedsakelig positivt for bedriften din. Du når ut til mangfoldet med innholdet ditt og får anledning til å kommunisere med alle. Ved å tilpasse nettsiden etter universell utforming gjør du nettsiden din mer inkluderende, enklere å bruke (for alle), mer mobiltilpasset, synlig for Google og mer lønnsomt for deg. Visste du at rundt 20% av den norske befolkningen opplever utfordringer på nettet? Dette tilsvarer 1 million brukere og potensielle kunder for din bedrift. Med god informasjonsstruktur, enkel navigasjon og standardisert kode gjør du nettsiden enklere å bruke for alle.
Har du spørsmål om universell utforming? Kontakt oss, så hjelper vi deg med det du lurer på.
Kom i gang med universell utforming
Under følger en liste over de viktigste punktene du bør vite før du går i gang med universell utforming av nettsiden din. Det kan ta litt tid å sette seg inn i alle kravene, men det er helt nødvendig for å få en nettside som er mer brukervennlig for alle. Syns du kravene er vanskelige å sette seg inn i, kan du ta kontakt med oss, så hjelper vi deg med hele eller deler av utformingen.
Overskrifter
Marker overskrifter og underoverskrifter med riktige koder og nivåer. Hovedoverskriften bør markeres som H1 (Header 1). Deretter markerer du de følgende underoverskriftene med H2 eller H3. Nivåene av underoverskrifter bør ha en logisk rekkefølge. Du velger overskriftsnivå i editoren i programmet ditt eller direkte i HTML. Overskriftsnivåer er viktige av flere årsaker. Først og fremst vil det bli enklere å navigere på siden. Det er vanlig å skumme gjennom innlegg for å finne det som er interessant. Gode overskrifter gir bedre oversikt, sparer oss tid og gjør teksten lettere å lese. De som bruker skjermleser «skumleser» også gjennom teksten. For at skjermleseren skal kunne tolke innholdet på siden og lese av overskrifter raskt, er det viktig at du koder overskriftene med riktig kode, og ikke bare bruker fet tekst for å markere en overskrift. God praksis er at du ikke hopper over nivåer, som å gå fra H1 til H3, og målet er å gjøre nettsiden enkel å navigere, også for skjermlesere.
Bilder og alt-tekst
Det sies at bilder sier mer enn tusen ord, og vi bruker bilder i mange ulike sammenhenger. God innholdsmarkedsføring inkluderer ofte infografikk eller bilder sammen med tekst. Bilder kan forsterke budskapet og mange har stor nytte av mer enn bare tekst, for eksempel personer med dysleksi. Dessverre kan ikke alle se bilder, symboler eller ikoner og har behov for beskrivelser. Derfor må vi alltid ha et alternativ med tekstforklaring til bildene, en alt-tekst som beskriver innholdet eller funksjonen til bildet. En skjermleser finner alt-teksten og leser den opp. Du kan ha ulik alt-tekst på samme bildet avhengig av konteksten. Alt-teksten skal gi en kort beskrivelse av hva som skjer på bildet, uten å gjenta innholdet i teksten på nettsiden.
Der bildet er en del av designet og ment som pynt, skal alt-teksten være tom. Bildet har ingen betydning for budskapet og en skjermleser bør ignorere bildet. Hvis bildet er lenket, må alt-teksten beskrive formålet med lenken, ikke innholdet i bildet. Dersom du kan klikke på logoen for å komme til startsiden, kan en passende alt-tekst være «til startsiden».
Husk på at tekst i bilder (som for eksempel i diagrammer eller infografikk) ikke blir lest opp av skjermlesere. Derfor må denne teksten også stå som tekst utenfor bildet for å beskrive innholdet.
Lenker
Lenker knytter nettsider sammen og er en av kjernefunksjonene på et nettsted, både for å få brukere videre inn på siden din, men også for å opplyse om kilder eller viktige nettsider for den aktuelle saken. Det er viktig at lenker blir oppfattet som lenker, og for å understreke dette må du sørge for at lenker er markert med mer enn bare farge, for eksempel understreking, fet tekst eller et ikon. Lenketeksten må også ha god kontrast til brødteksten, dette løser du gjennom designet og bør ligge i CSS. For å oppnå god brukervennlighet for alle er det viktig å lage fullt ut beskrivende lenketekster som kan stå alene. Da vet brukeren hva lenken gjelder før de velger å gå videre.
Du bør ikke dele opp lenken: «les mer om digital markedsføring her». Skjermlesere som får beskjed om å lese opp alle lenker på siden kun vil lese «her» i dette eksempelet. Dette gir ingen kontekst for hva lenken handler om eller hvor lenken fører til. Et bedre eksempel er «her kan du lese mer om digital markedsføring fra Blink Marked».
Farge og kontrast
Svaksynte, fargeblinde og dyslektikere har nytte av god kontrast og rett fargebruk, men under krevende forhold kan alle ha nytte av det. Tekst og grafiske elementer må ha nok kontrast mot bakgrunnen slik at innholdet enkelt kan leses. Krav til kontrast avhenger av størrelsen på teksten. Kontrastkravet for stor tekst er 3 til 1. Kontrastkravet for liten tekst er 4,5 til 1. Tekststørrelse kan være vanskelig å vurdere, så en huskeregel er at stor tekst er dobbelt så stor som brødtekst. Alt annet er liten tekst.
Du bør tenke på at brødteksten skal ha god kontrast mot bakgrunnen.
Video og lydklipp
Video med lyd skal være tekstet. Tekstingen skal gjengi tale og viktige lydeffekter. Tekstingen kan også inneholde informasjon om hvem som snakker. Dersom det ikke er mulig å tekste videoen, må du ha en tekst som beskriver innholdet. Denne teksten må gi nok informasjon til å forstå budskapet. Lydklipp skal også ha en tekst som beskriver innholdet.
Dokumenter
Dokumenter som det lenkes til skal også være universelt utformet. Når tekstfiler (PDF eller regneark) ikke lages med tanke på UU, blir dokumentene uleselige for de som bruker hjelpemidler. Noe av det du må huske på er rett bruk av stiler, overskrifter, gode kontraster, tabellstruktur og alt-tekst på bilder.
Når du lager et tilgjengelig dokument bør du ha UU i bakhodet. De fleste tekstbehandlingsprogrammer har funksjonalitet for å lage tilgjengelige dokumenter med ferdige stiler som tilsvarer stiler i HTML. Lag en god struktur som gjør at innholdet blir lest opp riktig av hjelpemidler. I Word kan du sjekke hvor tilgjengelig dokumentet er. Gå på Fil -> Undersøk dokument -> Kontroller tilgjengelighet. Du får opp en tilgjengelighetsrapport som forteller hva som eventuelt mangler slik at du kan rette opp i dette.
De viktigste punktene oppsummert:
- Det skal være beskrivelser av bilder. Dersom du bruker skjermleser, skal du få lest opp hva som er på bildet.
- Sørg for at lenker er markert med mer enn bare farge.
- Videoer skal være tekstet eller ha mulighet til å skru på teksting.
- En side som har riktige overskriftsnivåer og gode alt-tekster vil automatisk vises høyere i søkeresultater på Google.
- Du bør tenke på at brødteksten skal ha god kontrast mot bakgrunnen.
- Tabeller skal utformes på en forståelig måte med overskrifter.
- Lister gjør informasjonen strukturert, men sørg for at disse er kodet slik at en skjermleser klarer å fatte informasjonen som punkter, og ikke leser opp punktene som om de utgjør en setning.
- Dokumenter som det lenkes til skal også være universelt utformet.
- Bruk klart, enkelt og forståelig språk. Dette er en fordel for alle, men spesielt dem med lese- og skrivevansker, nedsatt korttidshukommelse og dem som har norsk som andrespråk. Du finner en miniguide til å skrive forståelig på Difi.no.
- Angi rett språk på nettsiden. En skjermleser velger hvilken stemme de skal bruke ut fra språket som er angitt. Riktig språk hjelper også Google å avgjøre om innholdet er relevant i et søk.
- Bruk god informasjonsstruktur. Dersom en bruker ikke finner det de leter etter kjapt, vil de gå ut av siden din for å finne informasjon andre steder. Derfor må informasjon organiseres på en logisk og god måte. Med god informasjonsstruktur menes menyvalg, og samsvar mellom hovedoverskrifter og innhold. Unngå å ha samme informasjon på forskjellige steder på siden da det kan forvirre brukere.
Lurer du på hvordan det står til med UU på dine nettsider? Bruk denne sjekklisten for å finne ut av det selv:
1. Tastaturnavigering
Sørg for at nettsiden kan navigeres med tastatur, helt uten mus eller berøring. Viktige taster å merke deg er Tab, piltaster og enter.
2. Forstørring og responsiv design
Sjekk at det er mulig å zoome inn på siden. For personer med nedsatt syn er det en enkel metode å få større tekst på nettsiden. Vanlige problemer med forstørring er at innholdet legger seg bak andre ting og at bare deler av innholdet vises. Det skal være mulig å gjøre teksten dobbelt så stor. Med responsiv design vil innholdet på nettsiden tilpasses skjermstørrelsen etter hvilken plattform du bruker.
3. Farge og kontrast
Du kan teste kontrasten på nettsiden din med gratisverktøy. Et godt alternativ er Colour Contrast Analyser.
4. Overskrifter og overskriftsnivå
Sjekk om teksten på nettsiden er strukturert med overskrifter, og at teksten er lett å skumlese og orientere seg i. Legg inn flere mellomoverskrifter dersom teksten virker lang og tung å lese.
5. Lenker og lenketekster
Sjekk at lenker på nettsiden er tydelig markert med mer enn farge. Lenkene skal også ha en forklarende lenketekst. Hvis du forstår hvor lenken leder kun ut fra lenketeksten er lenken godkjent.
6. Bilder og alt-tekster
Du må sjekke at bilder som er vesentlig for innholdet har alt-tekst som beskriver innholdet i bildene. Du kan raskt finne ut av dette dersom du høyreklikker på et bilde på siden din og velger «Inspiser».
7. Søkefunksjon
Sørg for at søk på siden din fungerer på en god måte. Dette er for mange det mest brukte alternativet når det gjelder å finne informasjon, så det er viktig at det er enkelt å finne og gjennomføre. Søkefunksjonen skal også søke gjennom hele nettstedet.
8. Sidetitler og URL
Sidetittel står øverst i vinduet og URL presenteres i fanen i nettleseren. Disse hjelper brukeren med å finne riktig nettleserfane. Sørg for at det er samsvar mellom tittel og URL. Helst skal siden starte med en beskrivelse av innholdet, og slutte med navnet på nettstedet eller bedriften.
Trenger du hjelp?
Vi vet at universell utforming kan være utfordrende. Ta kontakt med oss, så hjelper vi deg!
