WCAG 2.1 — webtilgængelighed

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 Webtilgængelighed og WCAG

WCAG (Web Content Accessibility Guidelines) 2.1 er standarden for tilgængeligt web — vigtig for de ~15% af befolkningen med funktionsnedsættelse.

4 principper (POUR):

1. Perceivable: information kan opfattes (alt-tekst på billeder, undertekster på video)

2. Operable: kan betjenes med tastatur og hjælpemidler

3. Understandable: forudsigeligt og hjælpsomt

4. Robust: virker med skærmlæsere og fremtidige teknologier

Niveauer: A (minimum), AA (standard krav i DK), AAA (bedst)

Praktiske krav:

```html

<!-- Alt-tekst på billeder -->

<img src="logo.png" alt="Presently logo">

<!-- Beskrivende links -->

<a href="...">Læs mere om tilgængelighed</a> <!-- IKKE: "klik her" -->

<!-- Tydelig fokus-indikator -->

:focus { outline: 2px solid #0066cc; }

<!-- Farvekontrast minimum 4.5:1 (AA) -->

```

Lovkrav: EU Web Accessibility Directive kræver AA-niveau for offentlige websites.

Læringsmål

• Forklare WCAG's 4 POUR-principper og 3 niveauer
• Implementere basis-tilgængelighed (alt-tekst, semantik, kontrast)
• Teste en side med automatiseret tool (axe, Lighthouse)
• Navigere en side kun med tastatur og vurdere tilgængelighed

Sådan kan du arbejde med emnet

• Vælg en hjemmeside og vurder den i forhold til tre WCAG-kriterier
• Forklar hvad alt-tekst på billeder bruges til, og giv et godt og et dårligt eksempel
• Diskutér hvordan farvekontrast påvirker brugere med nedsat synsevne

Træningsforslag

• Test din side med Lighthouse i Chrome DevTools og ret tilgængelighed
• Naviger en kompleks webside kun med Tab-tasten
• Lær at bruge NVDA skærmlæser (gratis) og test din side