Linkkontrast
Silktide finder links i din tekst, der kun adskiller sig fra ordene omkring dem ved farve, og hvor farveforskellen er for lille til, at personer med nedsat farvesyn kan få øje på dem. Links skal kunne genkendes som links, ellers kan læserne ikke bruge dem.
Hvorfor det er vigtigt
Omkring 1 ud af 12 mænd og 1 ud af 200 kvinder har nedsat farvesyn. Hvis det eneste, der markerer et link, er en diskret farveændring, ser disse læsere almindelig tekst og opdager aldrig, at linket findes. Det betyder mistet navigation, mistede opfordringer til handling og en fejl på -niveau A – dette er blandt de mest grundlæggende krav til tilgængelighed.
Sådan løser du det
Der er to måder at gøre et integreret link kompatibelt på:
- Adskil det på mere end farve – den enkleste løsning er en understregning, hvilket de fleste læsere forventer, at links har. En kant, baggrund eller en mærkbart kraftigere skrifttykkelse fungerer også.
/* Links, der kun er afhængige af farve */
a { color: #4a6da7; text-decoration: none; }
/* Løst: understregning gør linket synligt for alle */
a { color: #4a6da7; text-decoration: underline; }
- Brug en markant anderledes farve samt en synlig fokus- og hovertilstand – linkfarven skal have et på mindst 3:1 i forhold til den omgivende tekst, og linket skal ændre sig synligt (for eksempel få en understregning), når musen holdes over det, og ved .
Sådan tester Silktide dette
- Find synlige links, der er placeret i en sammenhængende tekst, med ord lige før eller efter dem. Fritstående links, såsom menupunkter og knapper, testes ikke af dette tjek.
- Spring links over, hvor linkfarven, farven på den omgivende tekst eller baggrundsfarven ikke kan fastslås pålideligt.
- Godkend links, der er visuelt adskilte uden farve: understregede, med kant, med baggrund eller med mindst 200 enheder højere skrifttykkelse end den omgivende tekst.
- Mål ellers kontrastforholdet mellem linkfarven og farven på den omgivende tekst, og undersøg, hvordan linket ændrer sig ved fokus og hover. Rapportér linket, medmindre forholdet er mindst 3:1, og fokus- eller hovertilstanden er synligt anderledes.
Fejlfinding
Mine links ændrer sig ved hover, så hvorfor markeres de?
En ændring ved hover alene er ikke nok – linket skal også have mindst 3:1 i farvekontrast i forhold til den omgivende tekst. Selv tilsammen hjælper denne løsning kun personer, der kan opfatte farveforskellen godt nok til overhovedet at forsøge at holde musen over linket. En understregning er fortsat den mest pålidelige løsning.
Links i menuer og knapper markeres ikke
Korrekt – dette tjek gælder kun links, der er omgivet af anden tekst, hvor en læser skal kunne skelne linket fra ordene omkring det. Links, der står alene, kan identificeres visuelt ud fra deres placering og styling.