WCAG 2.1 AA-sjekklisten: alle 50 krav med typiske feil

Denne artikkelen er en arbeidsliste. Bruk den når du fyller ut tilgjengelighetserklæringen, når du gjennomgår en ny side før den publiseres, eller når du vurderer en utvikler eller leverandør.

Lista dekker WCAG 2.1 nivå A og AA — alle 50 suksesskriterier som UU-forskriften peker på. Den er sortert slik W3C selv har sortert den, etter de fire prinsippene.

De fire prinsippene

WCAG er bygd opp rundt fire prinsipper. Hvert prinsipp handler om at innholdet skal fungere uansett hvordan brukeren bruker siden:

1. Mulig å oppfatte — innholdet må være tilgjengelig for de sansene brukeren har til rådighet.
2. Mulig å betjene — alle interaktive elementer må kunne brukes uten mus.
3. Forståelig — språk og oppførsel må være forutsigbar.
4. Robust — koden må fungere med skjermlesere og andre hjelpemidler.

Et krav merket Nivå A er et minimum — uten det klarer mange brukere rett og slett ikke å bruke siden. Krav merket Nivå AA er det norske myndigheter har lagt seg på som lovkrav.

Prinsipp 1: Mulig å oppfatte

Innhold må presenteres slik at alle brukere kan oppfatte det — uten syn, uten hørsel, eller med begrenset bruk av begge. Tjue krav ligger under dette prinsippet, fra alt-tekst på bilder til fargekontrast og dynamisk omflyt på mobil.

• 1.1.1Ikke-tekstlig innholdNivå A

  Hva det betyr: Alt som ikke er tekst — bilder, ikoner, knapper med kun symbol — må ha en tekst som beskriver hva det er eller hva det gjør.

  Typisk feil: Bilder uten alt-attributt, eller alt-tekst som er filnavnet (DSC_0123.jpg) eller helt generisk («bilde»).

• 1.2.1Bare lyd og bare video (forhåndsinnspilt)Nivå A

  Hva det betyr: Hvis du har ren lyd eller video uten lyd, må du tilby et tekstalternativ — typisk et transkript.

  Typisk feil: Podkast publisert uten transkript på nettsiden.

• 1.2.2Teksting (forhåndsinnspilt)Nivå A

  Hva det betyr: Forhåndsinnspilte videoer med lyd må ha undertekster.

  Typisk feil: YouTube-videoer som bygges inn uten undertekster, eller automatisk genererte undertekster som aldri er rettet.

• 1.2.3Synstolking eller mediealternativ (forhåndsinnspilt)Nivå A

  Hva det betyr: Videoer der det visuelle innholdet er viktig for å forstå må enten synstolkes eller suppleres med en tekstversjon.

  Typisk feil: Forklaringsvideo der grafer og tegninger er meningsbærende, men aldri beskrives i lyden.

• 1.2.4Teksting (direktesendt)Nivå AA

  Hva det betyr: Direktesendinger må også ha undertekster, ikke bare opptak.

  Typisk feil: Webinarer og direktesendte møter uten teksting.

• 1.2.5Synstolking (forhåndsinnspilt)Nivå AA

  Hva det betyr: Strengere krav enn 1.2.3 — synstolking må være tilgjengelig som lydspor, ikke bare som tekst.

  Typisk feil: Reklamefilmer eller informasjonsvideoer uten alternativ lydbeskrivelse.

• 1.3.1Informasjon og relasjonerNivå A

  Hva det betyr: Det visuelle hierarkiet — overskrifter, tabeller, lister — må være kodet semantisk så skjermlesere forstår det.

  Typisk feil: Bruke <div> med stor font i stedet for <h2>, eller bygge tabell-layout med generelle <div>-elementer.

• 1.3.2Meningsfylt rekkefølgeNivå A

  Hva det betyr: Innholdet må gi mening i den rekkefølgen det leses opp av en skjermleser.

  Typisk feil: Layout som plasserer innhold visuelt riktig med CSS, men hvor selve koden har feil rekkefølge.

• 1.3.3Sensoriske egenskaperNivå A

  Hva det betyr: Instruksjoner kan ikke bare henvise til form, plassering, farge eller lyd. Blinde brukere må også klare å følge dem.

  Typisk feil: «Velg det grønne alternativet» eller «klikk på knappen til høyre» — uten å si hva alternativet faktisk heter.

• 1.3.4VisningsretningNivå AA

  Hva det betyr: Innholdet skal fungere både stående og liggende på mobil — du kan ikke låse en av delene.

  Typisk feil: Skjemaer som tvinger telefonen til stående visning.

• 1.3.5Identifiser formål med inndataNivå AA

  Hva det betyr: Skjemafelt som ber om kjent informasjon (navn, e-post, telefon) må ha autocomplete-attributt så nettleseren kan fylle ut.

  Typisk feil: autocomplete="off" på vanlige felt, eller manglende autocomplete helt.

• 1.4.1Bruk av fargeNivå A

  Hva det betyr: Farge alene kan ikke være eneste måte å formidle informasjon på.

  Typisk feil: Skjemafelt som bare farges røde ved feil, uten ikon eller tekst som forklarer hva som er galt.

• 1.4.2Styring av lydNivå A

  Hva det betyr: Hvis lyd spilles av automatisk i mer enn tre sekunder, må brukeren kunne pause, stoppe eller dempe.

  Typisk feil: Bakgrunnsmusikk på forsider uten kontroller.

• 1.4.3Kontrast (minimum)Nivå AA

  Hva det betyr: Tekst må ha minst 4,5:1 kontrast mot bakgrunn. For stor tekst (24 px, eller 18 px fet) holder 3:1.

  Typisk feil: Lysegrå tekst på hvit bakgrunn — vanlig i moderne design, men stryker AA.

• 1.4.4Endring av tekststørrelseNivå AA

  Hva det betyr: Tekst skal kunne forstørres til 200 % uten at innhold blir borte eller utilgjengelig.

  Typisk feil: Layout som bryter sammen når brukeren zoomer.

• 1.4.5Bilder av tekstNivå AA

  Hva det betyr: Tekst skal være ekte tekst, ikke et bilde av tekst. Logoer er unntatt.

  Typisk feil: Markedsføringsbannere der hele teksten er en JPG.

• 1.4.10Dynamisk tilpasning (Reflow)Nivå AA

  Hva det betyr: Innhold skal kunne vises på en 320 px bred skjerm uten at brukeren må scrolle horisontalt.

  Typisk feil: Faste tabeller eller oppsett som krever horisontal skrolling på mobil.

• 1.4.11Kontrast for ikke-tekstlig innholdNivå AA

  Hva det betyr: Knapper, skjemafelt, ikoner og andre interaktive elementer må ha minst 3:1 kontrast mot bakgrunn.

  Typisk feil: Lyse, grå knapper på hvit bakgrunn.

• 1.4.12TekstavstandNivå AA

  Hva det betyr: Brukere skal kunne overstyre linjeavstand, avsnittsavstand og bokstavavstand uten at innholdet ødelegges.

  Typisk feil: Tekst i bokser med fast høyde — teksten kuttes når avstanden økes.

• 1.4.13Pekerinnhold ved svever- eller tastaturfokusNivå AA

  Hva det betyr: Innhold som dukker opp ved svever eller tastaturfokus må kunne lukkes, holdes synlig så lenge brukeren leser, og ikke forsvinne uventet.

  Typisk feil: Verktøytips som forsvinner så snart musen flyttes litt, eller som dekker innholdet under.

Prinsipp 2: Mulig å betjene

Brukere må kunne navigere og bruke siden uavhengig av hvilken inndataenhet de har. Tastaturbrukere, brukere av spesialtilpassede pekere, og brukere på berøringsskjerm skal alle klare seg.

• 2.1.1TastaturNivå A

  Hva det betyr: All funksjonalitet må kunne brukes med kun tastatur, uten å være avhengig av mus.

  Typisk feil: Egendefinerte dropdowns, modaler eller karuseller som bare lytter på klikk-hendelser.

• 2.1.2Ingen tastaturfelleNivå A

  Hva det betyr: Brukeren må kunne forlate alle deler av siden med tastaturet alene.

  Typisk feil: Modaler som ikke slipper tastaturfokus, eller karuseller som låser fokus inne.

• 2.1.4Hurtigtaster bestående av tegnNivå A

  Hva det betyr: Hvis du lager tastatursnarveier med ett enkelt tegn, må brukeren kunne slå dem av eller endre dem.

  Typisk feil: Web-apper med Gmail-stil snarveier (a, /, ?) som ikke kan deaktiveres.

• 2.2.1Justerbar tidsbrukNivå A

  Hva det betyr: Tidsfrister på siden — typisk innlogging eller kjøp — må kunne forlenges, slås av eller utsettes.

  Typisk feil: Sesjon som løper ut etter ti minutter uten varsel eller mulighet for forlengelse.

• 2.2.2Pause, stopp, skjulNivå A

  Hva det betyr: Bevegelig, blinkende eller automatisk oppdaterende innhold må kunne pauses.

  Typisk feil: Automatisk roterende karusell uten pauseknapp.

• 2.3.1Tre glimt eller mindreNivå A

  Hva det betyr: Innhold kan ikke blinke mer enn tre ganger per sekund — det kan utløse anfall.

  Typisk feil: Stroboskop-effekter i markedsføringsvideoer.

• 2.4.1Hopp over blokkerNivå A

  Hva det betyr: Brukeren skal kunne hoppe over gjentakende elementer (typisk hovedmeny) for å komme rett til hovedinnholdet.

  Typisk feil: Manglende «hopp til hovedinnhold»-lenke øverst på siden.

• 2.4.2SidetitlerNivå A

  Hva det betyr: Hver side må ha en unik og beskrivende <title>-tag.

  Typisk feil: «Hjem» eller «Side 1» som tittel — sier ingenting om hva siden faktisk handler om.

• 2.4.3FokusrekkefølgeNivå A

  Hva det betyr: Tab-rekkefølgen må følge en logisk visuell rekkefølge.

  Typisk feil: CSS-omplassering som gjør at tab hopper rundt på siden.

• 2.4.4Formål med lenke (i kontekst)Nivå A

  Hva det betyr: Lenketeksten må gi mening enten alene, eller sammen med teksten rundt.

  Typisk feil: Mange «les mer»-lenker i samme avsnitt — skjermleser-bruker hører bare «les mer, les mer, les mer».

• 2.4.5Flere måterNivå AA

  Hva det betyr: Det må finnes mer enn én måte å finne fram på — søk, meny, A–Å-oversikt, eller lignende.

  Typisk feil: Nettsider med kun en hovedmeny, uten søk eller oversiktsside.

• 2.4.6Overskrifter og ledeteksterNivå AA

  Hva det betyr: Overskrifter og ledetekster må beskrive innholdet de står over.

  Typisk feil: Generiske overskrifter som «Mer informasjon», eller skjemafelt-ledetekster som bare står «E-post» uten å forklare hva e-posten brukes til.

• 2.4.7Synlig fokusNivå AA

  Hva det betyr: Det elementet som har tastaturfokus må vises tydelig.

  Typisk feil: outline: none i CSS uten erstatning — vanlig på «designede» knapper.

• 2.5.1PekerbevegelserNivå A

  Hva det betyr: Funksjoner som krever flerfingerbevegelser eller bestemte gester må også kunne utløses med ett enkelt klikk eller trykk.

  Typisk feil: Karusell som kun reagerer på swipe.

• 2.5.2PekeravbrytelseNivå A

  Hva det betyr: Når brukeren har trykket ned, skal handlingen først skje når brukeren slipper — så det går an å avbryte ved å bevege fingeren unna.

  Typisk feil: Knapper som aktiveres ved «mousedown» i stedet for «click».

• 2.5.3Ledetekst i navnNivå A

  Hva det betyr: Det tilgjengelige navnet på et element (det skjermleseren leser opp) må inneholde teksten som vises visuelt.

  Typisk feil: Knapp som viser «Send», men har aria-label="Submit form".

• 2.5.4Aktivering ved bevegelseNivå A

  Hva det betyr: Funksjoner som aktiveres ved å bevege enheten — typisk «rist for å oppdatere» — må også kunne aktiveres på en annen måte.

  Typisk feil: «Rist for å oppdatere»-funksjon uten alternativ knapp.

Prinsipp 3: Forståelig

Både språket på siden og måten siden oppfører seg på må være forståelig og forutsigbar. Det handler om å unngå at noe uventet skjer, og å hjelpe brukeren når noe går galt.

• 3.1.1Språk på sidenNivå A

  Hva det betyr: <html lang="no"> (eller annet riktig språk) må være satt så skjermlesere kan uttale ord riktig.

  Typisk feil: Manglende eller feil lang-attributt — vanlig på sider som er konvertert fra engelsk-mal uten å oppdatere koden.

• 3.1.2Språk på deler av innholdetNivå AA

  Hva det betyr: Tekst på et annet språk enn resten av siden må merkes med eget lang-attributt.

  Typisk feil: Engelske sitater eller fagbegreper midt i norsk tekst, uten språkmerking.

• 3.2.1FokusNivå A

  Hva det betyr: Bare det å sette fokus på et element kan ikke utløse en uventet endring.

  Typisk feil: Skjemafelt som automatisk sender skjema når man tabber forbi.

• 3.2.2InndataNivå A

  Hva det betyr: Bare det å fylle ut et felt eller velge i en dropdown kan ikke utløse en uventet endring.

  Typisk feil: Land-dropdown som laster siden på nytt så snart brukeren velger land, uten at brukeren har trykket «Bekreft».

• 3.2.3Konsekvent navigeringNivå AA

  Hva det betyr: Hovedmeny og navigasjonselementer må være på samme sted og i samme rekkefølge på alle sider.

  Typisk feil: Kampanjesider med egen meny som er flyttet eller har annen rekkefølge enn resten.

• 3.2.4Konsekvent identifikasjonNivå AA

  Hva det betyr: Funksjoner som gjør det samme må merkes likt på tvers av siden.

  Typisk feil: Søkeknappen heter «Søk» på forsiden og «Finn» andre steder.

• 3.3.1Identifikasjon av feilNivå A

  Hva det betyr: Når brukeren gjør en feil i et skjema, må feilen beskrives i tekst.

  Typisk feil: Skjema som bare farger feltet rødt uten å si hva som er galt.

• 3.3.2Ledetekst eller instruksjonerNivå A

  Hva det betyr: Skjemafelt må ha en synlig ledetekst eller instruksjon som forklarer hva brukeren skal fylle inn.

  Typisk feil: Søkefelt med kun plassholder-tekst — den forsvinner så snart brukeren begynner å skrive.

• 3.3.3Forslag ved feilNivå AA

  Hva det betyr: Hvis brukeren gjør en feil og du vet hva som er rett, må du foreslå rettelsen.

  Typisk feil: «Ugyldig e-post» uten å foreslå at brukeren mangler @-tegnet.

• 3.3.4Forhindring av feil (juridisk, økonomisk, data)Nivå AA

  Hva det betyr: For viktige innsendinger — kjøp, sletting, skjema med rettslig betydning — må brukeren kunne angre, dobbeltsjekke eller bekrefte.

  Typisk feil: «Slett konto»-knapp uten bekreftelsessteg.

Prinsipp 4: Robust

Innholdet må være kodet slik at hjelpemidler — særlig skjermlesere — kan tolke det riktig. Bare tre krav, men de er ofte de mest oversette.

• 4.1.1ParsingNivå A

  Hva det betyr: HTML-koden skal være gyldig — dupliserte ID-er, manglende lukketagger eller feil nesting kan forvirre skjermlesere.

  Typisk feil: Samme id brukt på flere elementer, ofte i tabeller eller karuseller generert av et CMS.

  Dette kravet er fjernet i WCAG 2.2, men gjelder fortsatt under UU-forskriften, som peker på 2.1.

• 4.1.2Navn, rolle, verdiNivå A

  Hva det betyr: Tilpassede komponenter — egne knapper, slidere, modaler — må ha eksplisitt rolle og navn så skjermlesere skjønner hva de er.

  Typisk feil: <div onclick="..."> som fungerer som knapp, men ikke kan oppdages som knapp.

• 4.1.3StatusbeskjederNivå AA

  Hva det betyr: Meldinger som vises uten at brukeren har endret fokus — typisk «Endring lagret» eller «5 nye treff» — må kunngjøres til skjermlesere via aria-live.

  Typisk feil: Popup-meldinger («toast») som vises visuelt, men som aldri leses opp av skjermleser.

Slik bruker du sjekklisten

Det er sjelden lurt å gå gjennom alle 50 kravene rad for rad fra start til slutt. En mer realistisk fremgangsmåte:

1. Kjør en automatisk skanning først.
   Cirka 30–40 % av kravene kan testes automatisk — typisk kontrastfeil, manglende alt-attributter, og strukturelle problemer. Det gir deg en konkret startliste.
2. Test manuelt på de kravene som ikke kan automatiseres.
   Bruk tastatur og en skjermleser (NVDA på Windows, VoiceOver på Mac/iOS) på sentrale flyt — meny, søk, skjema, betaling.
3. Notér status per krav.
   Vær ærlig med deg selv. «Delvis» med en tydelig beskrivelse er bedre enn «Ja» uten dokumentasjon.
4. Lag en plan for det som er delvis eller ikke oppfylt.
   UUTilsynet ser ikke etter et perfekt nettsted. De ser etter at du vet hva som ikke fungerer, og at du har en plan.

Videre lesning

• Tilgjengelighetserklæring: slik fyller du ut kravene fra Digdir — pillar-artikkelen som denne lista er bygd for å støtte.
• W3C: Retningslinjer for tilgjengelig webinnhold (WCAG) 2.1 — den offisielle norske oversettelsen av selve standarden.
• UUTilsynet: krav til universell utforming — myndighetens egen samling, med koblinger til de norske målformkravene som kommer i tillegg til WCAG.