Tilgængelighed på web
Gode brugeroplevelser for alle
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
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
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.
Vil du vide mere om dine muligheder, så kontakt os gerne:
Læs mere om relaterede emner
Oplevelser, business og brands - Brugervenlighed giver resultater
Vi har ekspertise og stor erfaring med frontend-udvikling
Novicell er et CMS-uafhængigt udviklingshus
Branding & Kommunikation, bliv skarp på dit brand sammen med os