Hvorfor er WCAG vigtigt?
Dette afsnit illustrerer det reelle behov for webtilgængelighed. Verdenssundhedsorganisationen (WHO) estimerer, at over 15% af verdens befolkning lever med en form for handicap. På nettet møder disse brugere ofte barrierer, hvis designet ikke følger WCAG-standarden.
Fordeling af funktionsnedsættelser
Illustrativ fordeling af barrierer oplevet på nettet.
Mere end bare et lovkrav
-
⚖️
Lovgivning (EAA & Webtilgængelighedsloven) Offentlige instanser i Danmark skal allerede overholde WCAG 2.1 AA. Med European Accessibility Act (EAA) i 2025 gælder strenge krav også for store dele af den private sektor (e-handel, bankvæsen, etc.).
-
📈
Bedre SEO & Forretning Søgemaskiner læser websider meget ligesom skærmlæsere gør. Semantisk HTML og klare tekster forbedrer din placering på Google og udvider din kundebase betydeligt.
-
🤝
Universelt Design Tilgængelighed hjælper alle. God kontrast hjælper folk i sollys. Undertekster hjælper folk i stillekupeer. Klar navigation hjælper den stressede bruger.
De 4 Grundprincipper (POUR)
Hele WCAG-standarden er bygget op omkring fire overordnede principper. Klik på hvert princip herunder for at forstå, hvordan det påvirker dit webdesign og interaktioner.
Opfattelig (Perceivable)
Brugere skal kunne opfatte den information, der præsenteres. Det må ikke være usynligt for alle deres sanser.
- Alt-tekst: Alle billeder skal have beskrivende alternativ tekst til skærmlæsere.
- Kontrast: Tekst skal have høj nok kontrast mod baggrunden (min. 4.5:1 for normal tekst).
- Undertekster: Videoer skal have undertekster til døve/hørehæmmede.
Blinde brugere, svagsynede, farveblinde og personer i støjende miljøer (eller dem der har glemt høretelefonerne).
Niveauer for Overholdelse
WCAG-retningslinjerne er opdelt i tre niveauer afhængigt af, hvor omfattende tilgængeligheden er implementeret. De bygger på hinanden ligesom en pyramide.
Minimumskravet
Dette er det absolutte minimum. Hvis ikke et website overholder Level A, er det fundamentalt utilgængeligt for mange brugere med handicap.
Eksempel: Alt-tekst på billeder.Branchestandarden
Dette niveau fjerner de mest almindelige barrierer. Det er dette niveau, som den danske lovgivning (og den europæiske EAA) kræver at man overholder.
Eksempel: Farvekontrast på min. 4.5:1, synlig tastatur-fokus.Den Gyldne Standard
Det højeste niveau. Det anbefales ikke at kræve Level AAA som et generelt krav for hele websteder, da det for nogle typer indhold er umuligt at opfylde.
Eksempel: Tegnsprogstolkning til alle videoer.Hvad tilføjede version 2.1?
WCAG 2.1 blev udgivet for at bygge videre på 2.0. Fokus i opdateringen var særligt på mobilbrugere, brugere med svagt syn og brugere med kognitive handicap.
Skærmorientering (1.3.4)
Et website må ikke være låst til kun "portræt" eller "landskab" format. Det skal fungere uanset hvordan en bruger holder sin mobil eller tablet (medmindre det er strengt nødvendigt f.eks. til et klaverspil).
Tekstafstand (1.4.12)
Designet må ikke gå i stykker, hvis brugeren overskriver CSS for at øge linjeafstanden (til 1.5x), afsnitsafstanden (2x), eller bogstavafstanden. Dette er afgørende for folk med ordblindhed.
Svæv eller fokus-indhold (1.4.13)
Når en tooltip eller dropdown dukker op ved hover, skal den kunne afvises (f.eks. med ESC-tasten), man skal kunne flytte musen over den uden at den forsvinder, og den må ikke forsvinde af sig selv.
Interaktiv Demo: Ikke-tekst Kontrast (1.4.11)
Ny i 2.1I WCAG 2.0 gjaldt kontrastkrav kun for tekst. WCAG 2.1 introducerede krav om, at grafiske elementer, som grafer, knapper og inputfelter, også skal have et kontrastforhold på mindst 3:1 mod deres baggrund. Test forskellen herunder.
Opret en konto for at fortsætte
Kontrast: ~1.5:1 (Fejler WCAG 2.1 AA)
Svært at se kanten på inputfeltet og teksten på knappen.
Kontrast: >4.5:1 (Består WCAG 2.1 AA)
Tydelige grænseflader, der er lette at se for alle.