Wróć do wszystkich kryteriów

2.4.4 Cel łącza (w kontekście) (ang.) Link Purpose (In Context)

Specjalizacje:

  • Content Creator
  • Deweloper

Elementy:

  • Linki

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym założeniem tej wytycznej jest zapewnienie, aby przeznaczenie oraz adres docelowy każdego odnośnika były całkowicie jasne dla użytkownika. Informację tę powinieneś przekazać bezpośrednio poprzez sam tekst linku lub za pośrednictwem jego najbliższego, programowo określonego kontekstu.

    Zastosuj te zasady, aby odbiorca nie musiał domyślać się skutków kliknięcia ani wykonywać dodatkowych akcji w celu zorientowania się, dokąd prowadzi dany element nawigacji. Jest to jedno z najbardziej elementarnych kryteriów dostępności, które decyduje o tym, czy poruszanie się po serwisie internetowym jest płynne i intuicyjne.

    Pamiętaj, że kontekst będzie najbardziej użyteczny, jeśli poprzedza link. Jeśli musisz użyć niejednoznacznego tekstu linku, lepiej umieścić go na końcu zdania opisującego cel podróży niż na jego początku.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#link-purpose-in-context

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#cel-acza-w-kontekscie

    Słownik pojęć

    Programowo określony kontekst (ang.) programmatically determined context
    –

    dodatkowe informacje strukturalne zawarte w kodzie strony, które są bezpośrednio powiązane z odnośnikiem. Pozwalają one technologiom wspomagającym na automatyczne pobranie i odczytanie otoczenia linku (np. tekstu tego samego akapitu, elementu listy, komórki tabeli czy bezpośrednio poprzedzającego nagłówka).

    Nazwa dostępna (ang.) accessible name
    –

    to precyzyjnie określona w kodzie właściwość elementu interfejsu, za pomocą której technologie asystujące identyfikują i odczytują dany komponent. Może ona pochodzić z zawartości tekstowej, tagu <label>, atrybutu alt lub dyrektyw standardu ARIA. Stanowi ona tekstowy komunikat przekazywany bezpośrednio do syntezatora mowy lub oprogramowania sterującego głosowo.

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy czytników ekranu: Osoby niewidome bardzo często nawigują po serwisie, generując zbiorczą listę wszystkich odnośników z pominięciem reszty artykułu. Ogólne sformułowania sprawiają, że takie zestawienie staje się dla nich całkowicie bezużyteczne. Jasny cel linku pozwala im szybko zrozumieć zawartość, do której prowadzi, bez konieczności czytania całego otaczającego tekstu.
    • Osoby słabowidzące oraz korzystające z powiększenia ekranu: Użytkownicy korzystający z lup ekranowych widzą w danym momencie jedynie mały fragment witryny. Jasny komunikat w tekście linku pozwala im zrozumieć jego działanie bez konieczności ciągłego przewijania strony w poszukiwaniu kontekstu wizualnego.
    • Użytkownicy z ograniczeniami motorycznymi: Osoby obsługujące komputer wyłącznie za pomocą klawiatury, przełączników lub systemów sterowania wzrokiem polegają na precyzyjnych opisach. Dzięki nim unikają przypadkowego wchodzenia w niechciane odnośniki, co chroni ich przed marnowaniem energii na uciążliwe powroty do poprzedniej strony.
    • Osoby z niepełnosprawnościami poznawczymi: Dla użytkowników z dysleksją, trudnościami z koncentracją, zaburzeniami uwagi czy zaburzeniami przetwarzania informacji konkretne podpisy zmniejszają obciążenie psychiczne i pomagają w sprawnym podejmowaniu decyzji na stronie.
    • Użytkownicy urządzeń mobilnych: Na małych wyświetlaczach smartfonów lub w trudnych warunkach oświetleniowych jednoznaczne etykiety kluczowo przyspieszają nawigację dla każdego.

    Zasady wdrażania i wymagania techniczne

    W celu spełnienia standardu musisz zagwarantować pełną czytelność intencji każdego linku w kodzie strony:

    • Stawiaj opisowość na pierwszym miejscu: Zawsze, gdy projekt na to pozwala, twórz linki, które bronią się same poza jakimkolwiek kontekstem. Zamiast bezużytecznego zwrotu „kliknij tutaj”, wdróż sformułowania typu: „Pobierz raport roczny” czy „Odkryj nasze usługi”.
    • Zapewnij poprawny kontekst programowy: Jeżeli z przyczyn wizualnych tekst odnośnika musi pozostać zwięzły, dopilnuj, by jego otoczenie jednoznacznie wyjaśniało cel. Czytnik ekranu musi mieć możliwość technicznego powiązania linku z:
      • Akapitem, zdaniem, komórką tabeli (<td>) lub elementem listy (<li>), w którym odnośnik się znajduje.
      • Nagłówkiem (<h1>–<h6>), który bezpośrednio poprzedza daną treść.
    • Wdrażaj zaawansowane atrybuty ARIA: W skomplikowanych i nowoczesnych układach graficznych, w których brakuje tekstu w bezpośrednim sąsiedztwie kodu, wykorzystaj standardy techniczne:
      • Zastosuj aria-label, aby całkowicie nadpisać widoczną, krótką etykietę bardziej szczegółową nazwą dla technologii wspomagających.
      • Użyj aria-labelledby, aby połączyć krótki odnośnik (np. „Szczegóły”) z unikalnym identyfikatorem id innego elementu na stronie (np. z nazwą konkretnego produktu).
    • Prawidłowo opisuj linki obrazkowe: Kiedy funkcja odnośnika zostaje przypisana do grafiki lub ikony, kluczowe znaczenie ma dodanie właściwego atrybutu alt bądź etykiety dostępności. Muszą one komunikować akcję lub cel podróży (np. alt="Przejdź do formularza kontaktowego"), a nie opis wizualny wyglądu obrazka.
    • Unikaj opierania dostępności na atrybucie title: Porzuć praktykę dodawania wyjaśnień wyłącznie w atrybucie title. Narzędzia asystujące wspierają go w sposób wybiórczy i niespójny, a użytkownicy klawiatury lub ekranów dotykowych nie mają fizycznej możliwości wyświetlenia dymka pomocniczego.

    Wyjątki i sytuacje szczególne

    • Celowa niejednoznaczność dla ogółu użytkowników: Wytyczna nie obowiązuje, jeśli intencja lub cel linku z założenia mają pozostać zagadką dla każdego odwiedzającego stronę. Przykładem mogą być internetowe gry logiczne, zagadki czy autorskie instalacje artystyczne, gdzie odkrywanie przeznaczenia elementów stanowi główną część interakcji. W tej sytuacji osoba z niepełnosprawnością nie jest w gorszej sytuacji, ponieważ na stronie nie ma dodatkowego kontekstu dostępnego dla kogokolwiek innego.

    Przykłady implementacji

    Najczęstsze błędy

    • F63: Podanie kontekstu linku wyłącznie w treści, która nie jest z nim programowo powiązana. Typowym przykładem jest umieszczenie zapowiedzi artykułu w jednym akapicie, a odnośnika „Więcej…” w osobnym, kolejnym akapicie. Ponieważ nie znajdują się one w tej samej strukturze (zdaniu, liście czy tabeli), użytkownik listy linków traci możliwość zrozumienia celu odnośnika.
    • F89: Niezapewnienie nazwy dostępnej dla obrazu stanowiącego jedyną treść linku. Dzieje się tak, gdy ikona będąca odnośnikiem posiada pusty atrybut alt="" lub nie ma przypisanej żadnej etykiety ARIA. Czytnik ekranu nie ma wtedy czego odczytać i często podaje użytkownikowi surową, niezrozumiałą nazwę pliku (np. button_2.jpg).
    • Nadmierne poleganie na wizualnym kontekście: Projektowanie struktury strony z założeniem, że użytkownik zawsze dostrzeże powiązanie przestrzenne między elementami. Technologie wspomagające linearyzują kod i nie zawsze odtwarzają układ graficzny.
    • Stosowanie zwrotów bezwartościowych poza kontekstem: Masowe używanie wewnątrz artykułów sformułowań w stylu „Kliknij tutaj”, „Więcej” czy „W tym miejscu”, które kompletnie tracą sens po wycięciu ich z tekstu i wygenerowaniu w postaci samodzielnej listy odnośników.
    • Duplikowanie identycznych etykiet dla różnych adresów URL: Umieszczanie na jednej stronie wielu linków o nazwie „Szczegóły” kierujących do zupełnie innych podstron (np. w tabelach lub listach ofert) bez zadbania o ich programowe zróżnicowanie.
    • Dynamiczne linki z JavaScript bez aktualizacji nazw dostępnych: Sytuacja, w której skrypt zmienia cel lub funkcję odnośnika w locie, ale nie aktualizuje jego tekstu ani atrybutów ARIA, wprowadzając użytkownika w błąd.

    Najlepsze praktyki

    • Sygnalizuj formaty plików oraz niestandardowe zachowania: Gdy link prowadzi bezpośrednio do dokumentu (np. PDF, DOCX) bądź wymusza otwarcie nowej karty w przeglądarce, przekaż tę informację wewnątrz etykiety tekstowej, stosując zapis: „Sprawozdanie finansowe (PDF)” lub „Panel logowania (otwiera się w nowym oknie)”.
    • Dąż do pełnej samodzielności odnośników: Zadbaj o to, by tekst każdego linku był maksymalnie zrozumiały w oderwaniu od otaczających go zdań. Przynosi to korzyści nie tylko osobom z niepełnosprawnościami, ale też przyspiesza skanowanie strony wzrokiem przez wszystkich użytkowników.
    • Łącz sąsiadujące linki tekstowe i graficzne: Zamiast tworzyć osobny odnośnik dla zdjęcia produktu i osobny dla jego nazwy tekstowej, umieść oba te elementy wewnątrz jednego znacznika <a>. Zapobiegnie to uciążliwemu, podwójnemu odczytywaniu tego samego celu przez czytniki ekranu (tzw. efekt jąkania).
    • Zachowaj spójność i unikalność: Utrzymuj spójne nazewnictwo i styl linków na całej stronie. Jeśli odnośniki prowadzą do tego samego celu, powinny mieć taką samą etykietę. Jeśli prowadzą w różne miejsca, unikaj nadawania im identycznie brzmiących etykiet.

    Metody testowania

    • NVDA: Uruchom czytnik ekranu i wywołaj listę wszystkich odnośników za pomocą skrótu klawiszowego Insert + F7. Przejrzyj całe zestawienie i zweryfikuj, czy bez czytania artykułu jesteś w stanie jednoznacznie określić cel i przeznaczenie każdego elementu na liście.
    • Narzędzie deweloperskie (ang.) Developer Tools: Zbadaj strukturę DOM wybranego odnośnika w przeglądarce. Upewnij się, czy krótkie i zwięzłe linki są prawidłowo powiązane z kontekstem programowym (np. czy są osadzone wewnątrz tego samego tagu <p>, <li> czy <td>).
    • ANDI.js: Aktywuj moduł analizy elementów sterujących łącza/przyciski ((ang.) Links/Buttons). Narzędzie podświetli odnośniki na stronie i wyświetli ich dokładną, wyliczoną nazwę dostępną ((ang.) accessible name), umożliwiając natychmiastową weryfikację tego, co faktycznie usłyszy użytkownik niewidomy.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 przykładów linków. Twoim zadaniem jest sprawdzenie, czy ich tekst i kontekst jednoznacznie informują o tym, dokąd prowadzą i co się stanie po ich kliknięciu.

    Jak to sprawdzić?

    1. Zastanów się, czy wyrywając link z kontekstu strony, nadal wiesz dokąd prowadzi.
    2. Zwróć uwagę na linki ogólnikowe takie jak „Kliknij tutaj” lub „Więcej”. Sprawdź, czy posiadają odpowiedni kontekst powiązany programowo (np. znajdują się w tym samym akapicie co tekst objaśniający).
    3. Zbadaj w kodzie ikony pełniące rolę linków – czy posiadają poprawny tekst alternatywny lub nazwę dostępną?
    4. Wielokrotnie powtarzające się etykiety („Szczegóły”, „Kup”) muszą dać się odróżnić przy pomocy atrybutów ARIA lub unikalnego tekstu.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Enter, Spacja), Narzędzie deweloperskie (ang.) Developer Tools, NVDA

    Link: https://pdc.ambiscale.com/training/wcag-2-4-4/

    #1 BŁĄD

    Problem: Niejednoznaczny tekst łącza („Kliknij tutaj”) znajduje się w osobnym akapicie (<p>) niż kontekst (Tytuł raportu), którego dotyczy.
    Dlaczego: Użytkownik czytnika ekranu, który wywoła listę linków, usłyszy tylko bezużyteczne „Kliknij tutaj”. Kontekst w poprzednim kontenerze nie jest programowo powiązany z łączem (Błąd F63).
    Naprawa: Umieść informację bezpośrednio w tekście łącza (np. „Pobierz raport roczny 2025”) lub umieść link wewnątrz tego samego zdania/akapitu, co opisujący go tekst.

    #2 DOBRZE

    Dlaczego: Tekst łącza samodzielnie wyjaśnia swój cel i nie potrzebuje wsparcia okolicznych zdań. Dodatkowo wprost informuje o formacie otwieranego pliku (PDF), co jest świetną praktyką wspierającą świadome podejmowanie decyzji przez użytkownika.

    #3 BŁĄD

    Problem: Grafika służąca jako jedyna zawartość łącza nie posiada nazwy dostępnej (brak uzupełnionego atrybutu aria-label dla SVG ukrytego przez aria-hidden="true").
    Dlaczego: Technologia wspomagająca nie ma czego odczytać użytkownikowi, więc przekaże mu surową ścieżkę do linku lub pominie go całkowicie, ukrywając jego funkcję przed użytkownikiem (Błąd F89).
    Naprawa: Jeśli wewnątrz odnośnika jedyną wartościową rzeczą jest obrazek/SVG (niedostępny dla czytnika z powodu aria-hidden="true"), musisz użyć aria-label="Odwiedź naszego Facebooka" bezpośrednio na tagu <a>.

    #4 DOBRZE

    Dlaczego: Połączono grafikę oraz opisujący ją tekst wewnątrz jednego odnośnika <a>. Ikona SVG ma celowo ustawione aria-hidden="true" i focusable="false" (pełni rolę wyłącznie dekoracyjną), więc czytnik ekranu ją zignoruje, ale odczyta jasny tekst ukryty tuż obok: „Napisz do nas wiadomość”. Unika to tzw. „efektu jąkania” i oferuje większy, wygodniejszy obszar kliknięcia (hitbox).

    #5 BŁĄD

    Problem: Identycznie brzmiące teksty łącza („Szczegóły”) prowadzą do zupełnie innych podstron i nie posiadają kontekstu programowego, który pomógłby je łatwo odróżnić osobom korzystającym z nawigacji skrótowej.
    Dlaczego: Element <div> nie jest uznawanym kontenerem kontekstu programowego. Czytniki ekranu rozpoznają za niego zdanie, akapit, znacznik elementu listy (<li>) lub komórkę tabeli (<td>). Ponieważ oba linki znajdują się w abstrakcyjnych `divach`, brakuje technicznego połączenia między napisem „Szczegóły” a nazwą odpowiedniego produktu. Lista odnośników wygenerowana dla niewidomego użytkownika będzie zawierała same bliźniacze pozycje „Szczegóły”, „Szczegóły”, co całkowicie ukrywa przed nim cel wędrówki.
    Naprawa: Zastosuj technikę z klasy ukrywającej tekst dla wzroku (tzw. „sr-only”), aby etykieta brzmiała „Szczegóły Konta Standard” (ukrywając część wizualnie), wykorzystaj atrybuty aria-label lub aria-labelledby (jak w Przykładzie #6), albo – najlepiej – po prostu dopisz cel podróży do fizycznego tekstu na ekranie, by był jednoznaczny i widoczny dla każdego.

    #6 DOBRZE

    Dlaczego: Połączono grafikę oraz opisujący ją tekst wewnątrz jednego odnośnika <a>. Ikona SVG ma celowo ustawione aria-hidden="true" i focusable="false" (pełni rolę wyłącznie dekoracyjną), więc czytnik ekranu ją zignoruje, ale odczyta jasny tekst ukryty tuż obok: „Napisz do nas wiadomość”. Unika to tzw. „efektu jąkania” i oferuje większy, wygodniejszy obszar kliknięcia (hitbox).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów