Sjekkliste for universell utforming av nettsider

Universell utforming, hva var når det igjen? Er det virkelig noe du trenger å bry deg om?

Kort fortalt: Ja!

Du bør ikke bare bry deg, du må! Det er faktisk et lovkrav.

Men det handler om mer enn å bare følge loven. Det dreier seg om å tilrettelegge for flest mulig i samfunnet, og skape like muligheter for alle. Det handler om at du faktisk er med på å motvirke diskriminering på grunn av nedsatt funksjonsevne.

Og det vil du vel være med på?

Hva er universell utforming?

Universell utforming sikrer at alle brukere, uansett forutsetninger, enkelt og effektivt kan benytte seg av nettsider, apper og automater i hverdagen. Dette kravet er nedfelt i forskriften om universell utforming av IKT-løsninger. Både private og offentlige virksomheter, lag og organisasjoner må følge regelverket.

I Norge er det minimumskrav for nettløsninger og automater (Web Content Accessibility Guidelines - WCAG). Og ja, nettsider inngår I nettløsninger. Offentlig sektor har 48 krav de må forholde seg til, privat sektor har 35. Du finner WCAG-kravene her.

Sjekkliste for universell utforming etter WCAG-standarden

De 10 punktene i sjekklisten under dekker ikke hvert eneste av de 48 eller 35 kravene i WCAG – standarden, men de vil hjelpe deg et godt stykke på veien.

1 - Tastaturnavigering ⌨️

Mange brukere er avhengige av tastatur for navigasjon, inkludert de med motoriske funksjonsnedsettelser og de som bruker opplesningshjelpemidler.

Sjekk hvordan din nettside fungererer med tastatur ved å trykke på tab-tasten gjentatte ganger og evaluere følgende:

• Er det snarveileinke fra starten av siden og ned til hovedmålet?
• Er det tydelig fokusmarkering på alle steg?
• Virker tabb-rekkefølgen logisk og naturlig?
• Kommer du innom alle objekter med funksjonalitet som skjemaer og lenker?
• Skjer det som skal skje når du trykker enter?
• Når brukeren gjør endringer i grensesnittet, som å utvide eller skjule seksjoner eller åpne popup-vinduer, flyttes fokus automatisk til det første feltet eller lenken i det nye området? Hvis det ikke skjer automatisk, skal et trykk på Tab-tasten flytte fokus dit.

Sjekk ut: Ta testen - hvor godt fungerer nettsiden din?

2 - Førstørring og responsivt design 🔎

Slik tester du:

1. Sett nettleseren i fullskjerm på den største skjermen du har. Bruk zoomfunksjonen (Ctrl og +/- eller Cmd og +/-) til minst 200%, helst opp til 400%. Sjekk at alt innhold er tilgjengelig og forståelig.
2. Sett zoom tilbake til 100%. Endre vindusbredden fra fullskjerm til det smaleste mulig. Sjekk at layouten fungerer godt hele veien.
3. På mobil eller nettbrett: sjekk at du kan forstørre på sider med responsivt oppsett.

Les også: Prioriter alltid mobil først når du skal markedsføre B2B

3 - Farger og Kontrast 🎨

God kontrast mellom tekst og bakgrunn er viktig for personer med nedsatt syn, lesevansker, kognitive utfordringer og for alle under dårlige lysforhold.

Sjekk:

• Er lenker i løpende tekst markert med mer enn bare farge fra teksten rundt?
• Er det god kontrast mellom tekst og bakgrunn (minimum 3:1 for stor tekst, 4,5:1 for vanlig tekst)?

Les også: Bildestørrelser i sosiale medier - hva er riktig?

4 - Overskrifter 📖

Overskrifter gjør teksten enklere å navigere. Riktig koding av overskrifter hjelper dine brukere med opplesingsverktøy å navigere mellom dem på nettsiden.

For å teste: 

• Gå inn på utvalgte sider på nettsiden din og les gjennom tekstene. Finner du punkter der du faller av, eller savner du mer oversikt av hva en tekstseksjon inneholder? Da bør du gjerne vurdere flere mellomtitler.
• Sjekk om du bruker korrekte overskriftselementer (<h1> til <h6>).
• Se om overskriftene er hierarkisk logiske uten å hoppe over nivåer (for eksempel rett fra H1 til H3). Dette er både dårlig for din søkemotorsoptimalisering (SEO), og for brukere med skjermleser.

Les også: Godt språk skaper tillit i digital B2B markedsføring

5 - Lenker 🔗

Lenker må være synlige uansett fargesyn, lysforhold eller nettleserinnstillinger. Det skal også være tydelig når en lenke har fokus ved tastaturnavigering og når musepekeren holdes over den.

Tenk på dette når du sjekker:

• Er lenker i teksten understreket eller markert tydelig på en annen måte enn bare farge?
• Er lenker utenfor hovedteksten tydelig markert med design eller ikoner, slik at det er lett å se at de kan klikkes?
• Endrer lenkene utseende (for å vise at de kan klikkes) når du peker på dem med musen?
  
  
  

6 - Bilder 📷

Alt-tekst er viktig for søkemotoroptimalisering (SEO) fordi det gir kontekst for bildesøk og hjelper søkemotorer som Google med å bedre forstå og rangere bildene dine i søkeresultatene. Med Googles lansering av Search Generative Experience (SGE), øker god alt-tekst sjansen for at innholdet ditt blir funnet av det nye AI-drevne søket. Alt-tekst hjelper også brukerene dine i ulike situasjoner, som for eksempel en lastefeil på grunn av dårlig tilkobling eller feil i bilde-URLen, og er svært viktig for personer med nedsatt syn.

Still deg selv følgende spørsmål:

• Har alle bilder alternativ tekst som beskriver motivet eller lenkemålet på en god måte?

Les også: Synlig på Google: hva er forskjellen på SEO og SEM?

7 - Skjema 📄

Korrekt koding av skjema er viktig for dem som ikker ser grensesnittet, og de med nedsatt motorisk presisjon eller kognitive utfordringer.

Sjekk følgende:

• Skjemafelt: Når du klikker på ledeteksten, blir feltet aktivt? Da er koblingen korrekt.
• Radioknapper og avkrysningsbokser: Når du klikker på ledeteksten, krysser det av I radioknappen eller avkrsyningsboksen? Da er koblingen korrekt.

8 - Søkefunksjon 👩‍💻

Søkefunksjonen er ofte det mest brukte verktøyet for å finne informasjon. Derfor er det viktig at den fungerer godt.

Bruk søkestatistikken for å se hva folk søker etter og bruk dette for testing:

• Test vanlige søkefraser for å sikre at resultatene viser det de burde.
• Søk etter ord du vet har egne sider på nettstedet ditt. Kommer hovedsiden for dette ordet øverst i resultatene?
• Hjelper søkefunksjonen ved feilstaving av søkeord?
• Er det mulig å filtrere resultatene?
• Søk på kombinasjoner av ord og sjekk om det gir færre men mer presise treff eller flere og mindre presise.
  
  

9 - Sidetitler 📚

Sidetittelen vises øverst i vinduet eller fanen i nettleseren, hjelper brukeren å finne riktig fane, og brukes som navneforslag ved lagring av bokmerker eller favoritter.

Dobbelsjekk om:

• Nettleserfanen starter med en beskrivelse av sidens innhold?
• Nettleserfanen slutter med navnet på nettsiden eller bedriften din?
  
  
  

10 - Få hjelp fra eksperter 🆘

Det kan være vanskelig å huske på absolutt alt.

Her har du noen eksperter og hjelpemidler du kan lene deg på:

• Tilsynet for universell utforming av IKT hos Digitaliseringsdirektoratet har en side med eksempler og løsningsforslag for å møte lovkravene. Du finner løsningsforslag etter tema her. Du finner løsningsforslag for å møte hvert av de 48 kravene I WCAG-standarden.
• Tilsynet for universell utforming av IKT tilbyr også testprosedyrer som du kan bruke for å sjekke om nettsiden din er universelt utformet. Den finner du her.

• Colour coder analyzer lar deg finne graden av kontrast mellom element på nettsiden din, I tillegg får du vite om kontrastgraden tilfredsstiller de ulike kravene for stor og liten skrift, og hva fargekoden til innholdet du har markert er.
• W3C HTML Validator sjekker om koden er I tråd med kravene for den nyeste versjonen av HTML.
• Accessibility Tree lar deg se hvilke informasjon din nettside gir til hjelpemiddelteknologi, som skjermlesere.
• Siteimprove accessibility Checker er en tilgjengelighetssjekker fra Chrome som gir deg oversikt over hvor tilgjengelig nettsiden din er. Det fine med den er at den også gir forklaringer og løsningsforslag for hvordan du fikser eventuelle problemer.
• Nav IT deler både kunnskap og komponenter på nettsiden deres Aksel.
• A11Y-prosjektet er et samfunnsdrevet initiativ for å gjøre digital tilgjengelighet enklere.
  
  
  

Oppsummering

Sørg for at dine nettsider er tilgjengelige for alle, uavhengig av funksjonsevne.

Ved å sjekke nettsiden din opp mot de 10 punktene i sjekklisten kommer du langt på veien mot en nettside som er tilgjengelig, brukervennlig og intuitiv for flest mulig.