- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 106 / 193
2.4.4 Cel linku (w kontekście)
Link musi mówić, dokąd prowadzi. Przeczytane osobno „kliknij tutaj” nie mówi nic.
/ Czego wymaga
Użytkownicy czytników ekranu często przechodzą po stronie od linku do linku albo otwierają listę wszystkich linków, żeby znaleźć ten właściwy. W obu przypadkach słyszą tekst linku prawie bez otoczenia. Link o treści więcej, tutaj albo szczegóły, a tym bardziej link z samą ikoną bez tekstu, niczego im nie mówi. Osoby sterujące głosem też potrzebują nazwy, którą mogą wypowiedzieć, a każdy, kto przegląda stronę wzrokiem, korzysta na linkach mówiących, dokąd prowadzą.
Cel musi wynikać z samego tekstu linku albo z tekstu razem z kontekstem, który da się określić programowo: z tego samego zdania, akapitu, elementu listy lub komórki tabeli z jej nagłówkami albo z atrybutu aria-label lub aria-labelledby na linku. Czytaj więcej na końcu akapitu o jednym temacie może przejść dzięki kontekstowi. Nie przechodzi, gdy nic w pobliżu go nie objaśnia. Kryterium wyłącza linki, których cel byłby niejasny dla wszystkich użytkowników.
/ Jak strony go nie spełniają
- Link zawiera tylko ikonę albo obraz bez tekstu alternatywnego, więc nie ma nazwy, a czytnik ekranu z braku innych danych odczytuje adres URL.
- Każda z zajawek aktualności kończy się linkiem Czytaj więcej, a link stoi w osobnym elemencie, z dala od tytułu, do którego należy.
- Ikona mediów społecznościowych jest narysowana jako tło CSS albo SVG, a link wokół niej nie ma dostępnej nazwy.
- Tekstem linku jest goły adres URL albo nazwa pliku w rodzaju doc_final_v3.pdf.
- Kilka linków o tej samej treści, na przykład Pobierz, prowadzi do różnych plików.
/ Jak sprawdzić samodzielnie
- Przejdź po stronie klawiszem Tab i czytaj tylko tekst każdego linku, gdy dostaje fokus. Zadaj sobie pytanie, czy wiesz, dokąd prowadzi.
- Otwórz listę linków: w darmowym czytniku ekranu NVDA naciśnij Insert+F7, w VoiceOver użyj pokrętła. Przeczytaj listę od góry do dołu. Niejasne i powtarzające się nazwy od razu rzucają się w oczy.
- Dla każdego niejasnego linku sprawdź, czy brakującą część podaje jego własne zdanie, akapit, element listy albo komórka tabeli.
- Obejrzyj linki z samą ikoną w DevTools, gdzie panel Accessibility pokazuje wyliczoną nazwę. Pusta nazwa jest błędem.
- Uruchom darmowe narzędzie, na przykład WAVE albo axe DevTools, żeby wypisać linki bez tekstu.
/ Jak to naprawić
- Wpisz cel do tekstu linku: Raport roczny (PDF) zamiast kliknij tutaj.
- W linkach z obrazem wpisz cel w atrybucie alt elementu img. W linkach z ikoną SVG dodaj aria-label do elementu a albo umieść w nim wizualnie ukryty element span z tekstem.
- Zostaw powtarzane Czytaj więcej, ale rozszerz jego nazwę wizualnie ukrytym elementem span z tytułem artykułu albo atrybutem aria-labelledby, który wskazuje na link i na tytuł.
- Albo zrób linkiem sam tytuł i usuń osobne Czytaj więcej.
- Gdy widoczny tekst zostaje krótki, zadbaj, by dostępna nazwa nadal zawierała widoczne słowa, tak żeby osoby sterujące głosem mogły wypowiedzieć to, co widzą.
/ Co sprawdza nasz skaner
Temu kryterium odpowiadają cztery testy. W źródle HTML link_text_missing liczy linki i przyciski bez tekstu, aria-label, title i alt obrazu, a link_text_generic te, których cały tekst to jedna z krótkiej listy angielskich fraz, na przykład click here. Na wyrenderowanej stronie ambiguous-link-text zgłasza identyczne nazwy prowadzące w różne miejsca, a reguła link-name z axe-core zgłasza linki bez nazwy. Żaden test nie czyta zdania wokół linku.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy „Czytaj więcej” zawsze narusza WCAG?
Nie. Na poziomie A cel może wynikać z tekstu linku razem z kontekstem, więc Czytaj więcej wewnątrz akapitu albo elementu listy, który nazywa temat, może przejść. Nie przechodzi, gdy kontekst nie jest powiązany programowo, na przykład gdy link stoi w osobnym kontenerze. Surowsze kryterium 2.4.9 na poziomie AAA wymaga, by tekst linku wystarczał sam.
Lepiej użyć aria-label czy wizualnie ukrytego tekstu w linku?
Jedno i drugie daje linkowi dostępną nazwę. Wizualnie ukryty tekst jest częścią treści, więc utrzymuje się go razem z nią. Atrybut aria-label zastępuje technologiom wspomagającym cały tekst wewnątrz linku, więc musi powtarzać widoczne słowa i być zmieniany razem z nimi. Przy linkach z samą ikoną sprawdzi się każdy sposób. Przy linkach z widocznym tekstem bezpieczniej jest dodać ukryty tekst.
Czy identyczny tekst linków jest problemem?
Jest, gdy linki prowadzą w różne miejsca, bo na liście linków nic ich wtedy nie odróżnia. Linki prowadzące do tego samego celu mogą i powinny mieć ten sam tekst. Osobne kryterium, 3.2.4 Spójna identyfikacja, wymaga, by komponenty o tej samej funkcji były oznaczane spójnie w całym zestawie stron.