Guide i webtilgængelighed - designkriterier

Der er en række krav til hjemmesidens design, som man skal leve op til i henhold til lovgivningen om webtilgængelighed. I denne guide gennemgår vi de områder, du skal være særlig opmærksom på, og vi vejleder dig i, hvordan du sikrer, at udseendet på din 3S-hjemmeside opfylder kravene.

Når du arbejder med designindstillingerne for din 3S-hjemmeside, skal du være opmærksom på følgende: 

Udseendet af dine links 

Farvekontraster

Henvisninger til farver

Tekststørrelse og tekstafstand 

Undgå billeder med tekst 

Logisk indholdsstruktur

Links

Hvis du midt i et almindelig tekstafsnit har indsat et link, skal linket visuelt skille sig tydeligt ud fra den øvrige tekst. Typisk har links en anden farve end den almindelige tekst, men dette er ikke nok til at leve op til webtilgængelighedskravene. Links skal også understreges eller markeres med fed.

I 3S kan du selv vælge, hvilken farve dine links skal have, samt om de skal markeres med fed, stå i kursiv eller være understreget. Sådan indstiller du udseendet af dine links i 3S:

1. Klik på Typografi under Design-kategorien i modul-menuen i 3S

2. Tryk på fanen Link

3. Indstil udseendet af dine links ved at vælge din ønskede linksfarve, samt om linksene skal være fed, kursiv og/eller understreget. 

Farvekontraster 

De nye krav om webtilgængelighed sætter særligt fokus på kontrastforholdet mellem de farver, du bruger på din hjemmeside. Her tænkes der bl.a. på forholdet mellem skriftfarve og baggrundsfarve. For brugere med synsbesvær eller personer, der er farveblinde, kan nogle farvekombinationer nemlig være svære at skelne imellem. Det er f.eks. en dårlig idé at vælge en lys baggrundsfarve, når skriftfarven også er lys. Se bare eksemplet nedenfor med den lysegule baggrund og hvid skrift: 

Eksemplet ovenfor med den turkisgrønne baggrund og hvide skrift er meget nemmere at se. 

Tilgænglighedslovgivningen har helt specifikke krav til, hvordan kontrastforholdene på din hjemmeside skal være. Helt præcist skal kontrastforholdene mellem dine farver mindst være 4,5:1. Dette krav gælder både for tekst på billeder, baggrundsgradienter, knapper og andre elementer. Der findes dog enkelte undtagelser:

• Ved tekst med stor skrift (min. størrelse 18 eller str. 14 med fed skrift) skal kontrastforholdet i stedet være mindst 3:1.
• Billeder eller tekst, som udelukkende har et dekorativt formål og altså ikke har relevans for forståelsen af indholdet, skal ikke leve op til kravet. 
• Ved visuelle elementer, som er nødvendige for forståelsen, skal kontrastforholdene i stedet være 3:1. Det kunne f.eks. være infografik, grafer ol., hvor det er vigtigt at kunne aflæse kurverne/søjlerne.  
• Logoer er undtaget fra kravet om kontrastforhold på mindst 4,5:1. 

Det er vigtigt, at du tjekker, om alle dine farvekontraster på hjemmesiden lever op til tilgængelighedskravene. Der findes en række forskellige værktøjer, som kan tjekke dette. Vi vil anbefale dig at bruge værktøjet Monsido Color Contrast Checker. Derfor har vi lavet en særskilt guide, hvor vi viser, hvordan du bruger værktøjet til at tjekke kontrasterne på din 3S-hjemmeside, samt hvilke farveindstillinger der findes i 3S. Læs guiden "Sådan tjekker du, om farvekontrasterne på din 3S-hjemmeside lever op til tilgængelighedskravene".

Henvisninger til farver 

I guiden om redaktørkriterierne nævner vi, at man skal undgå at bruge formuleringer som "... i boksen til højre/venstre", når man henviser til andre elementer eller placeringer på hjemmesiden. Det samme gælder henvisninger, som tager udgangspunkt i farver. Det vil sige, at man også skal undgå at skrive: ”feltet markeret med rød” eller "tryk på den grønne boks”.  I sådanne tilfælde skal du i stedet refererer til navnet/overskriften på feltet/boksen. Feks.: "Tryk på boksen Tilmeld Nyhedsbrev".

Tekststørrelse og tekstafstand 

Størrelsen på teksten på din hjemmeside samt afstanden imellem teksten er afgørende for, om brugere med synsbesvær kan læse det. Undgå derfor at bruge alt for små skriftstørrelser. Der er desuden et helt specifikt krav om, at linjeafstanden i teksten på din hjemmeside mindst skal være 1,5. 

Sådan ændrer du skriftstørrelse og linjeafstand i 3S:

 

1. Klik på Typografi under Design-kategorien i modul-menuen i 3S:

2. Her kan du ændre både skriftstørrelsen og linjeafstanden for hhv. Overskrift 1, Overskrift 2, Overskrift 3 og brødtekst - skift blot mellem fanerne i toppen (se nedenfor, hvor fanen brødtekst er valgt). 

Brødtekst i størrelsen normal (100 %) svarer til skriftstørrelse 16 px. 

 

Billeder med tekst

Som vi også nævner i guiden om redaktørkriterierne, så skal billeder med tekst helst undgås. Det skyldes, at skærmlæsere simpelthen ikke kan læse teksten på billedet. Det vil sige, at billeder, som man har tilføjet tekst på i et billedbehandlingsprogram, ikke lever op til kravene. I stedet kan du tilføje billedet uden tekst og indsætte teksten ved siden af billedet eller som billedtekst. Flexboksen i 3S må godt bruges, da teksten her ikke er skrevet ind på selve billedet, men lægges som et lag ovenpå selve billedet. 

Indholdsstruktur 

Udover kravene til selve indholdet på siden (links, billeder, farver, tekst m.m.), som vi netop har gennemgået, så skal strukturen af indholdet også være på plads. For at leve op til tilgængelighedskravene skal du sørge for, at alt design og indhold på din hjemmeside følger en logisk struktur. Det vil sige, at læserækkefølgen skal være den samme som den visuelle rækkefølge på siden. Er der nogle elementer på din side, som er placeret i en rækkefølge, der er nødvendig for forståelsen af indholdet, så skal de kunne læses op i samme rækkefølge af en skærmlæser. Det sker kun, hvis indholdet er programmeret i den rigtige rækkefølge. I 3S struktureres indholdet i kolonner. Skærmlæsere vil læse alt indholdet i kolonne 1, inden den går videre til kolonne 2. Se markeringerne nedenfor. 

Ønsker du, at elementet kommende datoer skal læses lige efter elementet konfirmation, skal du flytte elementet konfirmationsforberedelse til en ny kolonneopdeling, så denne kolonne kun består af elementerne konfirmation (i kolonne 1) og kommende datoer (i kolonne 2) .

Vær derfor opmærksom på, hvor du placerer indholdet, og sørg for, at det er opsat logisk.