Guide til praktisk implementering af webtilgængelighed

Implementering af Web Content Accessibility Guidelines (WCAG) 2.1 og den europæiske standard EN 301 549 kan gøres på mange måder.

Med input fra vores medlemmer har vi samlet en lille overordnet guide til, hvordan I med tre enkle fase kan lave en praktisk implementering af reglerne.

Vi anbefaler dog altid, at man tager eksperter med på råd vedr. den konkrete implementering. Specielt hvis man har brug for professionel hjælp til at sikre, at nogle af nedenstående elementer gennemføres korrekt.

1. Forberedelse og analyse

Første skridt i implementeringen er en grundlæggende analyse af hjemmesidens nuværende tilgængelighedsniveau.

Oplæring og forståelse af WCAG 2.1 & EN 301 549. Først og fremmest er det vigtigt, at man sætter sig ind WCAG 2.1 (niveau A, AA, AAA) samt EN 301 549. Identificér så de vigtigste krav, der gælder for din hjemmeside og uddan dit team i tilgængelighedsprincipperne.

Lav en tilgængelighedsaudit (Baseline-test). Her kan værktøjer som f.eks. axe DevTools eller WAVE bruges til at scanne for tekniske fejl, mens manuelle tests bør gennemføres for at evaluere brugerfladens intuitive navigation og kompatibilitet med skærmlæsere.

Derudover bør du:

  • Teste siden med skærmlæsere (NVDA, JAWS, VoiceOver)
  • Evaluere tastaturnavigation og kontrastforhold
  • Dokumentére de største problemer i en tilgængelighedsrapport

Definer mål og prioriteter. Lav en liste over kritiske problemer, der skal løses først (f.eks. manglende alternativ tekst, utilgængelige formularer). Derefter bør du etablere en arbejdsgruppe, definere deadlines og roller for implementeringen.

2. Design og udvikling

I denne fase skal I oversætte direktivets krav til konkrete tekniske løsninger. De væsentligste elementer i denne fase er:

  • Semantisk HTML og ARIA-forbedringer. Sørg for korrekt brug af HTML5-elementer (<header>, <nav>, <main>, <footer>, <button> osv.). Implementér ARIA-attributter (aria-label, aria-live, aria-describedby).
  • Sikre tastaturnavigation. Test at alle funktioner kan bruges uden mus ved hjælp af Tab, Enter, Space og piletaster. Implementér fokusmarkering (:focus i CSS).
  • Tekstalternativer til ikke-tekstindhold. Tilføj alt-tekster til alle billeder og ikoner. Brug aria-label eller aria-labelledby til dekorative elementer. Gør videoer tilgængelige med undertekster og transskriptioner.
  • Kontrastforbedringer og læsbarhed. Sørg for, at tekst har et kontrastforhold på mindst 4.5:1 (3:1 for stor tekst). Brug resizable tekst og understøt browserens zoom-funktion.
  • Forbedre formularer og fejlmeddelelser. Giv tydelige labels (<label>-tags) og placeholder-tekst. Brug aria-describedby til at forklare inputfelter. Tilføj live-fejlmeddelelser (aria-live=‟assertive‟).
  • Dynamisk indhold og ARIA live regions. Implementér aria-live=‟polite‟ til opdateringer (f.eks. AJAX-ændringer). Gør modalvinduer tilgængelige med aria-hidden=‟true‟ og tastaturnavigation.
  • Implementer en tilgængelighedserklæring. Opret en „Tilgængelighedserklæring‟-side (krævet i EU). Beskriv, hvilke WCAG 2.1-krav der er opfyldt, og hvordan brugere kan rapportere tilgængelighedsproblemer. Du kan evt. finde inspiration til en sådan på Polestars hjemmeside.
  • Test i forskellige browsere og enheder. Test hjemmesiden i Chrome, Firefox, Edge og Safari. Test med NVDA, JAWS og VoiceOver. Brug mobiltest (iOS/Android) med VoiceOver og TalkBack.

Husk at EN 301 549-standarden tilføjer krav til dokumenttilgængelighed, herunder struktureret brug af overskrifter i PDF-filer og korrekt tagging af tabeller og lister, ligesom det er et krav, at mobilapplikationer skal testes for kompatibilitet med teknologier som VoiceOver og TalkBack.

3. Vedligeholdelse og overvågning

Sørg for at hjemmesiden forbliver tilgængelig, også efter fremtidige opdateringerne. Det kan du bl.a. sikre ved at:

Automatisere tilgængelighedstests. Brug værktøjer som axe-core, Lighthouse og WAVE til at scanne for fejl. Integrér tilgængelighedstest i CI/CD-pipelines.

Uddanne teamet løbende. Sørg for at designere, udviklere og redaktører forstår tilgængelighedsprincipperne ved at investere i træning i f.eks. WCAG 2.1s fire kerneprincipper (opfattelig, anvendelig, forståelig, robust) og EN 301 549s specifikke krav til ikke-web-indhold.

Planlægge regelmæssige audits. Kør en manuel tilgængelighedsrevision hver 6.-12. måned. Inkludér tests af brugere med synshandicap, motoriske udfordringer eller kognitive funktionsnedsættelser til at teste hjemmesiden.

Dokumentér tilgængelighedsfremgangen. Udarbejde og opdater løbende en tilgængelighedsrapport, som skal ligge tilgængelig på hjemmesiden (EU krav). Microsofts praksis med Accessibility Conformance Reports (ACR) kan tjene som inspiration til struktureret rapportering af status.

Hvis du vil vide mere