WCAG 2.4.4 Cel łącza (w kontekście)

Kryterium sukcesu 2.4.4 pomaga zdecydować, czy przejść do linku, bez zgadywania. Użytkownicy czytników ekranu często wyświetlają listę wszystkich linków na stronie, a użytkownicy klawiatury przechodzą od linku do linku; lista dziesięciu linków „Kliknij tutaj” niczego im nie mówi. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.4.4).

Czego wymaga kryterium

Cel każdego linku można określić na podstawie:

• samego tekstu linku albo
• tekstu linku razem z jego programowo określonym kontekstem —

z wyjątkiem sytuacji, w których cel linku byłby niejednoznaczny dla użytkowników w ogóle.

Kontekst linku to informacje, które technologie wspomagające mogą powiązać z linkiem: to samo zdanie, akapit, element listy lub komórka tabeli, nagłówek tabeli dla tej komórki albo tekst wskazany przez aria-describedby. Liczy się też nazwa dostępna linku — w przypadku linku-obrazka jest to tekst alternatywny obrazu.

Wyjątek dotyczy linków, których celu nikt nie jest w stanie ustalić na podstawie strony, np. linku w zagadce; wtedy dodatkowy kontekst nie jest wymagany.

Typowe błędy w sklepie internetowym

• linki złożone tylko z ikony (koszyk, konto, lista życzeń, media społecznościowe) bez tekstu i bez aria-label;
• linki ze zdjęciem produktu, w których obraz nie ma tekstu alternatywnego, przez co link nie ma żadnej nazwy;
• kilka linków „Czytaj więcej”, „Kup teraz” lub „Szczegóły” w siatce, niepowiązanych z nazwą produktu;
• obszar mapy odsyłaczy (<area>) z linkiem, ale bez alt;
• linki, których tekstem jest goły adres URL lub kod śledzący.

Jak to sprawdzić

Automatycznie: nasz skaner zgłasza linki bez rozpoznawalnego tekstu (reguła link name) oraz obszary map odsyłaczy bez tekstu alternatywnego. Nie potrafi ocenić, czy nazwa typu „Więcej” jest zrozumiała w kontekście, więc niejednoznaczne teksty linków wymagają kontroli ręcznej.

Ręcznie: użyć listy linków czytnika ekranu (lub rozszerzenia przeglądarki, które wyświetla linki) i przeczytać każdy link w oderwaniu od kontekstu. Jeśli link jest niejasny, sprawdzić, czy jego zdanie, element listy, komórka tabeli lub nagłówek wyjaśniają, dokąd prowadzi. Szczególnie sprawdzić linki-ikony i linki-obrazki.

Jak to naprawić

• Pisać teksty linków, które mówią, dokąd prowadzą: „Zobacz koszty dostawy” zamiast „Kliknij tutaj”.
• W kartach produktów robić linkiem nazwę produktu albo dodawać kontekst do powtarzanych linków: Kup teraz<span class="visually-hidden"> – Lniana koszula</span>.
• Nadawać linkom-ikonom nazwę dostępną za pomocą widocznego tekstu, tekstu ukrytego wizualnie lub aria-label.
• Dla obrazów będących linkami pisać tekst alternatywny opisujący cel linku, a nie tylko obrazek.
• Dodawać alt do każdego <area> w mapie odsyłaczy.

Powiązane kryteria

• 2.5.3 Etykieta w nazwie — nazwa dostępna musi zawierać widoczny tekst.
• 2.4.6 Nagłówki i etykiety — nagłówki i etykiety muszą być opisowe.
• 1.1.1 Treść nietekstowa — obrazy potrzebują alternatyw tekstowych.

Najczęstsze pytania

Czy linki „Czytaj więcej” są dozwolone według WCAG 2.4.4?

Tak, jeśli ich cel wynika z kontekstu określonego programowo, np. z tego samego zdania, akapitu, elementu listy lub komórki tabeli albo z nagłówka, pod którym znajduje się link. Mimo to lepszy jest tekst linku zrozumiały sam w sobie.

Czym jest programowo określony kontekst linku?

To informacje, które technologie wspomagające mogą powiązać z linkiem, np. otaczające zdanie, akapit, element listy lub komórka tabeli albo tekst powiązany z linkiem przez aria-describedby lub aria-labelledby.

Czy linki-ikony naruszają 2.4.4?

Link-ikona bez nazwy dostępnej, np. ikona koszyka lub mediów społecznościowych bez tekstu i bez aria-label, nie ma celu, który dałoby się określić. Trzeba nadać mu nazwę, np. „Koszyk” lub „Instagram”.