Kontrast på tekst
Der skal være tilstrækkelig høj kontrast mellem tekst og tekstens baggrund. Det gælder al tekst på websted og mobilapplikationer, fx overskrifter, brødtekst og tekst på knapper.
Disse to regler gælder for tekstkontrast:
- Tekst, som er mindre end 18 punkt (eller 14 punkt for fed tekst), skal have et kontrastforhold på minimum 4,5:1 mellem tekstfarve og baggrundsfarve.
- Stor tekst, som er større end 18 punkt (eller 14 punkt for fed tekst), skal have et kontrastforhold på minimum 3:1 mellem tekstfarve og baggrundsfarve.
Da stor tekst er lettere at læse end lille tekst, er minimumskravet til kontrast for stor tekst også lavere. Du kan bruge gratis værktøjer på nettet til at undersøge kontrastforholdet. Med lidt øvelse kan seende personer relativt nemt vurdere, om der er problemer med kontrastforholdet.
Kontrastforholdet er vigtigt for svagtseende personer, da tilstrækkelige kontrastforhold vil gøre det lettere for denne gruppe at læse tekster på websteder.
Bemærk: Det er vigtigt at notere sig, at punkt (pt) ikke er det samme som pixels (px). 14 pt og 18 pt svarer til henholdsvis 18,5 px og 24 px.
Relateret kriterie:
WCAG 2.1 succeskriterie 1.4.3 Kontrast (Minimum)
Gå til toppen
Tekstforstørrelse
Det er vigtigt for personer med nedsat syn at have mulighed for at forstørre teksten. Helt konkret handler det om, at tekst skal kunne forstørres op til 200 pct. på webstedet, uden der sker tab af indhold eller funktionalitet.
Det kan man nemt teste på en hjemmeside ved at forstørre tekst på en side op til 200 pct. ved at klikke [Control]-[+] på PC eller [Command]-[+] på Mac med tastaturet og derfra sikre, at intet indhold eller funktionalitet på webstedet går tabt i processen. Husk også at teste menuer, søgefunktioner, cookiemeddelelser mm.
Mens man tester, om teksten kan forstørres, kan man teste om siden er responsiv. Det betyder, at sidens omstruktureres afhængigt af skærmstørrelsen og enheden, så indholdet gengives uden tab af indhold og funktion. Du kan teste det ved at zoome op til 400 pct. på webstedet eller ved at åbne siden på en smartphone.
Med 400 pct. zoom på en computeren er kravet, at det skal virke på en skærm der kun er 1280 pixels bred. Der findes hjemmesider, der nemt kan fortælle dig, hvor stort et vindue du skal lave for at ramme 1280 pixels. Alternativt kan du bruge skærmen på en bærbar computer, som tit giver omtrent samme resultat.
Indsæt selv værdier og få åbnet et passende vindue her
Tekst og elementer skal kunne læses inden for skærmen, uden at brugeren skal scrolle frem og tilbage i flere retninger. Det gælder både for zoom og når webstedet vises på en mindre skærm – eksempelvis på en iPad eller en telefon. En fejl her kan være, hvis du har en meget lang overskrift på dit websted, som ikke brydes ned på flere linjer ved enten brug af browserens zoom eller ved visning på mindre skærm.
Den mest effektive måde at løse dette problem på, er at udvikle en responsiv hjemmeside, så alle har mulighed for at zoome op til 400 pct. på dit websted. Hvis du ikke har direkte adgang til at gøre det selv, bør du kontakte din hjemmesideleverandør, som kan rette det.
Relaterede kriterier:
WCAG 2.1 succeskriterie 1.4.4 Ændring af tekststørrelse
WCAG 2.1 succeskriterie 1.4.10 Ombrydningsvisning
Gå til toppen
For at blinde og svagtseende har mulighed for at orientere sig i et layout og i en teksts struktur, er det nødvendigt, at informationer, relationer og struktur på et websted enten kan læses med skærmlæser som tekst eller er formidlet i programmeringen.
Et eksempel på det er, at strukturen i en tekst med overskrifter, underoverskrifter og brødtekst skal kunne præsenteres via en skærmlæser, lige så vel, som det kan afkodes visuelt af en seende.
Andre eksempler på indhold der ikke er kodet, som det visuelt fremstår, er:
- tabeller, der ikke er kodet som tabeller
- menuer, som visuelt er inddelt i flere underordnede niveauer, men som ikke er det i koden
- indtastningsfelter, som visuelt har etiketter, beskrivelser eller andet, men som ikke er knyttet sammen med indtastningsfeltet i koden.
Du kan teste for en del fejl vedrørende information og relationer ved at slå dit stylesheet fra, sådan som nogle brugere har, og tjekke om indholdet på dit websted stadig er forståeligt uden CSS.
Relateret kriterie:
WCAG 2.1 succeskriterie 1.3.1 Information og relation
Gå til toppen
Kommunikation af interaktive elementer
Nogle brugere benytter hjælpeværktøjer til at navigere på nettet, eksempelvis skærmlæsersoftware, hvor teksten bliver læst højt. Andre bruger talegenkendelsessoftware, som gør det muligt at navigere med stemmestyring. Det er derfor vigtigt, at den information, som man finder på en hjemmeside, bliver tilsvarende kommunikeret til disse brugere.
Formålet med det er at sikre, at hjælpeværktøjer kan indsamle information om, aktivere (eller indstille) og holde sig opdateret om status for interaktive elementer på webstedet. Alt skal derfor tilføjes i webstedets kode. Helt specifikt i koden om interaktive elementer. Hvis brugerne af en webside kan ændre værdier, status eller egenskaber ved et element, skal det også ændre sig tilsvarende i koden, så hjælpeværktøjet kan formidle, at der er sket en ændring, og hvad den nuværende tilstand er.
Et eksempel kan være en knap, der folder en sidemenu ud. Denne handling skal også kommunikeres til brugere af hjælpeværktøjet. I dette tilfælde skal knappen have et navn og en rolle til at kommunikere hvilken type element, der er tale om, og en værdi, som fortæller om menuens tilstand, altså om den er foldet ind eller ud. På den måde bliver der både kommunikeret, hvad det interaktive element er, og hvad det kan bruges til. Andre eksempler kunne være formidling af, om en accordion er foldet ind eller ud, og for radioknapper eller checkbokse, om de er valgte eller ej.
Relateret kriterie:
WCAG 2.1 succeskriterie 4.1.2 Navn, rolle, værdi
Gå til toppen
Angivelse af sproget på siden
Der er krav om, at alle websider skal have hovedsproget angivet i koden. Hvis en webside indeholder afsnit, hvor delindholdet er et andet sprog end hovedsproget på siden, er der også krav om, at det skal opmærkes i koden.
Når det korrekte sprog er angivet, er det muligt for browsere at vise indholdet med de korrekte indstillinger for det pågældende sprog. Oplæsningsværktøjer vil dermed kunne vælge den korrekte accent og udtale for henholdsvis hovedsproget på sidens indhold og de yderligere sprog, der muligvis anvendes på dele af indhold på siden. Det hjælper brugere med funktionsnedsættelser til at forstå indholdet på hele siden, men også for de dele, hvor der skiftes til et andet sprog end hovedsproget.
Relaterede kriterier:
WCAG 2.1 succeskriterie 3.1.1 Sproget på siden
WCAG 2.1 succeskriterie 3.1.2 Sprog, der anvendes på dele af indhold
Gå til toppen
Meningsfulde linktekster
Brugere skal kunne forstå, hvad der sker, når de klikker på et link på et websted. Brugerne skal kunne bedømme dette ud fra en beskrivende link-tekst eller i linkets kontekst. Skal linket bedømmes ud fra konteksten, skal den omkringliggende tekst være tilstrækkeligt beskrivende.
Visuelt kan et link godt bestå af et billede eller et ikon, og i de tilfælde er det vigtigt for brugere af skærmlæsersoftware, at der også i koden er angivet et tekstnavn for linket. På denne måde kan brugere selv bestemme, om de ønsker at følge linket, når de får mulighed for at forstå linkets formål.
Når det er muligt, bør der stilles linktest til rådighed, som identificerer formålet med linket, uden at der er behov for yderligere kontekst. Hjælpeværktøjer kan vise brugere en liste af links på websiden. Linktekst, som er så meningsfuld som muligt, vil hjælpe brugere, som ønsker at vælge fra denne liste af links. Meningsfuld linktekst hjælper også dem, der ønsker at tabulere fra link til link. Meningsfulde links hjælper brugere med at vælge, hvilke links de skal følge, uden at kræve komplicerede strategier for at forstå siden.
Relateret kriterie:
WCAG 2.1 succeskriterie 2.4.4 Formål med links (i kontekst)
Gå til toppen
Etiketter på interaktive elementer
Der skal være match mellem den visuelle etiket på de interaktive elementer på siden, fx knapper og links, og den tekst man finder i webstedets HTML.
Eksempelvis skal en ”tilbage”-knap have et programmeringsmæssigt navn, også kendt som et tilgængeligt navn, svarende til den visuelle etiket. Det er vigtigt, at koden også indeholder den visuelle etiket på det interaktive element, hvilket i dette tilfælde er ordet ”Tilbage”. Det er især for at sikre, at brugere, som styrer deres computer med stemmestyring, ved hvad de skal kalde elementet for at aktivere det. Elementets navn i koden må godt indeholde mere end den visuelle etiket, fx “Tilbage til forsiden” for en knap, der visuelt blot hedder “Tilbage”.
Formålet med succeskriteriet er at sikre, at ordene, som visuelt fungerer som etiket for et interaktivt element, også er de ord, som er forbundet programmeringsmæssigt med det interaktive element. Det hjælper til at sikre, at personer, som bruger hjælpeværktøjer, fx skærmlæsere eller talegenkendelses-software, kan bruge de visuelle etiketter, som et middel til at interagere med de interaktive elementer, og dermed også interagere med webstedet.
Relateret kriterie:
WCAG 2.1 succeskriterie 2.5.3 Etiket i navn
Gå til toppen