Funkcjonalność · Poziom A

2.4.4 Cel linku w kontekście

Cel linku powinien być zrozumiały z tekstu linku albo z jego najbliższego kontekstu.

Krótko

Link powinien mówić użytkownikowi, dokąd prowadzi albo co się stanie po jego aktywacji. Najlepiej, gdy sam tekst linku jest jasny. Jeśli nie, cel musi wynikać z kontekstu.

Problem w praktyce

Na stronie jest kilka linków „więcej”, „tutaj” i „szczegóły”. Osoba korzystająca z listy linków w czytniku ekranu słyszy same powtarzalne słowa i nie wie, który link prowadzi do szkolenia, który do regulaminu, a który do pobrania faktury.

To kryterium nie dotyczy koloru, podkreślenia ani kontrastu linku. Chodzi o znaczenie linku.

Kogo to dotyczy

  • Osób korzystających z czytników ekranu i listy linków.
  • Osób nawigujących klawiaturą po linkach.
  • Osób z trudnościami poznawczymi, które potrzebują konkretnych etykiet akcji.
  • Użytkowników wyszukujących szybko link w długim artykule, tabeli albo panelu.
  • Osób korzystających z rozpoznawania mowy, które wypowiadają tekst linku.

Dobry przykład

  • `Pobierz fakturę PDF za zamówienie 125/2026`.
  • `Zobacz program szkolenia WCAG dla specjalistów`.
  • `Przejdź do formularza reklamacji`.
  • Link `Szczegóły` w tabeli, jeśli nagłówki i wiersz jasno wskazują, czego dotyczą szczegóły.
  • Link z obrazem, który ma tekst alternatywny opisujący cel linku.

Zły przykład

  • Link `kliknij tutaj` bez dodatkowego kontekstu.
  • Kilka linków `więcej` prowadzących do różnych miejsc.
  • Adres URL jako jedyny tekst linku, gdy nie mówi jasno o celu.
  • Ikona-link bez tekstu i bez zrozumiałej nazwy.
  • Link `pobierz` bez informacji, co zostanie pobrane.

Przykłady kodu

Użytkownik rozumie cel linku bez czytania całego akapitu.

Kod — HTML

<a href="/szkolenia/wcag-dla-specjalistow">
  Zobacz program szkolenia WCAG dla specjalistów
</a>

Sam tekst linku nie mówi, czego dotyczy akcja.

Kod — HTML

<p>
  Szkolenie WCAG dla specjalistów.
  <a href="/szkolenia/wcag-dla-specjalistow">więcej</a>
</p>

Kontekst wiersza i nagłówków pomaga zrozumieć link.

Kod — HTML

<table>
  <thead>
    <tr>
      <th scope="col">Zamówienie</th>
      <th scope="col">Dokument</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">125/2026</th>
      <td>
        <a href="/faktury/125-2026.pdf">Pobierz fakturę PDF</a>
      </td>
    </tr>
  </tbody>
</table>

Przykład graficzny

Źle

  • więcej
  • więcej
  • więcej

Lista linków nie mówi, który link prowadzi do której treści.

Dobrze

  • Program szkolenia WCAG
  • Pobierz fakturę PDF
  • Formularz reklamacji

Teksty linków od razu wyjaśniają cel.

Statyczne demo pokazuje, że użytkownik może przeglądać linki poza pełnym tekstem strony.

Jak sprawdzić

  1. Przejrzyj wszystkie linki na stronie.
  2. Sprawdź, czy cel linku jest jasny z samego tekstu linku.
  3. Jeśli nie, sprawdź najbliższy kontekst: zdanie, akapit, element listy, nagłówek, komórkę tabeli albo wiersz tabeli.
  4. Sprawdź listę linków w czytniku ekranu, jeśli masz taką możliwość.
  5. Poszukaj linków `więcej`, `tutaj`, `kliknij`, `pobierz`, `szczegóły` i samych adresów URL.
  6. Sprawdź linki graficzne i ikonowe. Ich dostępna nazwa też musi mówić o celu.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • puste linki,
  • linki bez dostępnej nazwy,
  • część powtarzalnych tekstów typu `kliknij tutaj`,
  • obrazy-linki bez tekstu alternatywnego.

Automat nie oceni pewnie

  • czy kontekst rzeczywiście wyjaśnia cel linku,
  • czy identyczne linki prowadzą do tego samego celu,
  • czy tekst linku jest zrozumiały dla użytkownika,
  • czy cel linku jest wystarczająco jasny w tabeli, karcie produktu albo liście wyników.

Typowe błędy

  • Kilka linków `więcej` na jednej stronie.
  • Linki `tutaj` albo `kliknij tutaj` bez kontekstu.
  • Link `pobierz` bez nazwy dokumentu i formatu.
  • Link graficzny z pustym albo dekoracyjnym `alt`.
  • Ten sam tekst linku prowadzi do różnych miejsc.
  • Link w tabeli nie ma kontekstu w nagłówkach i wierszu.

Źródła