Tekst linku, który ma sens poza kontekstem

Jak naprawdę nawigują użytkownicy czytników ekranu

Zanim porozmawiamy o tym, jak pisać tekst linku, warto zrozumieć, jak ludzie faktycznie korzystają z linków, gdy nie widzą strony.

Czytniki ekranu oferują skrót, o którego istnieniu większość widzących użytkowników nie wie: naciśnięcie jednego klawisza (zwykle litery L w większości czytników ekranu) przechodzi przez wszystkie linki na stronie, odczytując je jeden po drugim, poza kontekstem. Użytkownicy stosują to, aby szybko przejrzeć stronę, tak jak oko widzącego użytkownika mogłoby prześlizgnąć się po nagłówkach i przyciskach wezwania do działania.

Jeśli Twoja strona ma dwanaście linków, które mówią „Czytaj więcej”, ta lista jest bezsensowna. Użytkownik słyszy: „Czytaj więcej. Czytaj więcej. Czytaj więcej. Czytaj więcej…”. Nie może stwierdzić, dokąd który z nich prowadzi.

To jest fundamentalny problem, który dostępność tekstu linku próbuje rozwiązać: każdy link musi opisywać sam siebie, ponieważ kontekst znika, gdy nawigujesz według linków.

Co mówi WCAG

2.4.4 Cel linku (w kontekście) na poziomie A wymaga, aby cel każdego linku dało się ustalić z samego tekstu linku lub z tekstu linku wraz z otaczającym go kontekstem (akapitem, elementem listy, komórką tabeli lub nagłówkiem, w którym się znajduje).

2.4.9 Cel linku (tylko z linku) na poziomie AAA idzie dalej, wymagając ustalenia celu linku z samego tekstu linku, bez polegania na kontekście. Dążenie do tego to dobry pomysł, nawet jeśli celujesz jedynie w zgodność z poziomem AA.

2.5.3 Etykieta w nazwie (poziom A) wymaga, aby gdy link lub przycisk ma widoczną etykietę tekstową, nazwa dostępna zaczynała się od tego tekstu. Przycisk z ikoną opisany „Dowiedz się więcej o dostępności” z atrybutem aria-label o treści „Kliknij tutaj” nie spełnia tego kryterium.

Częste błędy i co robić zamiast tego

„Kliknij tutaj” i „Czytaj więcej”

To najbardziej rozpowszechnione błędy dostępności linków w sieci.

<!-- Nie spełnia: brak znaczenia poza kontekstem -->
<a href="/blog/wcag-compliance">Czytaj więcej</a>

<!-- Spełnia: opisuje sam siebie -->
<a href="/blog/wcag-compliance">Przeczytaj nasz przewodnik po zgodności z WCAG 2.2</a>

Rozwiązanie jest niemal zawsze proste: zastąp niejasne wyrażenie tekstem opisującym cel lub akcję.

Ogólne linki „tutaj”

„Kliknij tutaj, aby pobrać raport” zawodzi z tego samego powodu — samym słowem linku jest jedynie „tutaj”.

<!-- Nie spełnia -->
<p>Aby zobaczyć pełne wyniki, kliknij <a href="/report.pdf">tutaj</a>.</p>

<!-- Spełnia: tekst linku opisuje, do czego prowadzi -->
<p>Pobierz <a href="/report.pdf">raport z audytu dostępności 2025 (PDF)</a>.</p>

Zwróć uwagę na oznaczenie PDF w nawiasie — to dobra praktyka, by poinformować użytkowników, że kliknięcie linku otworzy plik PDF, a nie stronę internetową.

Linki do tego samego celu z różnym tekstem lub różnych celów z tym samym tekstem

Oba przypadki wprowadzają zamęt. Jeśli pięć linków nawigacyjnych mówi „Dowiedz się więcej”, ale wskazuje różne strony usług, użytkownicy nie mogą przewidzieć, gdzie wylądują. Odwrotnie, dwa różne linki mówiące „przewodnik po zgodności z WCAG”, ale prowadzące do różnych stron, są tak samo mylące.

Linki i przyciski zawierające tylko ikonę

Link lub przycisk zawierający wyłącznie ikonę — bez widocznego tekstu — musi mieć nazwę dostępną dostarczoną przez aria-label lub aria-labelledby. Bez tego czytniki ekranu odczytują nazwę pliku obrazu ikony albo nic.

<!-- Nie spełnia: odczytane jako „link, grafika" lub nazwa pliku SVG -->
<a href="/social/twitter">
  <svg><!-- ikona twittera --></svg>
</a>

<!-- Spełnia: aria-label dostarcza nazwę dostępną -->
<a href="/social/twitter" aria-label="QualiBooth na Twitterze">
  <svg aria-hidden="true"><!-- ikona twittera --></svg>
</a>

Atrybut aria-hidden="true" na SVG zapobiega odczytaniu przez czytniki ekranu tytułu lub zawartości SVG — skoro sam link ma już etykietę, treść ikony jest zbędna.

Używanie aria-label do uzupełnienia widocznego tekstu

Gdy strona ma wiele linków „Pobierz”, a nie możesz zmienić widocznego tekstu (ograniczenie projektowe), aria-label może rozszerzyć nazwę dostępną:

<!-- Widoczny tekst to „Pobierz", ale nazwą dostępną jest pełny ciąg -->
<a href="/report-2025.pdf" aria-label="Pobierz raport dostępności 2025 PDF">
  Pobierz
</a>

Uwaga: WCAG 2.5.3 wymaga, aby nazwa dostępna zaczynała się od widocznego tekstu. „Pobierz raport dostępności 2025 PDF” zaczyna się od „Pobierz” — dobrze. „Raport dostępności 2025 — Pobierz PDF” tak nie zaczyna — źle.

Linki otwierające się w nowej karcie

Otwarcie nowej karty bez ostrzeżenia dezorientuje użytkowników, szczególnie tych z niepełnosprawnościami poznawczymi lub użytkowników czytników ekranu, którzy mogą nie zorientować się, co się stało. Wskaż zachowanie nowej karty w tekście linku lub za pomocą wizualnie ukrytej notatki.

<!-- Sygnalizuje zachowanie nowej karty wizualnie i technologii wspomagającej -->
<a href="https://example.com" target="_blank">
  Zobacz przykładowy raport
  <span class="sr-only">(otwiera się w nowej karcie)</span>
</a>

Gdy tekst linku działa, nie będąc oczywistym

Kontekst może zasadnie dostarczyć brakującego znaczenia zgodnie z WCAG 2.4.4. Link „Pobierz” jest akceptowalny, jeśli znajduje się w komórce tabeli, której nagłówek kolumny mówi „Raport roczny”, a nagłówek wiersza mówi „2025”. Kontekst czyni cel jasnym.

Różni się to od linku „Czytaj więcej” na końcu samodzielnego akapitu. Akapit dostarcza kontekstu, ale „Czytaj więcej” i tak zawodzi, ponieważ tekst linku mógłby odnosić się do dowolnego akapitu — nie identyfikuje jednoznacznie celu.

Linki obrazkowe

Gdy treścią linku jest obraz, a nie tekst, atrybut alt obrazu staje się nazwą dostępną linku. Tekst alternatywny powinien opisywać cel linku, a nie sam obraz.

<!-- Alt opisuje cel linku, a nie wygląd obrazu -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Usługi audytu dostępności">
</a>

Jeśli obraz jest czysto dekoracyjny i towarzyszy mu widoczny tekst w tym samym linku, obraz powinien mieć alt="", aby uniknąć dwukrotnego odczytania tego samego tekstu.

Szybki audyt, który możesz przeprowadzić sam

Otwórz swoją stronę i wywołaj listę linków przy użyciu czytnika ekranu (lub zainstaluj darmowe rozszerzenie przeglądarki HeadingsMap albo WAVE, aby zobaczyć linki wyodrębnione z kontekstu). Przejrzyj listę. Jeśli nie potrafisz stwierdzić z samego tekstu, dokąd prowadzi każdy link, wymaga on poprawy.

Najczęstsze rozwiązanie to dodanie <span class="sr-only"> (wizualnie ukrytego, dostępnego dla czytników ekranu) z dodatkowym kontekstem lub po prostu całkowite przepisanie tekstu linku. Przepisanie jest zawsze preferowane — często poprawia użyteczność dla wszystkich, nie tylko dla użytkowników czytników ekranu.

Aby dokładnie przejrzeć linki swojej strony i inne kryteria WCAG, nasze manualne audyty dostępności obejmują cel linku jako część szerszego przeglądu prowadzonego przez testerów, którzy każdego dnia korzystają z technologii wspomagających.