Artikel Tilgængelighed
Tilgængelighed

Forstå WCAG gennem POUR

WCAG står for Web Content Accessibility Guidelines og er ikke bare noget, der er nice to have. Det er et lovkrav og en forudsætning for enhver moderne hjemmeside. Retningslinjerne sikrer, at dit indhold kan bruges af mennesker med handicap og andre udfordringer, men de løfter samtidig oplevelsen for alle brugere.

Offentlige hjemmesider skal leve op til WCAG level AA, og hvordan du gør det, kan du læse mere om her.

 

Rasmus Otto-Sidelmann
Digital Designer, GoPublic

P-O-U-R?

Tilgængelighed handler om mere end skærmlæsere

Når man taler om WCAG, tænker mange på blinde brugere og skærmlæsere. Det er også en vigtig del, men tilgængelighed rækker langt bredere end det. Handicap og udfordringer kan tage mange former, og det gælder også kognitive forhold som fx ADHD, hvor en rodet struktur, for mange indtryk eller manglende overblik kan gøre en side svær at bruge. En klar opbygning, tydelige overskrifter og muligheden for selv at styre indhold som animationer og video gør ikke kun en forskel for få, men for mange.

Tilgængelighed handler derfor i høj grad om at reducere friktion og gøre indhold lettere at afkode. Når du arbejder med WCAG, designer du ikke kun for en snæver målgruppe, men for en bred virkelighed af forskellige behov og måder at bruge nettet på.

Samtidig betyder WCAG ikke, at dine sider skal være kedelige. Det handler ikke om at fjerne elementer, men om at bruge dem rigtigt, så design og funktionalitet går hånd i hånd.

For at gøre det konkret er WCAG bygget op omkring fire grundprincipper, som tilsammen definerer, hvad en tilgængelig hjemmeside er. De kaldes POUR og står for følgende: 

  • Perceivable
  • Operable
  • Understandable
  • Robust

I de følgende afsnit vil hvert enkelt bogstav blive forklaret. 

Part 1

Perceivable – Kan brugerne se eller høre dit indhold?

Det første skridt i POUR indebærer, at dit indhold kan opfattes. Dit indhold skal kunne opfattes af alle, også dem der ikke kan se billeder eller har nedsat syn. Derfor skal billeder have meningsfulde billedtekster, der forklarer indholdet. Samtidig er farvekontrast afgørende for læsbarheden. Her findes der konkrete minimumskrav: For større tekst skal kontrastforholdet være mindst 3:1, og for mindre tekst mindst 4.5:1. Det kan virke teknisk, men pointen er enkel: Tekst skal være tydelig og nem at læse for alle.

Begge eksempler her viser farvekontraster, der ikke lever op til level AA-standarden inden for WCAG. De vil derfor være svære at tyde for nogle brugere. 

Part 2

Operable - Kan brugere navigere i dit indhold?

Når indholdet først kan opfattes, skal det også kunne bruges. Alle brugere skal kunne bevæge sig rundt på dit site, også uden brug af mus. Det betyder blandt andet, at navigation skal fungere via tastatur, og at det er tydeligt, hvilket element der er aktivt, når man bevæger sig rundt på siden, fx ved at links og knapper får en synlig markering. Brugere skal også have mulighed for at springe gentagende elementer som menuer over.

Derudover skal dine links kunne forstås uden at læse teksten omkring dem. Formuleringer som “hør mere” er ikke nok. Skriv i stedet eksempelvis “Hør mere om vores medlemsfordele”, så det er tydeligt, hvad linket fører til.

De fire knapper er alle utilgængelige, fordi de ikke fortæller noget om, hvad de refererer til. Hvis du får læst disse knapper op med skærmlæser, vil de ikke give mening. 

Part 3

Understandable – Kan brugerne forstå dit indhold?

Når man kan bruge siden, skal man også kunne forstå den. Indholdet skal være struktureret og skrevet, så det er let at forstå. Brug H1 til at markere sidens vigtigste overskrift, H2 til nye sektioner og H3-H6 til underopdelinger inden for samme sektion. Det skaber et klart hierarki, som både brugere og skærmlæsere kan navigere i.

Sproget bør være letforståeligt og uden unødvendige tekniske termer. Infografikker og visuelle elementer må mere end gerne være der til at understøtte budskabet, men de kan ikke stå alene uden forklarende tekst. 

Mere teknisk bør dit site også være angivet med korrekt sprog i koden, fx dansk via en såkaldt lang attribute, så skærmlæsere ved, hvordan indholdet skal læses op. Undgå desuden formuleringer som “se menuen til venstre” eller “klik på knappen til højre”, da layoutet varierer på tværs af enheder.

Her ses en korrekt taksonomisk opbygning af din tekst, som en skærmlæser vil kunne forstå.

Part 4

Robust – Kan teknologien læse og forstå dit indhold?

Til sidst skal det hele også fungere teknisk. Dit website skal være bygget, så det fungerer på tværs af browsere, enheder og hjælpemidler. Det kræver semantisk korrekt HTML og brug af gældende standarder.

Husk også at arbejde med landmarks i koden, som fortæller en skærmlæser, hvilken del af siden brugeren befinder sig på, fx header, navigation eller footer. Det sikrer, at indholdet er tilgængeligt og brugbart, uanset hvordan det tilgås. Læs mere om Accessibility Landmarks her.

Når du arbejder med POUR som ramme, bliver tilgængelighed ikke bare en tjekliste, men en integreret del af dit design og din udvikling. Det handler i sidste ende om at skabe løsninger, der fungerer for flest muligt, uden at gå på kompromis med hverken funktionalitet eller æstetik.

Fordele ved WCAG – også for dem uden handicap

WCAG handler ikke kun om tilgængelighed, men giver en række klare fordele for dit website generelt.

  1. Først og fremmest styrker det din SEO, fordi søgemaskiner foretrækker sider med klar struktur, korrekt opmærkning og meningsfuldt indhold.
  2. WCAG bygger desuden på gennemprøvede UX-principper, hvilket betyder, at en tilgængelig side også er mere brugervenlig for alle, ikke kun personer med handicap.
  3. Endelig spiller WCAG en vigtig rolle i en tid, hvor AI i stigende grad crawler og forstår indhold. De samme principper, der gør din side nem at bruge for mennesker, gør den også nem at aflæse for maskiner. Klare overskrifter og landmarks gør det muligt at opdele indhold i meningsfulde sektioner. Billedtekster, undertekster og transskriptioner gør indhold tilgængeligt og forståeligt, også for systemer der ikke kan “se” eller “høre”. Beskrivende links reducerer tvetydighed, og ren, semantisk HTML sikrer, at både hjælpemidler og crawlers kan tolke din side korrekt.

Med andre ord er WCAG ikke kun godt for brugerne, men også for synlighed, teknologi og fremtidssikring.

Værktøjer til at teste tilgængelighed

Der findes flere værktøjer, der kan hjælpe dig med at teste, om din hjemmeside lever op til WCAG.

  • WAVE Accessibility Tool giver et hurtigt visuelt overblik over problemer direkte på siden.
  • Google Lighthouse kan køre automatiske analyser af både performance og tilgængelighed.
  • Axe DevTools er særligt nyttigt for udviklere, der vil teste direkte i browseren.
  • Derudover kan værktøjer som WebAIM’s Color Contrast Checker hjælpe med at sikre, at dine farver lever op til kravene for læsbarhed.