Gode eksempler på universell utforming er tekst med kontrast på minst 4,5:1, skjemafelt med synlig ledetekst, meny som virker med tastatur, bilder med beskrivende alt-tekst og video med teksting. I Norge er WCAG 2.1 nivå AA forskriftsfestet, og de fleste feilene kan rettes uten at nettstedet bygges på nytt.
Når noen spør etter eksempler på universell utforming, er de sjelden ute etter en definisjon. De vil vite: hva på min nettside bryter reglene, hvor alvorlig er det, og hva koster det å rette? Denne artikkelen gir deg konkrete, etterprøvbare eksempler — slike du kan sjekke i løpet av en formiddag — koblet til de kravene som faktisk gjelder i Norge. Vi går også gjennom hva vi i Box ser oftest når vi tar over drift av et eksisterende nettsted, og hvor mye av jobben som faktisk hører hjemme i et helt nytt prosjekt kontra i vanlig vedlikehold.
Hva som gjør noe til et godt eksempel på universell utforming
Et eksempel på universell utforming er ikke «noe pent for svaksynte». Det er en helt konkret designbeslutning som gjør at flere klarer å fullføre en oppgave — lese en pris, fylle ut et kontaktskjema, finne åpningstidene. Regelverket er tallfestet: forskrift om universell utforming av IKT-løsninger peker på WCAG 2.1 nivå AA som norsk standard, og gjelder nettløsninger som retter seg mot allmennheten — altså også helt ordinære bedriftsnettsteder med kontaktskjema og nettbutikk. Det er ikke et krav som bare gjelder kommuner og offentlige etater, og det er den misforståelsen vi møter oftest.
Selve kriteriene finner du i W3C sin dokumentasjon av WCAG 2.1, der hvert krav har et nummer og en testbar formulering. Det er en fordel: i stedet for diskusjoner om smak kan du si «dette bryter 1.4.3 Kontrast» og måle det. Vi bruker samme logikk når vi gjør en teknisk gjennomgang av et nettsted — funnene skal være etterprøvbare, ikke meningsbaserte. Og omfanget er reelt: i WebAIM sin årlige gjennomgang av en million forsider hadde 94,8 % av sidene i 2025 feil som kan oppdages automatisk, med i snitt 51 feil per side. Dette er altså ikke et lite mindretall av dårlige nettsteder — det er normalen.
Tolv eksempler på universell utforming du kan sjekke i dag
Tekst, farger og kontrast
- Brødtekst i mørk grå (#333) på hvit bakgrunn i stedet for lys grå (#999) — kravet er minst 4,5:1 i kontrast for vanlig tekst, og 3:1 for store overskrifter og grafiske elementer som ikoner og skjemarammer.
- Knapper der teksten fortsatt er lesbar når du holder musen over: hover-tilstanden er like ofte for lys som utgangspunktet.
- Lenker i løpende tekst som er understreket eller markert på annen måte enn kun farge — fargeblinde skal også se at det er en lenke.
- Tekst som tåler 200 % zoom uten at innhold forsvinner ut av skjermen, og som flyter om når vinduet er smalt som en mobil i stående format.
Navigasjon, tastatur og fokus
- Du kommer gjennom hele hovedmenyen med Tab-tasten, og du ser hvor du er hele veien — synlig fokusmarkering er et eget krav (2.4.7), og det er det aller vanligste som blir designet bort fordi «den stygge blå rammen» irriterer noen.
- Mobilmenyen lar seg lukke med Escape, og fokus havner ikke bak den lukkede menyen.
- En «hopp til hovedinnhold»-lenke øverst, slik at skjermleserbrukere slipper å tabbe gjennom 30 menypunkter på hver eneste side.
- Informasjonskapsel-banneret kan betjenes med tastatur og stenger ikke innholdet for skjermlesere. Dette henger tett sammen med hvordan du håndterer samtykke i personvernerklæringen.
Skjema, bilder og video
- Kontaktskjema der hvert felt har en synlig ledetekst over feltet — ikke bare en plassholdertekst som forsvinner i det du begynner å skrive.
- Feilmeldinger som sier hva som er galt og hvordan det rettes («E-postadressen mangler @»), ikke bare et rødt felt.
- Alt-tekst som beskriver innholdet i bildet der det bærer informasjon, og tom alt-tekst på rent dekorative bilder. Et produktbilde av en varmepumpe skal ikke ha alt-teksten «IMG_2043».
- Undertekster på video, og transkripsjon der video brukes til å forklare en tjeneste. Dette er et eksempel på universell utforming som også gir gevinst i søk, fordi teksten blir lesbar for søkemotorer.
Legg merke til at ingen av disse tolv eksemplene krever at du bytter plattform. De handler om komponenter, ikke om systemvalg. Skal du likevel bygge nytt, er det langt billigere å legge kravene inn i designsystemet med én gang — vi tar alltid med kontrastpaletter, fokusstiler og skjemamønstre når vi setter opp designet for en ny nettside, rett og slett fordi det koster nesten ingenting i starten og mye i etterkant. Den fulle oversikten over hva regelverket krever, har vi samlet i artikkelen om kravene til universell utforming.
Eksemplene som oftest svikter på norske SMB-nettsteder
Det vi ser oftest når vi overtar et eksisterende nettsted, er ikke eksotiske brudd. Det er fire gjengangere: for lys tekst i «moderne» maler, fokusmarkering som er slått av i CSS, skjemafelt uten ledetekst, og bildekarusell på forsiden som skifter av seg selv uten pause-knapp. Alle fire stammer fra ferdige temaer der designet er laget for skjermbilder, ikke for bruk. Det samme gjelder mobilvisningen: mange nettsteder er responsive i den forstand at de skalerer, men klikkflatene ligger så tett at de er vanskelige å treffe. Forskjellen på ekte og tilsynelatende responsivt webdesign er nettopp om innholdet fortsatt lar seg bruke når det blir smalt.
I tekniske SEO-gjennomganger hos Box er de tre vanligste funnene manglende eller feil canonical-tagger, uoptimaliserte bilder og treg mobil-lastetid — alle tre er normalt løst på under en arbeidsdag.
To av disse tre funnene berører tilgjengelighet direkte. Uoptimaliserte bilder er nesten alltid bilder ingen har rørt siden opplasting, og da mangler de som regel alt-tekst også. Treg mobil-lastetid rammer hardest de som har dårligst utstyr eller nett — og tregt innhold som hopper rundt mens det lastes, er et reelt tilgjengelighetsproblem, ikke bare et irritasjonsmoment. Vi behandler derfor tilgjengelighet og teknisk søkemotoroptimalisering i samme gjennomgang, fordi funnene overlapper så mye at det er sløsing å gjøre to runder.
Hva koster det å rette opp — og hva bør ligge i budsjettet?
Kostnaden avhenger av én ting: om feilene sitter i innholdet eller i selve malen. Sitter de i innholdet — manglende alt-tekster, overskrifter brukt som skrifttyper, PDF-er lenket uten forklaring — er det ryddearbeid som en innholdsansvarlig kan gjøre selv, gjerne fordelt over noen uker. Sitter de i malen, som lys tekstfarge gjennom hele designet eller fokusstiler fjernet globalt, er det en utviklerjobb, men den er som regel avgrenset: du endrer noen få variabler og komponenter, ikke hver enkelt side. Det er først når nettstedet er bygget uten semantisk struktur i det hele tatt — der alt er div-er og ingenting er knapper — at prisen begynner å ligne på et nytt prosjekt. Vi går gjennom nivåene i artikkelen om hva en nettside koster.
Etter Lighthouse-optimalisering (bildekomprimering, caching, opprydding i skript) forbedres ytelsesscore hos Box sine kunder typisk fra under 55 til over 80.
Lighthouse er også verktøyet vi bruker for å få et første, grovt bilde av tilgjengelighetsnivået. Husk likevel at automatiske tester bare fanger en del av kriteriene — resten må testes manuelt med tastatur og skjermleser. Vår erfaring er at automatisk testing finner de billige feilene, mens de dyre ligger i navigasjonsmønstre som ingen har prøvd uten mus. Vi anbefaler derfor at du setter av tid til manuell testing i stedet for å kjøpe et verktøyabonnement som gir deg en grønn score uten at noen faktisk har prøvd å bruke nettstedet. Løpende kontroll hører hjemme i den vanlige driften av nettstedet, på linje med oppdateringer og sikkerhetskopier.
Tilgjengelighet, søk og AI-svar henger sammen
Et undervurdert argument: de samme grepene som gjør nettstedet brukbart for en skjermleser, gjør det lesbart for maskiner. Riktig overskriftshierarki, beskrivende lenketekster i stedet for «les mer», alt-tekster og semantisk oppmerking er forutsetninger både for hjelpemiddelteknologi og for at innholdet skal kunne siteres i AI Overview og andre AI-genererte svar i søk. Når Google eller en språkmodell skal plukke ut et svar fra siden din, er det strukturen som avgjør om avsnittet i det hele tatt lar seg isolere. Vi har skrevet mer om hvordan dette påvirker synlighet i artikkelen om AI-søk, og sammenhengen er en av grunnene til at vi mener tilgjengelighet ikke bør behandles som et juridisk minstekrav, men som en del av synlighetsarbeidet.
Regelverket beveger seg også. EUs tilgjengelighetsdirektiv, direktiv (EU) 2019/882, fikk virkning i EU fra 28. juni 2025 og stiller krav til blant annet netthandel, banktjenester og e-bøker. Direktivet er til vurdering for innlemmelse i EØS-avtalen, og driver du nettbutikk mot europeiske kunder, bør du regne med at kravene treffer deg før eller siden. Vårt råd er å bygge etter WCAG 2.1 AA nå og slippe å gjøre jobben to ganger.
Når universell utforming ikke er riktig sted å starte
Det finnes situasjoner der vi fraråder å bruke penger på tilgjengelighetsopprydding akkurat nå. Skal du uansett bytte plattform eller bygge nytt innen et halvår, er det bortkastet å rette fokusstiler i en mal som skal kastes — da legger du kravene inn i kravspesifikasjonen for det nye prosjektet i stedet, og bruker heller tiden på å planlegge hvordan den nye nettsiden skal lages. Det samme gjelder hvis nettstedet i praksis ikke har trafikk: har du under et par hundre besøk i måneden og ingen kanal som sender folk dit, er ikke kontrastforholdet flaskehalsen din. Da er synlighet og innhold viktigere først.
Et tredje tilfelle er bedrifter som kjøper en full revisjonsrapport før de har noen til å gjennomføre tiltakene. erfaringen viser rapporter på 60 sider ligge urørt i et år fordi ingen eide oppgaven. Da er det bedre å ta fem konkrete tiltak i måneden, med navn på ansvarlig, enn å kartlegge alt. Og skal du sammenligne leverandører, spør konkret om de leverer tastaturtesting og manuell kontroll — ikke bare et automatisk skann. Hva du ellers bør se etter, har vi samlet i artikkelen om valg av nettsideleverandør, og grunnprinsippene ligger i oversikten vår over temaet universell utforming.
Trenger du hjelp til å gå gjennom nettstedet ditt, eller til å bygge nytt med kravene på plass fra dag én, kan du lese mer om hvordan vi jobber med nettsider.
Ofte stilte spørsmål
Hva er det enkleste eksempelet på universell utforming jeg kan teste selv?
Legg fra deg musen og bruk Tab-tasten. Kom deg fra toppen av forsiden, gjennom menyen, til kontaktskjemaet og send inn en henvendelse. Ser du hele veien hvor fokus står, og klarer du å fylle ut skjemaet? Hvis nei, har du funnet brudd på minst to WCAG-krav på under fem minutter, og det er som regel de samme feilene som gjelder på alle undersidene.
Gjelder kravene også for små private bedrifter?
Ja. Forskrift om universell utforming av IKT-løsninger gjelder nettløsninger rettet mot allmennheten, uavhengig av om virksomheten er offentlig eller privat, og peker på WCAG 2.1 nivå AA. Offentlige virksomheter har i tillegg krav om å publisere tilgjengelighetserklæring. For en liten bedrift betyr det i praksis at kontaktskjema, meny, tekstkontrast og bilder må oppfylle kravene, selv om ingen fører løpende tilsyn med hver enkelt nettside.
Er det nok å installere en tilgjengelighetsknapp eller overlay-verktøy?
Nei, og vi fraråder det som eneste tiltak. Slike verktøy legger et lag oppå nettstedet og retter ikke den underliggende koden. De kan i verste fall forstyrre skjermlesere brukeren allerede har. Kontrast, semantisk oppmerking, ledetekster i skjema og synlig fokus må løses i selve nettstedet. Et overlay kan supplere, men det gjør ikke et utilgjengelig nettsted lovlig.
Hvor lang tid tar det å rette de vanligste feilene?
Det avhenger av om feilene ligger i innholdet eller i malen. Ryddejobber som alt-tekster og overskriftsstruktur gjøres av innholdsansvarlig løpende. Globale designfeil som tekstfarge og fokusstiler endres i noen få variabler, og i Box sine gjennomganger er de vanligste tekniske funnene normalt løst på under en arbeidsdag. Full ombygging blir bare aktuelt når nettstedet mangler semantisk struktur helt.
Kilder og grunnlag
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1 (kontrollert 23.09.2026)
- Lovdata: Forskrift om universell utforming av informasjons- og kommunikasjonsteknologiske (IKT)-løsninger (kontrollert 23.09.2026)
- WebAIM: The WebAIM Million – An annual accessibility analysis of the top 1,000,000 home pages (kontrollert 23.09.2026)
- EUR-Lex: Directive (EU) 2019/882 on the accessibility requirements for products and services (kontrollert 23.09.2026)
Emner
- Nettside
- Plattformvalg

