Forstå kravene til universell utforming av nettsider og lær å lage innhold som er tilgjengelig for alle brukere.
Tilgjengelighet og universell utforming
Omtrent 15-20 % av befolkningen har en form for funksjonsnedsettelse. Noen er blinde og bruker skjermlesere, noen har nedsatt motorikk og navigerer med tastatur, og noen har fargeblindhet. Universell utforming betyr at nettsiden din skal fungere for alle.
I Norge er universell utforming av IKT-løsninger lovpålagt gjennom likestillings- og diskrimineringsloven. Nettsider må oppfylle WCAG 2.1 nivå Å.
1. Perceivable (Mulig å oppfatte) – Innholdet må kunne oppfattes av alle sanser. Bilder trenger alternativ tekst, videoer trenger teksting.
2. Operable (Mulig å betjene) – Alle funksjoner må kunne brukes med tastatur. Ingenting bør bare fungere med mus.
3. Understandable (Mulig å forstå) – Innholdet og navigasjonen må være forståelig. Bruk klart språk og konsistent design.
4. Robust (Robust) – Innholdet må fungere med ulike nettlesere og hjelpeteknologier, både nå og i fremtiden.
Semantisk HTML og alternativ tekst
Det viktigste du kan gjøre for tilgjengelighet er å bruke riktige HTML-elementer. Skjermlesere forstår semantiske elementer:
<!-- Dårlig tilgjengelighet -->
<div onclick="navigate()">Klikk her</div>
<div class="heading">Viktig tittel</div>
<!-- God tilgjengelighet -->
<button onclick="navigate()">Gå til neste side</button>
<h2>Viktig tittel</h2>Viktige prinsipper:
- Bruk <button> for klikkbare elementer, ikke <div>
- Bruk overskriftsnivåer (<h1>–<h6>) i riktig rekkefølge
- Bruk <nav>, <main>, <header>, <footer> for sideinndeling
- Gi alle bilder meningsfull alt-tekst
- Bruk <label> for alle skjemafelt
Alternativ tekst for bilder:
<!-- Dårlig: tom eller manglende alt-tekst -->
<img src="graf.png">
<img src="graf.png" alt="bilde">
<!-- God: beskrivende alt-tekst -->
<img src="graf.png" alt="Søylediagram som viser norsk BNP-vekst fra 2015 til 2024">
<!-- Dekorative bilder: tom alt-tekst -->
<img src="dekor.png" alt="">ARIA-attributter og tastaturnavigasjon
Når HTML ikke gir nok informasjon, bruker du ARIA-attributter for å hjelpe hjelpeteknologi:
<!-- aria-label: usynlig etikett -->
<button aria-label="Lukk dialogboks">X</button>
<!-- aria-expanded: forteller om en meny er åpen -->
<button aria-expanded="false" aria-controls="meny">Meny</button>
<nav id="meny" hidden>...</nav>
<!-- aria-live: varsler om dynamiske endringer -->
<div aria-live="polite" id="status">
Skjemaet ble sendt!
</div>
<!-- role: beskriver elementets funksjon -->
<div role="alert">Feilmelding: Ugyldig e-post.</div>Viktig regel: Bruk alltid semantisk HTML først. ARIA er et supplement, ikke en erstatning.
Tastaturnavigasjon
Alle interaktive elementer må kunne nås med tastaturet:
- Tab – flytt fokus til neste element
- Shift+Tab – flytt fokus bakover
- Enter/Space – aktiver knapper og lenker
- Escape – lukk dialoger og menyer
/* Synlig fokusindikator */
:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
/* ALDRI fjern fokusindikatoren! */
/* Feil: :focus { outline: none; } */Fargekontrast
Tekst må ha tilstrekkelig kontrast mot bakgrunnen for å være lesbar:
| WCAG-nivå | Vanlig tekst | Stor tekst (18px+) |
|---|---|---|
| Å | Minst 4.5:1 | Minst 3:1 |
| AAA | Minst 7:1 | Minst 4.5:1 |
/* Dårlig kontrast – lysegrå på hvit */
.tekst { color: #aaa; background: #fff; } /* 2.3:1 – feiler */
/* God kontrast – mørk på lys */
.tekst { color: #333; background: #fff; } /* 12.6:1 – bestått */Ikke stol bare på farge for å formidle informasjon. Bruk også ikoner, tekst eller mønster:
<!-- Dårlig: bare farge -->
<span style="color: red;">Feil</span>
<!-- Bra: farge + ikon + tekst -->
<span style="color: red;">Feil: E-postadressen er ugyldig</span><nav aria-label="Hovednavigasjon">
<button
aria-expanded="false"
aria-controls="nav-lenker"
id="menyknapp"
>
Meny
</button>
<ul id="nav-lenker" hidden>
<li><a href="/">Hjem</a></li>
<li><a href="/om">Om oss</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>const knapp = document.querySelector("#menyknapp");
const lenker = document.querySelector("#nav-lenker");
knapp.addEventListener("click", function() {
const erApen = knapp.getAttribute("aria-expanded") === "true";
knapp.setAttribute("aria-expanded", !erApen);
lenker.hidden = erApen;
});Legg merke til: aria-label beskriver navigasjonen, aria-expanded forteller om menyen er åpen, og aria-controls kobler knappen til menyen.
Oppsummering
- Universell utforming er lovpålagt i Norge og betyr at nettsider skal fungere for alle
- WCAG har fire prinsipper: mulig å oppfatte, betjene, forstå og robust
- Bruk semantisk HTML som grunnlag for tilgjengelighet
- Gi bilder meningsfull alt-tekst og bruk <label> for skjemafelt
- ARIA-attributter gir tilleggsinformasjon til skjermlesere
- All funksjonalitet skal være tilgjengelig via tastatur
- Tekst må ha tilstrekkelig fargekontrast (minst 4.5:1 for Å)
- Aldri fjern fokusindikatoren (outline) på interaktive elementer
Oppgaver
Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.