Baza wiedzy Wytyczne WCAG Kryteria sukcesu WCAG

WCAG 2.4.9: Cel linku (tylko link)

Kryterium sukcesu WCAG 2.4.9 „Cel linku (tylko link)” (ang. Link Purpose (Link Only)) na poziomie AA jest kluczowe dla zapewnienia dostępności stron internetowych. Wymaga ono, aby przeznaczenie każdego linku było jasno zrozumiałe wyłącznie na podstawie jego tekstu, bez konieczności odwoływania się do otaczającego kontekstu. Oznacza to, że użytkownik, napotykając sam tekst linku, powinien być w stanie przewidzieć, co się wydarzy po jego aktywacji.

Wprowadzenie do kryterium WCAG 2.4.9

WCAG 2.4.9 to kryterium, które dotyczy klarowności i precyzji tekstu używanego w linkach. Jego głównym celem jest zapewnienie, że każdy link na stronie jest samodzielny pod względem informacyjnym. Użytkownicy powinni być w stanie zrozumieć, co osiągną, klikając dany link, nawet jeśli widzą go w izolacji od reszty treści strony. Jest to szczególnie ważne w kontekście nawigacji, gdzie użytkownicy mogą skanować stronę w poszukiwaniu konkretnych informacji lub korzystać z narzędzi, które prezentują im listę wszystkich linków dostępnych na danej podstronie.

Dlaczego to jest ważne? (Wpływ na dostępność)

Zapewnienie opisowego tekstu linków ma ogromne znaczenie dla szerokiej grupy użytkowników, wpływając na użyteczność i dostępność serwisu:

Użytkownicy czytników ekranu: Osoby niewidome lub słabowidzące często nawigują po stronach, przeglądając listę linków generowaną przez czytnik ekranu. Jeśli linki są ogólne (np. „kliknij tutaj”, „więcej”), taka lista jest bezużyteczna, ponieważ nie dostarcza żadnych informacji o przeznaczeniu poszczególnych odnośników. Opisowe linki pozwalają im szybko zorientować się w strukturze i zawartości strony.
Użytkownicy klawiatury: Osoby korzystające z klawiatury do nawigacji (np. przy użyciu klawisza Tab) przechodzą od jednego interaktywnego elementu do drugiego. Jasno określony cel linku pomaga im zdecydować, czy chcą aktywować dany odnośnik, bez konieczności odczytywania całego otoczenia linku.
Osoby z niepełnosprawnościami poznawczymi: Dla osób z dysleksją, deficytami uwagi lub innymi niepełnosprawnościami poznawczymi, zrozumienie celu linku na podstawie samego tekstu zmniejsza obciążenie poznawcze. Pomaga to w przewidywaniu, co nastąpi po kliknięciu, co zwiększa poczucie kontroli i zmniejsza frustrację.
Osoby z ograniczeniami wzrokowymi (powiększenie): Użytkownicy powiększający treść strony mogą widzieć tylko niewielką jej część. Jeśli link jest umieszczony daleko od kontekstowego tekstu, opisowy tekst linku staje się jedyną wskazówką co do jego przeznaczenia.
Przewidywalność i użyteczność: Zrozumiałe linki zwiększają ogólną przewidywalność i użyteczność strony dla wszystkich użytkowników, niezależnie od ich zdolności. Ułatwiają skanowanie treści i szybkie znajdowanie potrzebnych informacji.

Kryterium sukcesu WCAG 2.4.9: Cel linku (tylko link)

Zgodnie z WCAG 2.1, kryterium sukcesu 2.4.9 (Poziom AA) brzmi:

Dla każdego linku przeznaczenie linku może być określone na podstawie samego tekstu linku, z wyjątkiem sytuacji, gdy przeznaczenie linku byłoby niejednoznaczne dla wszystkich użytkowników.

Kluczowe jest tutaj sformułowanie „na podstawie samego tekstu linku”. Oznacza to, że nie wolno polegać wyłącznie na kontekście wizualnym, grafice otaczającej link, czy na atrybucie title, który nie zawsze jest dostępny dla wszystkich technologii wspomagających.

Praktyczne wytyczne dla twórców treści i deweloperów

Aby spełnić kryterium 2.4.9, należy przestrzegać następujących zasad:

Zawsze używaj opisowego tekstu linku: Tekst linku powinien jasno wskazywać, dokąd prowadzi link lub co się stanie po jego aktywacji.
Unikaj ogólnych zwrotów: Frazy takie jak „kliknij tutaj”, „więcej”, „czytaj dalej”, „zobacz” są niejasne i należy ich unikać jako samodzielnych tekstów linków.
Linkuj konkretne informacje: Zamiast linkować ogólnikowo do sekcji, linkuj bezpośrednio do konkretnej podstrony lub sekcji na stronie.
Linki do plików: Jeśli link prowadzi do pliku do pobrania, tekst linku powinien wskazywać typ pliku i jego rozmiar (np. „Pobierz raport roczny (PDF, 2 MB)”).
Graficzne linki: Jeśli link jest ikoną lub obrazem, należy zawsze dostarczyć tekst alternatywny (np. za pomocą atrybutu alt dla tagu <img> wewnątrz <a>) lub użyć atrybutu aria-label dla samego linku <a>. Tekst alternatywny powinien pełnić funkcję opisowego tekstu linku.
Używaj atrybutu aria-label z rozwagą: Atrybut aria-label może być używany do dostarczenia zwięzłego, opisowego tekstu dla linku, jeśli tekst wizualny jest niewystarczający lub link jest ikoną bez widocznego tekstu. Należy go jednak używać ostrożnie, aby nie powielać ani nie zastępować już istniejącego, czytelnego tekstu.

Przykłady implementacji

Przykłady poprawne:

Link do konkretnej strony:

<p>Aby dowiedzieć się więcej o <a href="/historia-firmy">historii naszej firmy</a>, odwiedź dedykowaną podstronę.</p>

Link do pliku PDF:

<a href="/raport-roczny-2023.pdf">Pobierz raport roczny za 2023 rok (PDF, 1.5 MB)</a>

Link ikoniczny z tekstem alternatywnym:

<a href="/kontakt">
  <img src="/icons/mail.svg" alt="Wyślij wiadomość e-mail do działu obsługi klienta" width="24" height="24">
</a>

Link z aria-label (np. dla ikony bez widocznego tekstu lub skróconego tekstu):

<a href="/profil-uzytkownika" aria-label="Przejdź do strony profilu użytkownika">
  <img src="/icons/user.svg" alt="Profil" width="24" height="24">
</a>

Uwaga: W powyższym przykładzie alt="Profil" jest opcjonalne, jeśli aria-label dostarcza pełniejszą informację i jest przeznaczone dla elementów interaktywnych. Jeśli ikoną jest tylko ikona bez tekstu, sam aria-label jest kluczowy. Jeśli jest tekst wizualny, który nie jest wystarczający, aria-label go zastąpi. W przypadku ikon graficznych, często stosuje się ukryty wizualnie tekst wewnątrz <span> z klasą sr-only zamiast aria-label, co jest również poprawną praktyką.

Przykłady niepoprawne:

Ogólny tekst linku:

<p>Aby dowiedzieć się więcej o historii naszej firmy, <a href="/historia-firmy">kliknij tutaj</a>.</p>

Brakujące informacje w tekście linku:

<p>Pobierz raport roczny za 2023 rok. <a href="/raport-roczny-2023.pdf">Pobierz</a></p>

Link ikoniczny bez tekstu alternatywnego:

<a href="/kontakt">
  <img src="/icons/mail.svg" alt="" width="24" height="24">
</a>

Link ikoniczny z ogólnym tekstem alternatywnym, który nie opisuje celu:

<a href="/koszyk">
  <img src="/icons/cart.svg" alt="Ikona koszyka" width="24" height="24">
</a>

Poprawnie byłoby: alt="Przejdź do koszyka" lub aria-label="Przejdź do koszyka".

Najlepsze praktyki i często popełniane błędy

Najlepsze praktyki:

Konsekwencja: Utrzymuj spójność w nazewnictwie linków na całej stronie. Jeśli używasz „Pobierz raport”, nie zmieniaj tego na „Raport do pobrania” na innej podstronie dla tego samego typu treści.
Testowanie z czytnikami ekranu: Regularnie testuj swoją stronę, używając popularnych czytników ekranu (np. NVDA, JAWS, VoiceOver) i funkcji listy linków, aby upewnić się, że są one zrozumiałe.
Audyt treści: Przy tworzeniu lub aktualizacji treści, przeprowadź audyt wszystkich linków, aby upewnić się, że ich tekst jest wystarczająco opisowy.
Krótki i zwięzły, ale kompletny: Dąż do zwięzłości, ale nigdy kosztem klarowności. Tekst linku powinien być wystarczająco długi, aby przekazać jego cel.

Często popełniane błędy:

Poleganie na atrybucie title: Atrybut title nie jest niezawodnym sposobem na przekazywanie celu linku, ponieważ nie wszystkie technologie wspomagające go odczytują automatycznie, a niektórzy użytkownicy myszy nigdy go nie zobaczą.
Zakładanie widocznego kontekstu: Twórcy często zakładają, że użytkownik zawsze widzi cały otaczający tekst, co nie jest prawdą dla użytkowników czytników ekranu czy osób korzystających z powiększenia.
Linki do obrazków bez odpowiedniego alt lub aria-label: Prowadzi to do tego, że link staje się pusty dla użytkowników czytników ekranu, którzy słyszą tylko „link” bez żadnych dodatkowych informacji.
Używanie adresu URL jako tekstu linku: Chociaż adres URL jest unikalny, zazwyczaj nie jest przyjazny dla użytkownika ani nie opisuje celu w zrozumiały sposób.

Kryteria sukcesu WCAG

Poziomy zgodności WCAG