Kryterium 2.4.4 – Cel łącza (w kontekście) (Poziom A)

Cel kryterium – czyli o co chodzi?

Kryterium 2.4.4 (poziom A) dotyczy jasności i precyzyjności opisów linków na stronie internetowej. Jego celem jest zapewnienie, że użytkownicy – zwłaszcza osoby niewidome korzystające z czytników ekranu – mogą zrozumieć, dokąd prowadzi dany odnośnik, bez konieczności analizowania całego kontekstu strony.

Kto skorzysta z tego rozwiązania?

Największą korzyść z tego kryterium odczują osoby niewidome i niedowidzące, które obsługują stronę za pomocą czytników ekranu. Zamiast słyszeć powtarzające się, nic niemówiące komunikaty, takie jak „więcej” czy „czytaj dalej”, otrzymają konkretną informację o celu linku. To jednak rozwiązanie przydatne dla wszystkich – np. osób korzystających z nawigacji głosowej czy użytkowników, którzy szybko przeglądają stronę w poszukiwaniu konkretnych informacji.

Dlaczego ogólnikowe linki są problemem?

Na wielu stronach internetowych można znaleźć linki o identycznych, ale nic nieznaczących nazwach, takich jak „czytaj więcej” czy „więcej”. Dla użytkowników widzących nie stanowi to problemu, ponieważ mogą szybko zeskanować otaczający tekst i zrozumieć kontekst. Osoby niewidome polegają jednak na czytnikach ekranu, które umożliwiają szybkie przeglądanie listy linków na stronie. Jeśli wszystkie brzmią tak samo, użytkownik nie ma pojęcia, dokąd prowadzą.

Jak możemy to naprawić i zadbać o dostępność linków?

Aby spełnić wymagania WCAG 2.4.4 i ułatwić nawigację, warto stosować następujące rozwiązania:

• Atrybut aria-label:

  Dodanie atrybutu aria-label do linku pozwala na nadanie mu sensownej nazwy, którą odczytają technologie asystujące. Ważne jest jednak, aby treść wizualnie dostępna na stronie i wartość aria-label były spójne, np.:

  <a href="/..." aria-label="Czytaj więcej o najnowszych badaniach naukowych">Czytaj więcej</a>

• Ukryta treść dla czytników ekranu:

  Można dodać dodatkowy opis wewnątrz linku, który pozostanie niewidoczny dla użytkowników widzących, ale będzie czytany przez czytniki ekranu. Można do tego wykorzystać klasy CSS, takie jak .sr-only lub .visually-hidden, np.:

  <a href="/...">Czytaj więcej <span class="visually-hidden">o nowym raporcie finansowym</span></a>

Dlaczego to jest ważne?

Precyzyjne opisy linków ułatwiają nawigację i zwiększają dostępność strony dla wszystkich użytkowników. Dzięki temu osoby korzystające z czytników ekranu mogą szybciej znaleźć interesujące ich informacje, a użytkownicy nawigacji głosowej mogą bez problemu aktywować link. Dodatkowo, dobrze opisane linki wpływają pozytywnie na SEO, ponieważ wyszukiwarki lepiej rozumieją strukturę i treść strony.

Czy wiesz, że?

Jeśli w opisie linku uwzględnisz unikalne i konkretne informacje, np. „Zobacz pełny raport o zmianach klimatycznych”, użytkownicy będą mogli szybciej odnaleźć potrzebne treści. Pamiętaj jednak, by unikać sytuacji, w której tekst linku różni się od tego, co widzi użytkownik – może to wprowadzać w błąd osoby korzystające z komend głosowych.

Poprawne opisywanie linków to prosty krok, który sprawia, że strony stają się bardziej przyjazne i dostępne dla każdego!