Links moeten zichtbaar zijn voor iedereen. Indien het niet duidelijk is dat een link klikbaar is, zal deze ook niet gebruikt worden. Dit artikel geeft aan hoe je links WCAG-conform maakt.
WCAG 2.0
WCAG 2.0 stelt dat links duidelijk onderscheiden moeten zijn van hun omringende tekst. Bij voorkeur gebruik je een combinatie van kleur en onderlijning. Indien onderlijning niet mogelijk is, stelt WCAG het volgende:
Indien een link enkel via kleur aangeduid wordt, moet een contrastratio van 3:1 tegenover de omringende tekst gebruikt worden. Dit moet gepaard gaan met aanvullende visuele aanwijzingen bij focus op de link.
Door deze technieken te gebruiken, zal de link duidelijk zijn voor al uw bezoekers. Indien je enkel kleur gebruikt zonder voldoende contrast, zal iemand die lijdt aan kleurenblindheid, of die een scherm van lage kwaliteit gebruikt, uw links niet zien.
Technieken
Dit criterium bevat twee elementen: kleurcontrast en linkfocus.
Kleurcontrast
Kleurcontrast is het verschil tussen twee kleuren uitgedrukt in een cijfer. 1:1 is het contrast tussen twee dezelfde kleuren. 21:1 is zwart op wit. Het minimum contrast voor een link zonder onderlijning is 3:1.
Je kan kleurcontrast gratis en snel meten dankzij de tool Colour Contrast Analyser. Op zoek naar inspiratie? W3.org heeft een lijst van veilige linkkleuren die gemakkelijk te onderscheiden zijn tegenover wit en zwart.
Focus
Voeg een effect aan je link toe bij rollover (a:hover) en tabfocus (a:focus). Zo bestaat er geen enkele twijfel meer over het feit dat uw link klikbaar is. Een aantal mogelijke effecten die u kan toepassen:
- Onderlijning
- Vette tekst
- Kleurverandering (meer contrast)
- Schuine tekst
- Opaak vlak achter de linktekst
Conclusie
WCAG 2.0 stelt dat links zichtbaar moeten zijn voor iedereen. Dit kan u bekomen door uw link te onderlijnen, of door kleurcontrast en hover- en focuseffecten toe te passen.
Reacties
Reageer als eerste