WCAG 2.1 AA forklaret for webshops
Opdateret 10. september 2026
WCAG 2.1 er W3C's retningslinjer for tilgængeligt webindhold. Niveau AA er det, tilgængelighedsloven kræver af webshops via standarden EN 301 549, og det er det niveau, Nordallys scanner og tjekliste er bygget efter.
Hvad WCAG er
Web Content Accessibility Guidelines (WCAG) udgives af W3C og findes i en autoriseret dansk oversættelse. Version 2.1 består af fire principper, 13 retningslinjer og en række testbare succeskriterier. Hvert kriterium har et niveau: A (minimum), AA eller AAA (højeste). Niveauerne bygger oven på hinanden, så AA betyder alle A-kriterier plus alle AA-kriterier.
Hvorfor AA er lovens niveau
Tilgængelighedsloven nævner ikke WCAG direkte. Den peger på den harmoniserede europæiske standard EN 301 549, hvis kapitel 9 (web) for websteder svarer til WCAG 2.1 på niveau A og AA. Lever webstedet op til standarden, er der formodning om, at lovens tilgængelighedskrav er opfyldt. AAA-kriterierne indgår ikke i standarden og er derfor ikke et lovkrav. Det giver 50 succeskriterier, som en webshop skal forholde sig til.
Automatisk test kan afgøre en delmængde af kriterierne, fx manglende alt-tekster, for lav kontrast og felter uden etiket. Kriterier som meningsfuld rækkefølge, fokusrækkefølge og forståelige fejlbeskeder kræver, at et menneske prøver siden med tastatur og skærmlæser. Derfor består dokumentationen af både scanning og manuel gennemgang.
1. Opfattelig
Information og elementer i brugergrænsefladen skal kunne opfattes af brugeren: tekstalternativer til billeder, undertekster til video, indhold der kan præsenteres på flere måder, og tilstrækkelig kontrast.
| Kriterium | Titel | Niveau |
|---|---|---|
| 1.1.1 | Ikke-tekstbaseret indhold | A |
| 1.2.1 | Rent lydindhold og rent videoindhold (forudindspillet) | A |
| 1.2.2 | Undertekster (forudindspillet) | A |
| 1.2.3 | Synstolkning eller mediealternativ (forudindspillet) | A |
| 1.2.4 | Undertekster (direkte) | AA |
| 1.2.5 | Synstolkning (forudindspillet) | AA |
| 1.3.1 | Information og relationer | A |
| 1.3.2 | Meningsfuld rækkefølge | A |
| 1.3.3 | Sensoriske egenskaber | A |
| 1.3.4 | Retning | AA |
| 1.3.5 | Identificering af inputformål | AA |
| 1.4.1 | Anvendelse af farve | A |
| 1.4.2 | Kontrol af lyd | A |
| 1.4.3 | Kontrast (minimum) | AA |
| 1.4.4 | Ændring af tekststørrelse | AA |
| 1.4.5 | Billeder af tekst | AA |
| 1.4.10 | Ombrydningsvisning | AA |
| 1.4.11 | Kontrast for ikke-tekstbaseret indhold | AA |
| 1.4.12 | Tekstafstand | AA |
| 1.4.13 | Indhold ved svævepegning (hover) eller fokus | AA |
2. Anvendelig
Alt skal kunne betjenes, også uden mus: tastaturadgang, tid nok til at handle, ingen indhold der udløser anfald, og navigation der gør det muligt at finde rundt og se, hvor man er.
| Kriterium | Titel | Niveau |
|---|---|---|
| 2.1.1 | Tastatur | A |
| 2.1.2 | Ingen tastaturfælde | A |
| 2.1.4 | Genvejstaster | A |
| 2.2.1 | Justerbar Tidsbegrænsning (Timing) | A |
| 2.2.2 | Pause, stop, skjul | A |
| 2.3.1 | Grænseværdi på tre glimt eller derunder | A |
| 2.4.1 | Spring over blokke | A |
| 2.4.2 | Sider har titler | A |
| 2.4.3 | Fokusrækkefølge | A |
| 2.4.4 | Formål med links (i kontekst) | A |
| 2.4.5 | Flere måder | AA |
| 2.4.6 | Overskrifter og etiketter | AA |
| 2.4.7 | Synligt fokus | AA |
| 2.5.1 | Pegebevægelser (Pointer Gestures) | A |
| 2.5.2 | Pege-annullering | A |
| 2.5.3 | Etiket i navn | A |
| 2.5.4 | Betjening via bevægelse | A |
3. Forståelig
Indhold og betjening skal kunne forstås: sproget er markeret, siderne opfører sig forudsigeligt, og formularer hjælper brugeren med at undgå og rette fejl.
| Kriterium | Titel | Niveau |
|---|---|---|
| 3.1.1 | Sproget på siden | A |
| 3.1.2 | Sprog, der anvendes til dele af indhold | AA |
| 3.2.1 | I fokus | A |
| 3.2.2 | Ved input | A |
| 3.2.3 | Konsekvent navigation | AA |
| 3.2.4 | Konsekvent identifikation | AA |
| 3.3.1 | Identifikation af fejl | A |
| 3.3.2 | Etiketter eller instruktioner | A |
| 3.3.3 | Fejlforslag | AA |
| 3.3.4 | Forhindring af fejl (juridisk, økonomisk, data) | AA |
4. Robust
Indholdet skal kunne tolkes pålideligt af browsere og hjælpemidler som skærmlæsere. I praksis handler det om korrekt HTML og ARIA, så navn, rolle og tilstand på hvert element kan aflæses.
| Kriterium | Titel | Niveau |
|---|---|---|
| 4.1.1 | Parsing | A |
| 4.1.2 | Navn, rolle, værdi | A |
| 4.1.3 | Statusbeskeder | AA |
Sådan ser kriterierne ud i en webshop
Scanneren tester mod axe-regler, der hver især er koblet til et eller flere succeskriterier. Fire eksempler, som tilsammen dækker alle fire principper:
image-alt1.1.1 Ikke-tekstbaseret indhold · ABilleder uden alt-attribut har intet tekstalternativ. Skærmlæserbrugere hører enten filnavnet (fx 'IMG_2043.jpg') eller ingenting og går glip af indholdet — fx et produktbillede, et kampagnebanner eller et betalingskort-ikon.
Giv alle <img> en alt-attribut. Beskriv billedets indhold eller funktion i én kort sætning (uden 'billede af'). Er billedet rent dekorativt (rammer, skygger, spacer-gifs), så brug tom alt="" — så springer skærmlæseren det over. Et billede i et link skal beskrive linkets mål, ikke billedet. I webshops: produktbilleder bør nævne produktnavn og variant ('Sort uldfrakke, model Nora, set forfra'), og logoer bør have firmanavnet som alt.
Før
<img src="/img/frakke-nora-sort.jpg">Efter
<img src="/img/frakke-nora-sort.jpg" alt="Sort uldfrakke, model Nora, set forfra"> <img src="/img/border.gif" alt="">color-contrast1.4.3 Kontrast (minimum) · AATekstens kontrast mod baggrunden er under 4,5:1 (3:1 for stor tekst ≥ 18 pt eller ≥ 14 pt fed). Brugere med nedsat syn eller farvesynsdefekt — og alle på en mobil i sollys — kan ikke læse teksten. Rammer typisk lysegrå hjælpetekst, placeholder-tekst, priser på farvet baggrund og hvid tekst på pastelfarvede knapper.
Mørkn tekstfarven eller lysn baggrunden, til kontrasten er mindst 4,5:1 (3:1 for stor tekst). axe angiver den målte kontrast og de præcise farver i fejlbeskrivelsen. Ret farven i design-tokens/CSS-variabler frem for pr. element, så det slår igennem overalt. Tjek også hover-, fokus- og disabled-tilstande (disabled-tekst er undtaget, men bør stadig kunne læses).
Før
.hint { color: #9ca3af; background: #ffffff; } /* 2,5:1 */Efter
.hint { color: #4b5563; background: #ffffff; } /* 7,6:1 */link-name2.4.4 Formål med links (i kontekst) · A4.1.2 Navn, rolle, værdi · ALinket har ingen tilgængelig tekst. Skærmlæsere oplæser 'link' uden mål — brugeren ved ikke, hvor det fører hen. Typisk et link, der kun indeholder et ikon eller et billede uden alt, fx logo, kurv-ikon eller sociale medier-ikoner.
Giv linket en tekst: enten synlig tekst, alt på billedet inde i linket, eller aria-label på <a>. Teksten skal beskrive målet ('Gå til kurv', 'Nordally — forside'), ikke 'klik her'. Har linket ingen href, er det ikke et link — brug en <button>.
Før
<a href="/kurv"><svg>…</svg></a>Efter
<a href="/kurv" aria-label="Indkøbskurv, 2 varer"><svg aria-hidden="true">…</svg></a>html-has-lang3.1.1 Sproget på siden · A<html>-elementet har ingen lang-attribut. Skærmlæsere kan ikke vælge korrekt udtale og oplæser dansk tekst med engelske stemmeregler, så indholdet bliver næsten uforståeligt. Browsere bruger også lang til oversættelse og orddeling.
Sæt lang="da" på <html> i sideskabelonen (ét sted). Er sitet flersproget, sæt den aktuelle sides sprog dynamisk (da, en, de, sv, no).
Før
<html>Efter
<html lang="da">
Når en fejl rettes, gælder rettelsen typisk alle sider, der bruger samme skabelon. Derfor er det ofte header, footer, produktkort og checkout, der giver mest for indsatsen. Resultatet af scanning og manuel gennemgang skrives ind i tilgængelighedserklæringen som kendte afvigelser med kriterium og forventet dato.
Juridisk forbehold
Nordally hjælper med compliance og giver ikke juridisk rådgivning. Vi finder tekniske fejl, dokumenterer dem og skriver erklæringen ud fra de faktiske fund. Om jeres virksomhed er omfattet, og om jeres dokumentation er dækkende i jeres situation, er en vurdering, I selv eller en rådgiver må tage. Teksten er ikke en garanti for, at et websted opfylder alle lovkrav.
Spørgsmål og svar
Skal vi følge WCAG 2.2 i stedet for 2.1?
Loven peger på EN 301 549 V3.2.1, som henviser til WCAG 2.1. WCAG 2.2 bygger oven på 2.1 og tilføjer nye kriterier, så arbejde mod 2.2 AA dækker i praksis også 2.1 AA. Kravet er 2.1 AA, indtil standarden opdateres.
Er niveau AAA et krav?
Nej. EN 301 549 henviser til niveau A og AA. AAA-kriterier som udvidet kontrast er gode at kende, men indgår ikke i lovens krav.
Hvor stor en del af kriterierne kan testes automatisk?
Ifølge Deques dækningsrapport finder axe-core omkring 57 % af WCAG-fejlene automatisk. Resten kræver manuel gennemgang, fx tastaturflow, fokusrækkefølge og om alt-tekster giver mening.
Findes WCAG 2.1 på dansk?
Ja. W3C har en autoriseret dansk oversættelse af WCAG 2.1, og titlerne i tabellerne ovenfor følger den. Den er linket under kilder.
Kilder
Nordally hjælper med compliance og giver ikke juridisk rådgivning. Om jeres virksomhed er omfattet, og om jeres løsning er dækkende, er en vurdering, I selv eller en rådgiver må tage.