WCAG 2.4.4: Cel linku (w kontekście)

Poziom zgodności: A

Wprowadzenie

Kryterium sukcesu WCAG 2.4.4, zatytułowane „Cel linku (w kontekście)”, wymaga, aby cel każdego linku był jasny na podstawie samego tekstu linku lub na podstawie jego kontekstu. Oznacza to, że użytkownik nie powinien musieć zgadywać, co stanie się po kliknięciu linku, ani szukać dodatkowych wyjaśnień poza bezpośrednim otoczeniem linku.

Jest to fundamentalne kryterium, które ma kluczowe znaczenie dla podstawowej dostępności, ponieważ pozwala użytkownikom zrozumieć, dokąd prowadzi link, co jest niezbędne do efektywnej nawigacji po stronie internetowej lub aplikacji.

Dlaczego to jest ważne?

Zrozumienie celu linku ma ogromne znaczenie dla wielu grup użytkowników i wpływa na ogólną użyteczność i dostępność strony:

• Użytkownicy czytników ekranu: Osoby niewidome lub niedowidzące często nawigują po stronach, przeglądając listę linków. Jeśli linki są ogólne, takie jak „kliknij tutaj” lub „czytaj więcej”, tracą kontekst, co czyni nawigację trudną i frustrującą. Jasny cel linku pozwala im szybko zrozumieć zawartość, do której link prowadzi, bez konieczności czytania całego otaczającego tekstu.
• Użytkownicy z niepełnosprawnościami poznawczymi: Osoby z dysleksją, zaburzeniami uwagi lub innymi trudnościami poznawczymi mogą mieć problemy z przetwarzaniem i zapamiętywaniem informacji. Jasne, konkretne etykiety linków zmniejszają obciążenie poznawcze i pomagają im w podejmowaniu decyzji o nawigacji.
• Użytkownicy z ograniczeniami motorycznymi: Osoby korzystające z klawiatury, przełączników lub innych technologii wspomagających nawigację polegają na precyzyjnym zrozumieniu celu linku, aby uniknąć niepotrzebnego klikania i poruszania się po stronie.
• Użytkownicy słabowidzący lub powiększeniem: Osoby korzystające z funkcji powiększenia ekranu widzą tylko fragment strony naraz. Jasny cel linku pozwala im zrozumieć jego funkcję bez konieczności przewijania, aby znaleźć dodatkowy kontekst.
• Użytkownicy mobilni: Na małych ekranach lub w trudnych warunkach (np. w słońcu), gdzie kontekst wizualny może być ograniczony, jasne etykiety linków są kluczowe dla efektywnej nawigacji.

Spełnienie tego kryterium poprawia ogólne doświadczenie użytkownika, zmniejsza frustrację i czyni treści bardziej dostępnymi i zrozumiały dla wszystkich.

Kryteria sukcesu i wymagania

Zgodnie z WCAG 2.4.4, cel każdego linku musi być zrozumiały:

• Z samego tekstu linku: Tekst linku powinien być na tyle opisowy, aby użytkownik mógł zrozumieć, dokąd link prowadzi, nawet jeśli jest czytany poza kontekstem.
• Z tekstu linku wraz z kontekstem programowo określonym: Jeśli sam tekst linku nie jest wystarczająco opisowy, jego cel musi być jasny z kontekstu, który jest programowo określony. Oznacza to, że kontekst musi być dostępny dla technologii wspomagających. Typowe konteksty to:
  • Zdanie, akapit, element listy lub komórka tabeli zawierająca link.
  • Nagłówek bezpośrednio poprzedzający link.
  • Elementy z etykietami dostępności, takimi jak aria-labelledby lub aria-describedby.
  • Tekst alternatywny dla obrazów używanych jako linki.

Należy unikać polegania wyłącznie na atrybucie title, ponieważ jego wsparcie przez czytniki ekranu i inne technologie wspomagające może być niespójne, a także nie jest widoczny dla użytkowników klawiatury lub ekranów dotykowych, chyba że użyją oni myszy i poczekają na pojawienie się etykietki.

Praktyczne wskazówki dotyczące zgodności

• Używaj opisowego tekstu linku: Zawsze, gdy jest to możliwe, tekst linku powinien jasno określać jego cel. Na przykład, zamiast „kliknij tutaj”, użyj „Pobierz raport roczny” lub „Dowiedz się więcej o naszych usługach”.
• Zapewnij kontekst programowy: Jeśli pełny opis linku nie mieści się w jego tekście, upewnij się, że otaczający tekst (zdanie, akapit, element listy) dostarcza niezbędnego kontekstu. Ten kontekst musi być programowo powiązany z linkiem.
• Unikaj ogólnych zwrotów: Strony często zawierają linki takie jak „więcej”, „szczegóły” lub „przejdź”. Same w sobie są one problematyczne. Mogą być akceptowalne tylko wtedy, gdy otaczający je kontekst (np. nagłówek, element listy) jasno wskazuje, czego „więcej” dotyczy.
• Linki obrazkowe: Jeśli linkiem jest obraz, upewnij się, że atrybut alt obrazu lub programowo określona nazwa (np. za pomocą aria-label) jasno opisuje cel linku.
• Używaj ARIA: W skomplikowanych przypadkach, gdzie wizualny kontekst jest jasny, ale tekst linku jest zwięzły, a programowo określony kontekst niewystarczający, możesz użyć atrybutów ARIA, takich jak aria-label lub aria-labelledby, aby dostarczyć czytnikom ekranu bardziej opisową nazwę linku. Pamiętaj, że aria-label zastępuje widoczny tekst linku dla technologii wspomagających.

Przykłady prawidłowych i nieprawidłowych implementacji

Nieprawidłowe implementacje

1. Ogólny tekst linku bez kontekstu

Treść artykułu na temat dostępności. Kliknij tutaj, aby przeczytać.

Problem: „Kliknij tutaj” nic nie mówi o celu linku poza kontekstem. Czytnik ekranu odczytujący tylko link powie „Kliknij tutaj”, co jest bezużyteczne.

2. Niejasny link "Więcej"

Nasze najnowsze produkty

Opis produktu A... Więcej

Opis produktu B... Więcej

Problem: Kiedy czytnik ekranu prezentuje listę linków, oba zostaną odczytane jako „Więcej”. Użytkownik nie wie, które „Więcej” odnosi się do Produktu A, a które do Produktu B.

3. Link obrazkowy bez tekstu alternatywnego/opisu

Problem: Jeśli nie ma atrybutu alt lub innej programowo dostępnej nazwy, czytnik ekranu może odczytać „obrazek” lub nazwę pliku, co nie informuje o celu linku (kontakt).

Prawidłowe implementacje

1. Opisowy tekst linku

Zapraszamy do przeczytania naszego najnowszego artykułu na temat dostępności cyfrowej.

Rozwiązanie: Tekst linku jest sam w sobie opisowy i jasno wskazuje, co użytkownik znajdzie po kliknięciu.

2. Linki z kontekstem z nagłówka lub listy

Nasze najnowsze produkty

• Produkt A: Dowiedz się więcej o produkcie A

• Produkt B: Sprawdź szczegóły Produktu B

Rozwiązanie: Nawet jeśli użyjemy krótszych linków wewnątrz akapitów (np. "Więcej"), w kontekście elementów listy lub nagłówków, czytniki ekranu mogą prawidłowo powiązać link z jego kontekstem. Preferowane jest jednak użycie bardziej opisowych linków bezpośrednio, jak w przykładzie powyżej.

3. Link obrazkowy z tekstem alternatywnym

Rozwiązanie: Atrybut alt dostarcza opisowego tekstu dla czytników ekranu, jasno wskazując cel linku.

4. Użycie aria-label dla kontekstu, gdy wizualnie link jest zwięzły

Zobacz nasze oferty.

Rozwiązanie: Wizualnie link to „oferty”, ale dla technologii wspomagających jego cel jest rozszerzony przez aria-label, zapewniając pełny kontekst.

5. Użycie aria-labelledby dla złożonych scenariuszy

Kamera internetowa HD

Model wysokiej rozdzielczości z wbudowanym mikrofonem. Szczegóły

Rozwiązanie: Atrybut aria-labelledby wskazuje na element id="product1-title", który zawiera bardziej opisową nazwę dla linku "Szczegóły". Czytnik ekranu odczyta "Kamera internetowa HD Szczegóły" jako nazwę linku.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Zawsze stawiaj na opisowość: Zasada numer jeden to uczynienie tekstu linku tak opisowym, jak to tylko możliwe. Zawsze staraj się, aby sam tekst linku był zrozumiały.
• Testuj z czytnikiem ekranu: Regularnie testuj swoją stronę za pomocą popularnych czytników ekranu (np. NVDA, JAWS, VoiceOver), aby sprawdzić, jak linki są odczytywane i czy ich cel jest jasny poza kontekstem wizualnym.
• Używaj unikalnych nazw linków na jednej stronie: W miarę możliwości, każdy link prowadzący do innej treści powinien mieć unikalny i opisowy tekst. To ułatwia nawigację, gdy użytkownicy przeglądają listę linków.
• Informuj o typie pliku lub akcji: Jeśli link prowadzi do pliku (np. PDF, DOCX) lub wykonuje specjalną akcję (np. otwiera w nowym oknie), dodaj tę informację do tekstu linku (np. „Raport roczny (PDF)”, „Otwórz w nowym oknie”).
• Zachowaj spójność: Utrzymuj spójne nazewnictwo i styl linków na całej stronie.

Typowe pułapki

• Nadmierne poleganie na wizualnym kontekście: Czasem projektanci zakładają, że użytkownik zawsze zobaczy wizualny kontekst linku. Technologie wspomagające nie zawsze odtwarzają ten sam wizualny układ.
• Używanie tylko ikon bez tekstu alternatywnego lub aria-label: Ikony są często używane jako linki, ale bez odpowiedniego tekstu alternatywnego lub nazwy dostępności stają się niedostępne.
• Atrybut title jako jedyny opis: Atrybut title nie jest wystarczająco niezawodny, aby służyć jako podstawowe źródło informacji o celu linku dla technologii wspomagających. Jego wyświetlanie zależy od urządzenia i przeglądarki.
• Dynamiczne linki z JavaScript, które nie aktualizują nazw dostępności: Linki generowane lub zmieniane za pomocą JavaScript muszą odpowiednio aktualizować ich programowo określone nazwy, aby zachować dostępność.
• Niejasne linki w tabelach lub listach: W listach, gdzie każdy element zawiera link "Szczegóły", należy zapewnić, że kontekst elementu listy jest programowo powiązany z linkiem, lub po prostu uczynić link bardziej opisowym.

Spełnienie kryterium WCAG 2.4.4 jest kluczowym krokiem w tworzeniu dostępnych i użytecznych stron internetowych. Jasne i zrozumiałe linki nie tylko pomagają użytkownikom z niepełnosprawnościami, ale również poprawiają ogólną nawigację i satysfakcję dla wszystkich.