Contrast van links
Silktide vindt links in je tekst die alleen door hun kleur worden onderscheiden van de woorden eromheen, met te weinig kleurverschil om door mensen met een verminderde kleurwaarneming te worden opgemerkt. Links moeten herkenbaar zijn als links, anders kunnen lezers ze niet gebruiken.
Waarom dit belangrijk is
Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een afwijking in de kleurwaarneming. Als een subtiele kleurverandering het enige is waaraan een link te herkennen is, zien deze lezers gewone tekst en weten ze niet dat de link bestaat. Dat betekent gemiste navigatie, gemiste oproepen tot actie en een niveau-A-fout volgens — dit behoort tot de meest basale vereisten voor toegankelijkheid.
Zo los je dit op
Er zijn twee manieren om een inline-link conform te maken:
- Onderscheid de link op meer dan alleen kleur — de eenvoudigste oplossing is een onderstreping, wat de meeste lezers van links verwachten. Een rand, achtergrond of duidelijk zwaarder lettertype werkt ook.
/* Links die alleen op kleur zijn gebaseerd */
a { color: #4a6da7; text-decoration: none; }
/* Opgelost: door de onderstreping is de link voor iedereen zichtbaar */
a { color: #4a6da7; text-decoration: underline; }
- Gebruik een sterk afwijkende kleur plus een zichtbare focus- en hoverstatus — de linkkleur moet een van minstens 3:1 hebben met de omringende tekst, en de link moet zichtbaar veranderen (bijvoorbeeld door onderstreept te worden) wanneer de muis eroverheen gaat en bij .
Zo test Silktide dit
- Zoek zichtbare links die in een tekstgedeelte staan, met woorden direct ervoor of erna. Op zichzelf staande links, zoals menu-items en knoppen, worden niet getest door deze controle.
- Sla links over waarvan de linkkleur, tekstkleur van de omgeving of achtergrondkleur niet betrouwbaar kan worden vastgesteld.
- Keur links goed die visueel zonder kleur te onderscheiden zijn: onderstreept, voorzien van een rand, voorzien van een achtergrond of met een lettergewicht dat minstens 200 eenheden zwaarder is dan dat van de omringende tekst.
- Meet anders de contrastverhouding tussen de linkkleur en de tekstkleur van de omgeving, en controleer hoe de link verandert bij focus en hover. Rapporteer de link, tenzij de verhouding minstens 3:1 is en de focus- of hoverstatus zichtbaar anders is.
Problemen oplossen
Mijn links veranderen bij hover, dus waarom worden ze gemarkeerd?
Een verandering bij hover alleen is niet voldoende — de link moet ook een kleurcontrast van minstens 3:1 hebben met de omringende tekst. En zelfs samen helpt deze aanpak alleen mensen die het kleurverschil goed genoeg kunnen waarnemen om überhaupt te proberen er met de muis overheen te gaan. Een onderstreping blijft de meest betrouwbare oplossing.
Links in menu's en knoppen worden niet gemarkeerd
Dat klopt — deze controle is alleen van toepassing op links die door andere tekst worden omringd, waarbij een lezer de link moet kunnen onderscheiden van de woorden eromheen. Op zichzelf staande links zijn visueel herkenbaar door hun positie en opmaak.