Universell utforming på nett (UU)
Universell utforming (UU) handler om å utvikle nettsider slik at de kan brukes av alle mennesker, uavhengig av funksjonsevne, alder eller hvilken enhet de surfer med. I Norge er dette lovfestet gjennom likestillings- og diskrimineringsloven med krav om å følge de internasjonale WCAG-retningslinjene.
Hvorfor angår dette deg som utvikler?
Når du lager en nettside, tenker du kanskje at alle ser og bruker siden akkurat slik du gjør med mus og god skjerm. Men mange brukere har:
Trenger god kontrast, skalerbar tekst og støtte for skjermleser.
Navigerer kun med tastatur (Tab-tasten) eller spesialbrytere, ikke mus.
Trenger teksting og transkripsjon på video- og lydklipp.
Trenger forutsigbar struktur, klart språk og unngå blinkende elementer.
De 6 viktigste hensynene når du koder en nettside
Når du skriver HTML og CSS i praksis, er det spesielt seks områder du må ha full kontroll på:
Bruk ekte semantisk HTML – unngå «div-soup»
Skjermlesere navigerer ved å hoppe fra overskrift til overskrift eller
mellom landemerker (<header>, <nav>, <main>, <footer>).
<!-- Uten semantikk -->
<div class="big-text">Overskrift</div>
<div class="btn" onclick="send()">
Send inn
</div>Skjermleseren vet ikke at dette er en overskrift eller en knapp, og tastaturet hopper over den.
<!-- Med semantikk -->
<h1>Overskrift</h1>
<button type="button" onclick="send()">
Send inn
</button>Skjermleseren annonserer «Overskrift nivå 1» og «Knapp, Send inn», og den kan trykkes med Enter/Mellomrom.
Bilder og alternativ tekst (alt)
Alle <img>-elementer må ha en alt-attributt.
Forskjellen ligger i om bildet formidler viktig informasjon eller bare er pynt:
- Informativt bilde: Beskriv hva bildet viser kort og presist.
<img src="grafe.png" alt="Søylediagram som viser 25 % økning i resirkulering i 2024"> - Rent dekorativt bilde (pynt): Bruk en tom alt-tekst slik at skjermleseren hopper over bildet.
<img src="stjerne-dekor.svg" alt="" role="presentation"> - Advarsel: Dropper du
alt-attributten helt, vil skjermleseren ofte lese opp hele filnavnet (f.eks. «IMG_8392_final_v2.png»).
Fargekontrast og synlighet
WCAG stiller strenge krav til fargekontrast mellom tekst og bakgrunn. Minstekravet (Nivå AA) er:
Mørk tekst med høy kontrast – Tydelig for alle!
Denne teksten oppfyller WCAG AA og AAA med god margin, og kan enkelt leses av alle under enhver lysforhold.
Tastaturnavigasjon og fokusmarkering
Alt som kan klikkes på med musen må også kunne nås med Tab-tasten og aktiveres med Enter eller Mellomrom.
- Fjern aldri fokusmarkøren uten erstatning! Skriver du
outline: none;i CSS uten å legge til en tydelig alternativ:focus-visible-stil, mister tastaturbrukere oversikten over hvor de befinner seg. - Logisk rekkefølge: Tab-rekkefølgen skal følge den naturlige leserekkefølgen fra toppen og ned.
/* Gjør fokusringen ekstra synlig ved tastaturnavigasjon */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 3px solid #38bdf8;
outline-offset: 3px;
}Skjemadesign og ledetekster (<label>)
Et inndatafelt (<input>) må alltid være koblet til en ledetekst (<label>).
Bruk attributten for="..." på labelen som matcher id="..." på feltet.
<!-- Placeholder forsvinner når man skriver! -->
<input type="email" placeholder="E-postadresse"><label for="bruker-epost">E-postadresse</label>
<input id="bruker-epost" type="email" required>Når en bruker klikker på <label>, aktiveres inputfeltet automatisk. Dette gir også et mye større klikkområde på mobil!
Meningsfulle lenketekster
Lenketeksten skal fortelle brukeren hvor lenken leder, selv når den leses helt ut av sammenhengen. Skjermleserbrukere henter ofte opp en ren liste over alle lenkene på siden.
«For å lese mer om personvern, klikk <a href="/personvern">her</a>» Hører bare ordet «her» uten kontekst.«Les mer i <a href="/personvern">vår personvernerklæring</a>» Mottakeren vet umiddelbart hva som åpnes.Visuelt innblikk: Hvordan «ser» en skjermleser siden?
Test forskjellen mellom en nettside kodet med vilkårlige <div>-er uten alt-tekster,
kontra en strukturert nettside med semantiske tagger:
«Overskrift nivå 1: Velkommen til fjellbutikken. Bilde: Rød tursekk på 45 liter pakket for fjellet. Lenke: Se alle tursekker. Inndatafelt, tekst: Søk etter turutstyr.»
Uu-tilsynets veiledning og løsningsforslag
Tilsynet for universell utforming av ikt (Uu-tilsynet) er den offisielle myndigheten i Norge som kontrollerer at norske nettsider og apper følger loven. De har utarbeidet konkrete og praktiske kodeveiledninger for webutviklere inndelt etter tema:
Bruk Uu-tilsynets offisielle ressursside som oppslagsverk når du bygger egne prosjekter:
Besøk Uu-tilsynet: Løsningsforslag etter tema