Din guide til Webtilgængelighed – hent hjælp og vejledning her

Webtilgængelighed handler om gode brugeroplevelser

Webtilgængelighed handler om brugeroplevelse. Brugere har forskellige forudsætninger for at bruge et website, og mere end 20% af den danske befolkning er udfordret i deres digitale tilstedeværelse. Eksempelvis kan en bruger have en permanent synsnedsættelse, der betyder, at brugeren har brug for hjælp til at ”se” et website. Et andet eksempel er en bruger, der har stress, og dermed er midlertidigt kognitivt udfordret i sin færden på et website. Du kan med tilgængeligt webdesign hjælpe alle dine brugere på dit website.

Hvornår bliver min organisation omfattet af lovgivningen for webtilgængelighed?

”Nye” offentlige websites

dvs. lanceret efter 23-09-18 blev omfattet af lovgivning pr. 23-09-19
”Ældre” offentlige websites

lanceret tidligere end 23-09-18 blev omfattet af loven pr. 23-09-20
Offentlige mobile apps

blev omfattet pr. 23-06-21
Private virksomheders websites

omfattes fra juni 2025

Novicell styrker webtilgængeligheden for både offentlige og private organisationer

I Novicell er vi eksperter inden for webtilgængelighed og vi arbejder med det, fordi det giver mening at designe websites, der kan bruges af alle. Samtidig ved vi, at brugeroplevelse, trafik og performance hænger tæt sammen webtilgængelighed, og de er alle afgørende faktor for om et website fungerer efter hensigten. Vi forstår, hvorfor webtilgængelighed er vigtig og vi ved, hvordan vi laver tilgængelige websites.

Derfor skal du vælge Novicell som samarbejdspartner

Test

Tilgængelighedstest af eksisterende sites
Rådgivning

Rådgivning om tilgængelighed
Udvikling

Udvikling af tilgængelige websites
Uddannelse

Uddannelse af webredaktører
Serviceaftale

Serviceaftale ift. webtilgængelighed

Tjekliste til dig der arbejder med webtilgængelighed som redaktør

Formatér din tekst korrekt

• Brug H1, H2, H3, bullets, nummereringer og andre formateringer til at gøre dine sider nemme at overskue og scanne
Læsbarhed

• Skriv korte og enkle sætninger • Brug overskrifter og underoverskrifter til at skabe struktur og mening i dine tekster
Url og tags

• Giv alle sider en meningsgivende title og description, så det nemt kan afkodes, hvad siden handler om • Sørg for at alle url’er på websitet har en meningsgivende titel
Links

• Undgå links med titler som ”Læs mere” eller ”Se her” • Hold de beskrivende link-tekster på 100 anslag eller mindre
Instruktioner

• Lav ikke instruktioner, der udelukkende er baseret på placering på siden
Billeder

• Giv billeder en beskrivende og meningsfyldt alt-tekst, som forklarer billedet for fx blinde og synshæmmede • Undgå tekst på billeder, da det ikke kan læses af fx en digital assistent
Video og audio

• Lav transskriptioner af video og audio på dit website • Sørg for at alle videoer har undertekster
Dokumenter

• Sørg for korrekt opsætning i fx Word eller InDesign inden du eksporterer til PDF • Tjek at PDF’en ikke er låst på en måde, som forhindrer fx en skærmlæser i at kunne gengive det til en bruger

Hvilke problemer løser webtilgængelighed?

1 ud af 5 personer er udfordret digitalt, og derfor giver det god mening at arbejde med webtilgængelighed. Offentlige organisationer skal sikre, at alle har adgang til deres websites, og private virksomheder har store gevinster at hente ved at gøre deres websites tilgængelige. Når dit website overholder kravene om webtilgængelighed, er det ikke kun en fordel for de op mod 20 %, der lever med et handicap. Det er til fordel for alle dine besøgende. Og der er mange fordele at høste ved at arbejde med webtilgængelighed.

Høj webtilgængelighed giver:

Brugeroplevelse

Bedre brugeroplevelse
Øger trafik

Øger trafik på website med bedre placering på søgemaskiner
Konverteringsrater

Højere konverteringsrater
Performance

Øget performance
Selvbetjente brugere

Højere rate af selvbetjente brugere vs telefon og mail udvekslinger

WCAG (Web Content Accessibility Guidelines) tjekliste til designeren

Semantisk struktur

• Sørg for, at alt design og indhold følger en logisk semantisk struktur • Vær opmærksom på, at læserækkefølgen skal være den samme som den visuelle rækkefølge på siden
Farver og kontrast

• Sørg for tilstrækkelig kontrast mellem forgrund og baggrund • Forgrundstekst skal have tilstrækkelig kontrast til baggrundsfarver. Det inkluderer tekst på billeder, baggrundsgradienter, knapper og andre elementer
Tekst og fonte

• Benyt rigtig tekst frem for grafisk tekst, da det kan læses af skærmlæsere og langt bedre kan forstørres • Brug altid CSS til styling
Linjelængde

• Undgå for lange eller for korte linjer, da det sænker læsbarheden • Den optimale linjelængde for brødtekst er mellem 50-60 tegn pr. linje
Links

• Sørg for, at links skiller sig ud visuelt på andre måder end alene ved brug af farve • Design indikatorer som gør det nemt for keyboard-brugere at afgøre, om noget er et link
Animation, video og audio

• Gør opmærksom på billed- og mediealternativer i dit design • Undgå blinkende animationer og indhold, der auto-afspiller
Felter og formularer

• Sørg for, at indtastningsfelter og formularer har beskrivende etiketter og instruktioner • Vis altid valideringsfejl, fejlmeddelelser og tilbyd brugeren instruktioner til at rette eventuelle fejl
Interaktive elementer

• Gør det nemt at identificere interaktive elelementer som fx links og knapper • Sørg for, at stilarter og navngivning af interaktive elementer bruges konsekvent på hele webstedet
Navigation

• Gør det nemt at navigere på tværs af sitet på mere end én måde • Tilbyd fx en websitesøgning og et sitemap • Hjælp brugerne med at forstå, hvor de er på et websted eller en side ved at give orienteringsmærker som fx brødkrumme og klare overskrifter

Guide til de bedste WCAG tools

Der findes en lang række værktøjer og digitale tools som kan hjælpe dig i arbejdet med webtilgængelighed - uanset, om du arbejder med udvikling, indhold eller design. Vi har samlet de bedste her på siden. Du skal dog være opmærksom på, at de automatiserede tools til fx tjek af WCAG compliance kun finder ca. 30 % af de udfordringer, der kan være med tilgængelighed på dit site. Derfor bør de automatiserede værktøjer altid suppleres med en kvalitativ og struktureret gennemgang.

Siteimprove Accessibility Checker

Et simpelt plugin til Chrome. Stil dig på den side, du vil have tjekket og klik på ikonet i din værktøjslinje. Så får du et overblik over de problemer med webtilgængelighed, som værktøjet har detekteret opdelt i opgaver til henholdsvis redaktør, webmaster, designer og udvikler.
WAVE Web Accessibility Evaluation Tool

En række af værktøjer, der hjælper dig med at evaluere tilgængeligheden af dit websted og giver dig et visuelt overblik over de områder på dit websted, der ikke er tilgængelige.
ChromeLens

Plugin til Chrome som består af værktøjerne Lens og TabTracker. Lens er en visuel simulator, som giver dig mulighed for at opleve dit website, som var du blind eller delvis blind. Med TabTracker kan du teste om dit websites navigation, kan tilgås udelukkende med brug af keyboard.
Contrast Checker

Med Contrast Checker kan du nemt teste kontrastforholdet mellem baggrundsfarve og forgrundsfarve på dit website.
Check my links

Chrome extension som tjekker din webside for døde eller tomme links.
Youtube

Tilføj nemt undertekster til dine videoer via Youtube.
The A11 Project

Et brugerdrevet community, hvor du finder masser af praktiske guides og artikler og tips til at teste til indhold.
Acrobat Pro

Acrobat-værktøjet gør det nemt at oprette tilgængelige PDF-filer og kontrollere tilgængeligheden af eksisterende PDF-filer.
ChromeVox

Chrome-browserudvidelse som er let at installere og giver dig mulighed for at prøve skærmlæsning på dit websted hurtigt og nemt.
Color safe

Find tilgængelige farvepaletter baseret på WCAG retningslinjer for tekst- og baggrundskontrastforhold.
Color Contrast Analyzer

Colour Contrast Analyzer (CCA) hjælper dig med at bestemme læsbarheden af tekst og kontrasten til visuelle elementer som fx grafiske og visuelle indikatorer.
Link contrast checker

Tjek om der er korrekt kontrastforhold mellem linkfarve og fontfarve med dette værktøj.