WCAG tjekliste til designeren

Tjekliste til dig, der arbejder med webtilgængelighed som designer

I denne tjekliste har vi samlet en række gode råd og tips til dig, der arbejder med design af websites og apps og vil sikre, at dit design opfylder krav om webtilgængelighed. 

  • 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.
  • Sørg for tilstrækkelig kontrast mellem forgrund og baggrund.
  • Forgrundstekst skal have tilstrækkelig kontrast til baggrundsfarver. Dette inkluderer tekst på billeder, baggrundsgradienter, knapper og andre elementer.
  • Gør ikke opmærksom på vigtige oplysninger eller elementer alene med brug af farve. Brug en kombination af tekst, farve eller grafiske objekter. 
  • 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.
  • Undgå overdreven brug af versaler, da de er sværere at læse, særligt for skærmlæsere.
  • Vær opmærksom på fontstørrelser og undgå at anvende mindre end fontstørrelse 10pt+.
  • 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.
  • Sørg for, at links skiller sig ud visuelt på andre måder end alene ved brug af farve (fx ved at understrege dem).
  • Design indikatorer som gør det nemt for keyboard-brugere at afgøre, om noget er et link.
  • Design et ”skip til indhold” link og gør det tilgængeligt i toppen på alle sider.
  • Undgå links med intetsigende tekst som ”klik her” eller ”læs mere”.
  • Gør opmærksom på billed- og mediealternativer i dit design som fx:
    • Synlige links til transkriptioner af lyd
    • Synlige links til beskrivende versioner af videoer
    • Tekst sammen med ikoner og grafiske knapper
    • Billedtekster og beskrivelser til tabeller eller komplekse grafer
  • Samarbejd med indholdsforfattere og udviklere for at give alternativer til ikke-tekstindhold.
  • Undgå blinkende animationer og indhold, der auto-afspiller.
  • Giv brugerne mulighed for at stoppe animationer eller automatisk afspilning af lyd. Dette gælder for karrusler, image sliders, baggrundslyd og videoer.
  • 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.
  • Undgå for meget plads mellem etiketter og felter.
  • Gør det nemt at identificere interaktive elelementer som fx links og knapper.
  • Du kan fx ændre udseendet af links, når mus eller tastatur markerer det eller ved berøring af skærmen. 
  • Sørg for, at stilarter og navngivning af interaktive elementer bruges konsekvent på hele webstedet.
  • 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.
  • Sørg for, at navigation på tværs af sider  har ensartet navngivning, styling og position.
  • Lav et ”skip til indhold” link og gør det tilgængeligt i toppen på alle sider.

Vil du vide mere om webtilgængelighed og hvordan du imødekommer lovgivningen om WCAG principperne, så tag fat i mig.