Princip 1
Opfatteligt (Perceivable)
- Tekstalternativer til alt ikke-tekstindhold (billeder, ikoner, grafik)
- Tydelig farvekontrast – minimum 4,5:1 for brødtekst
- Indhold præsenteres ikke kun via farve alene
- Videoundertekster og lydbeskrivelser
WCAG 2.2 Tilgængelighed
Design der virker for alle
Tilgængelighed er ikke en funktion, det er fundamentet. Her finder du principper, vejledninger og eksempler på inkluderende digitalt design.
Denne hjemmeside
Tilgængelighedsfunktioner på AutismeGuiden
Jeg har implementeret disse funktioner for at gøre din oplevelse bedre.
Mørkt tema
Reducer belastning af øjnene med et fuldt understøttet mørkt farvetema.
Justerbar skriftstørrelse
Vælg mellem normal, stor og ekstra stor tekst efter dine behov.
Reduceret bevægelse
Slå animationer fra med ét klik – alle bevægelser forsvinder.
Tastaturnavigation
Komplet tastaturnavigation med synlige fokusringe på alle elementer.
Spring-til-indhold
Et skjult link øverst på siden til at springe direkte til indhold.
Semantisk HTML
Korrekt brug af HTML5-semantik og ARIA for skærmlæsere.
Høj kontrast
Alle farvekombinationer overholder WCAG 2.2 kontrastkrav (AA).
Responsivt design
Virker på alle skærmstørrelser fra mobil til stor skærm.
Præferencer huskes
Dine tilgængelighedsindstillinger gemmes til næste besøg.
WCAG 2.2
De fire WCAG-principper
Web Content Accessibility Guidelines (WCAG) 2.2 er den internationale standard for tilgængelighed på nettet. Den bygger på fire principper.
Princip 2
Betjenbart (Operable)
- Al funktionalitet er tilgængelig via tastatur
- Ingen tastaturfælder – brugere kan altid navigere videre
- Spring-til-indhold link øverst på siden
- Fokus-indikatorer er synlige og tydelige
- Ingen blinkende indhold over 3 Hz (risiko for epilepsi)
Princip 3
Forståeligt (Understandable)
- Sproget er angivet på siden (
lang="da") - Fejlmeddelelser er beskrivende og hjælpsomme
- Navigation er konsistent på tværs af sider
- Klart og enkelt sprog – undgå jargon
- Forudsigelig adfærd ved interaktioner
Princip 4
Robust (Robust)
- Semantisk korrekt HTML-markup
- ARIA-etiketter og roller anvendt korrekt
- Kompatibel med skærmlæsere og hjælpeteknologier
- Fremtidssikret – virker i nye og ældre browsere
Konformitetsniveauer
ANiveau A
Minimum krav. Basisniveau der fjerner de mest alvorlige barrierer.
AANiveau AA
Standarden for de fleste offentlige og kommercielle websites. AutismeGuiden sigter mod AA.
AAANiveau AAA
Det højeste niveau. Ikke krævet for hele sider, men anbefales hvor det er muligt.
Neurodivergent-venligt design
Design-principper for alle neurotyper
Udover WCAG er der ekstra overvejelser for at skabe brugeroplevelser der er rare for autistiske og andre neurodivergente brugere. Et neurodivers samfund kræver digitale rum, der er designet til at inkludere— ikke normalisere.
Rolig æstetik
Undgå visuel støj. Brug rolige farver, tilstrækkelig whitespace og et klart hierarki. Ingen pludselige pop-ups, auto-afspilning eller blinkende elementer.
Forudsigelig navigation
Navigation er konsistent på tværs af alle sider. Brugere ved altid, hvor de er, og hvad der sker, hvis de klikker på noget.
Tydelig hierarki
Brug overskrifter korrekt (H1, H2, H3). Tekst er opdelt i overskuelige blokke med generøs afstand. Vigtigste information først.
Farver med mening
Farver understøtter kommunikation, men er aldrig det eneste signal. Altid kombineret med tekst, ikon eller form.
Reduceret sensorisk input
Undgå uventede lyde, store farvekontrast-spring, tætpakkede layouts og gentagne mønstre der kan virke overvældende.
Brugerkontrol
Giv brugerne mulighed for at justere: skriftstørrelse, tema, bevægelse. Respekter OS-indstillinger som prefers-reduced-motion.
Klart sprog
Brug enkelt, direkte dansk. Forklar fagudtryk. Undgå sarkasme, idiomer og tvetydige vendinger.
Ingen tidspres
Session-timeouts? Giv god varsel og tilstrækkelig tid. Formularer gemmer fremgang. Intet indhold forsvinder pludseligt.
Eksempler
God og dårlig praksis
Konkrete eksempler på hvad der virker og hvad der skaber barrierer.
God praksis
God praksis: Fokus-indikatorer
Synlige, tydeligt afgrænsede fokusringe med høj kontrast på alle interaktive elementer.
Dårlig praksis
Dårlig praksis: Fjernede fokus-indikatorer
At fjerne fokusrammen via CSS (outline: none) fjerner tastaturnavigation for brugere der er afhængige af det.
Dette element har ingen synlig fokusring
God praksis
God praksis: Beskrivende links
Links forklarer tydeligt, hvad der sker ved klik— uanset kontekst.
Dårlig praksis
Dårlig praksis: Uklare links
"Klik her" eller "Læs mere" giver ingen mening uden kontekst, især for skærmlæserbrugere.
Klik her
God praksis
God praksis: Farvekontrast
Tekst på baggrunden har minimum 4,5:1 kontrastratio for normal tekst, 3:1 for stor tekst.
Dårlig praksis
Dårlig praksis: Lav kontrast
Lysegrå tekst på hvid baggrund er svær at læse for alle, og umulig for mange med synsnedsættelse.
Svær at læse
Prøv tilgængelighedsfunktionerne
Brug tilgængelighedspanelet (knappen nede til højre eller i footeren) til at justere tema, skriftstørrelse og bevægelse.