3.6 Tilgjengelighet og universell utforming
Forstå kravene til universell utforming av nettsider og lær å lage innhold som er tilgjengelig for alle brukere.
50 min
5 oppgaver
WCAG-retningslinjerAlternativ tekst og ARIATastaturnavigasjonFargekontrastSkjermleserkompatibilitet
Din fremgang i kapitlet
0 / 5 oppgaver
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å AA.
WCAG – De fire prinsippene
WCAG (Web Content Accessibility Guidelines) er organisert rundt fire prinsipper, kjent som POUR:
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:
``htmlKlikk herViktig tittel
Viktig tittel
`
Viktige prinsipper:
- Bruk
ARIA-attributter og tastaturnavigasjon
Når HTML ikke gir nok informasjon, bruker du ARIA-attributter for å hjelpe hjelpeteknologi:
``html
Skjemaet ble sendt!
Feilmelding: Ugyldig e-post.
`
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
css
/ 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+) |
|---|---|---|
| AA | Minst 4.5:1 | Minst 3:1 |
| AAA | Minst 7:1 | Minst 4.5:1 |
``
css
/ 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 /
`Bruk verktøy som WebAIM Contrast Checker for å sjekke kontrastforhold.
Ikke stol bare på farge for å formidle informasjon. Bruk også ikoner, tekst eller mønster:
htmlFeil
Feil: E-postadressen er ugyldig
``✏️Tilgjengelig navigasjonsmeny
Eksempel: Meny med tastaturstøtte og ARIA
``html`
`javascript
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 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 AA)
- Aldri fjern fokusindikatoren (outline) på interaktive elementer
Oppgaver
Lett1 oppgave
Medium3 oppgaver
Vanskelig1 oppgave