Kontrast linków

Silktide znajduje linki w tekście, które odróżniają się od otaczających je słów wyłącznie kolorem, przy zbyt małej różnicy kolorów, aby osoby z zaburzeniami widzenia barw mogły je zauważyć. Linki muszą być rozpoznawalne jako linki, w przeciwnym razie czytelnicy nie będą mogli z nich korzystać.

Dlaczego to ważne

Około 1 na 12 mężczyzn i 1 na 200 kobiet ma zaburzenia widzenia barw. Jeśli jedynym wyróżnikiem linku jest subtelna zmiana koloru, czytelnicy ci widzą zwykły tekst i nigdy nie dowiadują się o istnieniu linku. Oznacza to pominiętą nawigację, przeoczone wezwania do działania oraz niespełnienie wymogu poziomu A — jednego z najbardziej podstawowych wymagań dostępności.

Jak to naprawić

Istnieją dwa sposoby, aby link w tekście był zgodny z wymaganiami:

Wyróżnij go czymś więcej niż kolorem — najprostszym rozwiązaniem jest podkreślenie, którego większość czytelników oczekuje w przypadku linków. Działa również obramowanie, tło lub wyraźnie większa grubość czcionki.

/* Linki oparte wyłącznie na kolorze */
a { color: #4a6da7; text-decoration: none; }

/* Poprawka: podkreślenie sprawia, że link jest widoczny dla wszystkich */
a { color: #4a6da7; text-decoration: underline; }

Użyj wyraźnie innego koloru oraz widocznego stanu fokusu i najechania kursorem — kolor linku musi mieć wynoszący co najmniej 3:1 względem otaczającego tekstu, a link musi widocznie się zmieniać (na przykład zyskać podkreślenie) po najechaniu kursorem myszy i uzyskaniu .

Jak Silktide to testuje

Znajduje widoczne linki umieszczone w ciągu tekstu, ze słowami bezpośrednio przed nimi lub po nich. Samodzielne linki, takie jak elementy menu i przyciski, nie są testowane przez tę kontrolę.
Pomija linki, dla których nie można wiarygodnie określić koloru linku, koloru otaczającego tekstu lub koloru tła.
Zalicza linki, które są wizualnie odróżnialne bez użycia koloru: podkreślone, obramowane, z tłem lub z grubością czcionki co najmniej o 200 jednostek większą niż w otaczającym tekście.
W pozostałych przypadkach mierzy współczynnik kontrastu między kolorem linku a kolorem otaczającego tekstu oraz sprawdza, jak link zmienia się po uzyskaniu fokusu i najechaniu kursorem. Zgłasza link, chyba że współczynnik wynosi co najmniej 3:1, a stan fokusu lub najechania kursorem jest wyraźnie inny.

Rozwiązywanie problemów

Moje linki zmieniają się po najechaniu kursorem, dlaczego są oznaczone?

Sama zmiana po najechaniu kursorem nie wystarczy — link musi również mieć kontrast kolorów co najmniej 3:1 względem otaczającego tekstu. Nawet łącznie to rozwiązanie pomaga tylko osobom, które potrafią wystarczająco dobrze dostrzec różnicę kolorów, aby w ogóle spróbować najechać kursorem. Podkreślenie pozostaje najbardziej niezawodnym rozwiązaniem.

Zgadza się — ta kontrola dotyczy tylko linków otoczonych innym tekstem, gdy czytelnik musi odróżnić link od słów wokół niego. Linki występujące samodzielnie są wizualnie rozpoznawalne dzięki swojemu położeniu i stylowi.