Hva er WCAG 2.1 AA og hvem omfattes av loven?
Web Content Accessibility Guidelines (WCAG) 2.1 er en internasjonal standard utarbeidet av W3C. I Norge krever forskriften at alle IKT-løsninger rettet mot innbyggere og forbrukere oppfyller 47 suksesskriterier på nivå A og AA. Dette omfatter:
- Nettbutikker og e-handelsplattformer: Hele kjøpsløpet fra produktvisning til kasse og betaling.
- Tjenestebedrifter og håndverkere: Kontaktskjemaer, priskalkulatorer og befaringsbestillinger.
- Restauranter og uteliv: Menyer, bordbestilling og takeaway-løsninger (PDF-menyer som ikke kan leses av skjermlesere er et klassisk lovbrudd).
- Helse, klinikker og rådgivning: Timebestillingssystemer, kundeportaler og pasientinformasjon.
De 4 grunnleggende prinsippene i WCAG (POUR)
WCAG er bygget rundt fire kjerneprinsipper som sikrer at alle brukere kan samhandle med nettsiden uavhengig av funksjonsevne eller enhet:
Mulig å oppfatte (Perceivable)
Informasjon og brukergrensesnitt må presenteres slik at brukere kan oppfatte det med syn eller hørsel (f.eks. ALT-tekster på bilder, god fargekontrast og undertekster på video).
Mulig å betjene (Operable)
Alle knapper, menyer og skjemaer må kunne navigeres med tastatur alene, uten at brukeren blir fanget i et element («keyboard trap»).
Forståelig (Understandable)
Språket må være tydelig, navigasjonen forutsigbar og feilmeldinger i skjemaer må forklare nøyaktig hva brukeren må rette opp.
Robust (Robust)
Koden må følge moderne HTML-standarder slik at den kan tolkes pålitelig av skjermlesere, nettlesere og fremtidige hjelpemidler.
De 6 vanligste feilene norske nettsider stryker på i tilsyn:
1. Utilstrekkelig fargekontrast (Kriterium 1.4.3)
Tekst mot bakgrunn må ha et kontrastforhold på minst 4.5:1 for normal brødtekst og 3:1 for overskrifter (over 18pt / 24px) og grafiske grensesnittelementer. Mange designere bruker lysegrå tekst (f.eks. #94A3B8) på hvit bakgrunn, noe som gjør innholdet uleselig i dagslys og bryter loven.
2. Manglende eller intetsigende ALT-tekster på bilder (Kriterium 1.1.1)
Alle meningsbærende bilder må ha en beskrivende alt-attributt. Rent dekorative ikoner og bakgrunnsgrafikk skal derimot merkes med alt="" eller aria-hidden="true" slik at skjermlesere ikke leser opp unødvendig støy.
3. Manglende tastaturfokus (Kriterium 2.4.7)
Når en bruker trykker Tab for å navigere gjennom nettsiden, må det alltid vises en tydelig visuell fokusring rundt elementet som er aktivt. Å fjerne fokusringen med outline: none; i CSS uten å erstatte den er en alvorlig feil.
4. Skjemaer uten tilknyttede etiketter (Kriterium 3.3.2)
Kontaktskjemaer som kun bruker placeholder-tekst inne i feltene stryker automatisk. Hvert felt må ha et eksplisitt <label for="id">-element, og obligatoriske felter må merkes både visuelt og programmatisk med required eller aria-required="true".
5. Feil overskriftshierarki og manglende landemerker (Kriterium 1.3.1)
Å hoppe over overskriftsnivåer (f.eks. gå direkte fra H1 til H4 fordi man liker skriftstørrelsen) forvirrer hjelpemidler. Bruk alltid semantiske HTML5-elementer som <header>, <main>, <nav> og <footer>.
6. Utilgjengelige PDF-dokumenter
Å legge ut restaurantmenyer, prishefter eller vilkår som skannede PDF-filer uten tekstlag er et direkte brudd på kravene. Innhold skal alltid ligge som ekte, indekserbar HTML på nettsiden.
Slik henger universell utforming sammen med Google SEO og AI-søk
Mange bedriftseiere ser på universell utforming som en kjedelig plikt. Sannheten er at WCAG-optimalisering er den mest effektive tekniske SEO-strategien du kan gjøre:
Hvorfor WCAG gir høyere Google-rangering:
- Googlebot er «blind»: Søkemotorer leser kildekoden din på nøyaktig samme måte som en skjermleser for svaksynte. Tydelig semantikk gir overlegen indeksering.
- AI-modeller (LLMs) krever struktur: Verktøy som ChatGPT og Gemini henter fakta raskest fra sider med ryddig tabellstruktur, klare overskrifter og semantiske lister.
- Lavere fluktfrekvens (Bounce Rate): Når eldre, svaksynte og mobilbrukere enkelt kan lese og navigere på siden din, øker tiden de tilbringer på siden – et sterkt kvalitetssignal til Google.
Sjekkliste for bedrifter: Slik tester du din egen nettside
| Testområde | Slik tester du selv | Krav |
|---|---|---|
| Tastaturnavigasjon | Bruk kun Tab, Enter og piltaster. | Kan du nå alle lenker og sende inn skjemaet? Vises fokusringen? |
| Fargekontrast | Bruk WebAIM Contrast Checker eller Lighthouse. | Minst 4.5:1 for vanlig tekst, minst 3:1 for stor tekst/knapper. |
| Zoom og tekststørrelse | Zoom inn til 200 % i nettleseren (Cmd/Ctrl +). | Tekst skal ikke overlappe eller forsvinne ut av skjermkanten. |
| Skjermlesertest | Skru på VoiceOver (Mac/iPhone) eller TalkBack (Android). | Leser telefonen opp menyen og skjemaene i logisk rekkefølge? |
Hvorfor Drevos statiske Astro-sider er 100% WCAG-tilpasset
Ferdigkjøpte WordPress-temaer og billige nettsidebyggere inneholder ofte tusenvis av linjer med rotete kode og manglende ARIA-attributter. Hos Drevo håndkoder vi alle nettsider fra bunnen av med Astro SSG og semantisk HTML5. Hver eneste nettside vi leverer testes mot de 47 suksesskriteriene i WCAG 2.1 AA før publisering.
Vil du ha en 100% lovlig og tilgjengelig nettside?
Vi bygger lynraske, universelt utformede nettsider med 0 kr i oppstart og full teknisk garanti.