Universell utforming (UU) for nettsider: Krav og guide

Universell utforming (UU) av nettsider betyr at alle skal kunne bruke nettsiden din, uavhengig av funksjonsevne. Det inkluderer personer med nedsatt syn, hørsel, motorikk eller kognitive utfordringer.

I praksis handler det om å designe og kode nettsider slik at de fungerer med:

• Skjermlesere: Programvare som leser opp innholdet for blinde og svaksynte
• Tastaturnavigasjon: For de som ikke kan bruke mus
• Forstørring: For svaksynte som zoomer inn
• Ulike enheter: Mobil, nettbrett, desktop med forskjellige skjermstørrelser

Men universell utforming gagner alle brukere. Tydelig tekst, god kontrast, logisk navigasjon og rask lasting gjør nettsiden bedre for absolutt alle — og det forbedrer også konverteringsraten.

I Norge bruker rundt 18% av befolkningen hjelpemidler eller har behov som krever tilgjengelige nettsider. Det er nesten én av fem potensielle kunder du risikerer å ekskludere uten universell utforming.

Norge har noen av verdens strengeste krav til universell utforming av nettsider. Her er det du må vite:

Likestillings- og diskrimineringsloven

Alle virksomheter rettet mot allmennheten har plikt til å sikre universell utforming av sine IKT-løsninger, inkludert nettsider og apper.

Forskrift om universell utforming av IKT

Forskriften krever at nettsider oppfyller WCAG 2.1 nivå AA. Dette gjelder:

• Alle nye nettsider fra opprettelsesdato
• Eksisterende nettsider for virksomheter rettet mot allmennheten
• Intranett og ekstranett ved vesentlig oppgradering

EUs tilgjengelighetsdirektiv (European Accessibility Act)

Fra 2025 gjelder EUs tilgjengelighetsdirektiv også i Norge gjennom EØS-avtalen. Dette utvider kravene til å dekke flere digitale tjenester, inkludert netthandel og bankløsninger.

Konsekvenser av brudd

Digitaliseringsdirektoratet (Digdir) fører tilsyn og kan ilegge dagbøter ved brudd. I tillegg risikerer du omdømmeskade og tap av kunder som ikke kan bruke nettsiden din.

WCAG (Web Content Accessibility Guidelines) er den internasjonale standarden for tilgjengelige nettsider. WCAG 2.1 nivå AA er kravet i Norge, og bygger på fire prinsipper:

1. Mulig å oppfatte (Perceivable)

Informasjon og brukergrensesnitt må presenteres slik at brukere kan oppfatte det:

• Alt-tekst på alle bilder som formidler informasjon
• Teksting av video og lydinnhold
• Tilstrekkelig fargekontrast (minimum 4,5:1 for vanlig tekst)
• Innhold som kan forstørres til 200% uten tap av funksjonalitet

2. Mulig å betjene (Operable)

Brukergrensesnitt og navigasjon må kunne betjenes:

• All funksjonalitet tilgjengelig via tastatur
• Nok tid til å lese og bruke innholdet
• Ingen innhold som blinker mer enn 3 ganger per sekund
• Mulighet til å hoppe over repeterende innhold (skip-lenker)

3. Mulig å forstå (Understandable)

Informasjon og betjening av brukergrensesnitt må være forståelig:

• Språkkode definert i HTML (lang="nb")
• Tydelige og konsistente feilmeldinger i skjemaer
• Konsistent navigasjon på tvers av sider

4. Robust

Innhold må være robust nok til å tolkes av ulike brukeragenter, inkludert hjelpemiddelteknologi:

• Gyldig HTML-kode
• Riktig bruk av ARIA-attributter
• Semantisk HTML (bruk <nav>, <main>, <header> osv.)

De fleste brudd på WCAG-kravene skyldes noen gjengangere. Her er de vanligste feilene og hvordan du fikser dem:

1. Manglende alt-tekst på bilder

Alle informative bilder trenger en beskrivende alt-tekst. Dekorative bilder skal ha tom alt-tekst (alt=""). Skjermlesere leser opp filnavnet hvis alt-tekst mangler — noe som gir en elendig brukeropplevelse.

2. For lav fargekontrast

Lys grå tekst på hvit bakgrunn er en gjenganger. WCAG krever minimum 4,5:1 kontrast for vanlig tekst og 3:1 for stor tekst. Bruk verktøy som WebAIM Contrast Checker for å teste.

3. Skjemaer uten labels

Hvert skjemafelt må ha en synlig <label> knyttet til feltet. Placeholder-tekst er ikke en erstatning for labels — den forsvinner når brukeren begynner å skrive.

4. Manglende tastaturnavigasjon

Alle interaktive elementer (lenker, knapper, menyer) må kunne nås og betjenes med tastatur. Test ved å navigere gjennom hele nettsiden med bare Tab-tasten.

5. Dårlig overskriftstruktur

Bruk overskrifter (h1-h6) i riktig hierarki. Ikke hopp fra h1 til h4. Skjermlesere bruker overskrifter for å navigere i innholdet.

Bruk denne sjekklisten for å vurdere tilgjengeligheten til nettsiden din:

Grunnleggende (gjør dette først)

• Alle bilder har beskrivende alt-tekst
• Fargekontrast oppfyller minimumskravene (4,5:1)
• Alle skjemafelt har synlige labels
• Nettsiden kan navigeres fullt ut med tastatur
• Språkkode er satt i HTML-elementet
• Sidene har en logisk overskriftstruktur

Videregående

• Skip-lenke til hovedinnhold er implementert
• ARIA-attributter brukes korrekt der semantisk HTML ikke strekker til
• Video har teksting og lydbeskrivelse
• Feilmeldinger i skjemaer er tydelige og beskrivende
• Siden fungerer godt ved 200% forstørring
• Fokusindikator er tydelig synlig på alle interaktive elementer

Testing

• Test med tastaturnavigasjon (Tab gjennom hele siden)
• Test med skjermleser (NVDA er gratis for Windows, VoiceOver er innebygd på Mac)
• Kjør automatisk test med WAVE eller axe DevTools
• Test med ulike skjermstørrelser og forstørringsgrader

Her er verktøyene du trenger for å teste og forbedre tilgjengeligheten:

Gratis testverktøy

• WAVE (wave.webaim.org): Nettleserutvidelse som visualiserer tilgjengelighetsfeil direkte på siden. Enkel å bruke og gir tydelige forklaringer.
• axe DevTools: Nettleserutvidelse fra Deque som finner WCAG-brudd. Brukes av utviklere over hele verden.
• WebAIM Contrast Checker: Sjekker fargekontrasten mellom tekst og bakgrunn. Oppgir om den oppfyller WCAG AA og AAA.
• Lighthouse (Chrome DevTools): Innebygd i Chrome — gir en tilgjengelighetsscore og konkrete forbedringspunkter.

Skjermlesere for testing

• NVDA: Gratis skjermleser for Windows. Last ned fra nvaccess.org.
• VoiceOver: Innebygd i macOS og iOS. Aktiver via Systeminnstillinger.

Tilsynets verktøy

• Digdir sin tilgjengelighetserklæring: Alle virksomheter skal ha en tilgjengelighetserklæring. Digdir har verktøy for å opprette og publisere denne.

Universell utforming trenger ikke å være vanskelig eller dyrt. Start med de grunnleggende tiltakene, og bygg videre derfra. Kontakt Ledra hvis du ønsker hjelp med å gjøre nettsiden din tilgjengelig for alle.