WCAG 2.4.9: Cel linku (tylko link)

Co oznacza ta zasada

\n

WCAG 2.4.9 — Cel linku (tylko link) jest kryterium sukcesu na poziomie AAA w ramach WCAG 2.1 i 2.2. Wymaga ono, aby cel każdego linku można było określić wyłącznie na podstawie tekstu linku. W przeciwieństwie do odpowiednika na poziomie AA, WCAG 2.4.4 (Cel linku — w kontekście), który dopuszcza wywnioskowanie celu linku z otaczającego kontekstu, takiego jak nagłówek, akapit lub komórka tabeli, 2.4.9 jest znacząco bardziej rygorystyczne: sam tekst linku musi być w pełni samoopisowy, bez jakiegokolwiek polegania na treści otaczającej.

\n

Kryterium dotyczy wszystkich hiperłączy utworzonych za pomocą elementu <a>, a także każdego elementu interaktywnego, który ma nazwę dostępną i zachowuje się jak link. Obejmuje to linki obrazkowe (gdzie atrybut alt obrazu lub aria-label zapewnia nazwę dostępną), linki wystylizowane jak przyciski oraz linki oparte na SVG. Nazwa dostępna linku — obliczana na podstawie widocznego tekstu, aria-label, aria-labelledby lub alternatywnego tekstu obrazu — musi sama w sobie komunikować, dokąd prowadzi link lub co robi.

\n

Co jest uznawane za spełnienie: Link spełnia 2.4.9, gdy użytkownik, który czyta wyłącznie tekst linku — i nic więcej na stronie — może z pełnym przekonaniem zrozumieć jego cel lub funkcję. Na przykład link o treści „Pobierz Raport Dostępności za rok 2024 (PDF, 2,4 MB)” spełnia kryterium, ponieważ wszystkie istotne informacje zawarte są w samym tekście linku. Link o treści „Przeczytaj cały artykuł: Jak pisać dostępne teksty linków” również spełnia kryterium. Link obrazkowy z alt='Zobacz plany cenowe' spełnia kryterium, ponieważ tekst alternatywny jest w pełni opisowy.

\n

Co jest uznawane za niespełnienie: Linki, których tekst brzmi „kliknij tutaj”, „czytaj więcej”, „dowiedz się więcej”, „to”, „tutaj” lub jakiekolwiek inne wyrażenie, które ma sens tylko w kontekście, nie spełniają tego kryterium. Podobnie, link otaczający obraz, którego atrybut alt jest pusty lub nieobecny, pozostawiając link bez nazwy dostępnej, również nie spełnia kryterium. Linki, które używają aria-label lub aria-labelledby, ale których obliczona nazwa dostępna nadal jest niejasna, także nie spełniają wymagań.

\n

Oficjalne wyjątki: WCAG wyraźnie wskazuje jeden wyjątek — gdy cel linku jest celowo niejednoznaczny dla wszystkich użytkowników, a nie tylko dla osób z niepełnosprawnościami. Na przykład link-zajawka w grze typu mystery o treści „Kontynuuj” (gdzie niejednoznaczność jest zamierzonym elementem projektu) nie będzie uznany za naruszenie, pod warunkiem że niejednoznaczność dotyczy wszystkich użytkowników. Ten wyjątek jest wąski i nie powinien być używany jako furtka do stosowania słabej jakości tekstów linków.

\n\n

Dlaczego to ma znaczenie

\n

Znaczący tekst linku jest jednym z najbardziej wpływowych usprawnień dostępności, jakie może wprowadzić strona internetowa. Populacje najbardziej bezpośrednio dotknięte przez niejasne teksty linków to użytkownicy czytników ekranu, użytkownicy nawigujący za pomocą klawiatury, osoby z niepełnosprawnościami poznawczymi oraz użytkownicy oprogramowania do sterowania głosem.

\n

Użytkownicy czytników ekranu — zazwyczaj osoby niewidome lub z poważnymi ubytkami wzroku — często nawigują po stronie, wywołując listę wszystkich linków. Popularne czytniki ekranu, takie jak NVDA, JAWS i VoiceOver, oferują tę funkcję, która wyodrębnia nazwy dostępne wszystkich linków i prezentuje je jako samodzielną listę. Gdy linki brzmią „kliknij tutaj”, „czytaj więcej” lub „szczegóły”, lista ta staje się serią identycznych, pozbawionych znaczenia pozycji. Użytkownik nie ma możliwości ustalenia, który link aktywować, bez przeczytania otaczającej treści dla każdego z nich — jest to zadanie powolne, frustrujące, a często wręcz niemożliwe, zwłaszcza na stronach z dziesiątkami linków.

\n

Zgodnie z danymi Światowej Organizacji Zdrowia około 2,2 miliarda ludzi na świecie ma jakąś formę upośledzenia wzroku, z czego co najmniej 1 miliard ma schorzenie, któremu można było zapobiec lub które wciąż nie zostało rozwiązane. Nawet wśród użytkowników bez niepełnosprawności wzroku, osoby z niepełnosprawnościami ruchowymi, które polegają na przełącznikach lub nawigacji głosowej (korzystając z narzędzi takich jak Dragon NaturallySpeaking), odnoszą ogromne korzyści z opisowych tekstów linków, ponieważ mogą aktywować link bezpośrednio, wypowiadając lub wybierając jego nazwę. Grupy osób z niepełnosprawnościami poznawczymi — w tym użytkownicy z zaburzeniami uwagi, problemami z pamięcią lub trudnościami w czytaniu — również odnoszą korzyści, ponieważ jasne etykiety linków zmniejszają obciążenie poznawcze i potrzebę ponownego czytania kontekstu.

\n

Rozważmy scenariusz z życia wzięty: obywatel Turcji odwiedza stronę publicznego szpitala, aby umówić wizytę. Strona ma trzy przyciski usług, z których każdy zawiera frazę „Randevu Al” (Umów wizytę) bez dodatkowego kontekstu w tekście linku. Niewidomy użytkownik, otwierając listę linków w czytniku ekranu, widzi „Randevu Al”, „Randevu Al” i „Randevu Al” — trzy nierozróżnialne opcje. Nie może ustalić, który link dotyczy kardiologii, który medycyny ogólnej, a który radiologii, bez powrotu do kontekstu. Spełnienie WCAG 2.4.9 wymagałoby, aby każdy link brzmiał „Randevu Al — Kardiyoloji”, „Randevu Al — Genel Pratisyen” i „Randevu Al — Radyoloji”, tak aby cel był jednoznaczny wyłącznie na podstawie tekstu linku.

\n

Poza dostępnością, opisowy tekst linku ma istotną wartość SEO. Roboty wyszukiwarek biorą pod uwagę tekst kotwicy podczas indeksowania stron, a opisowe linki poprawiają sygnały trafności zarówno dla strony źródłowej, jak i docelowej. Zastąpienie ogólnego tekstu kotwicy znaczącymi frazami poprawia wykrywalność i zmniejsza współczynnik odrzuceń, przynosząc korzyści wszystkim użytkownikom.

\n\n

Powiązane reguły Axe-core

\n

WCAG 2.4.9 wymaga testów manualnych, ponieważ narzędzia automatyczne nie są w stanie określić znaczenia ani intencji — mogą oznaczyć brak nazwy dostępnej, ale nie są w stanie ocenić, czy dana nazwa dostępna jest wystarczająco opisowa.

\n

\n
• Wymagane testy manualne — link-name (reguła axe): Reguła link-name w axe-core wykrywa linki, które w ogóle nie mają nazwy dostępnej (na przykład element <a> bez treści tekstowej, bez aria-label, bez aria-labelledby i bez obrazu z niepustym atrybutem alt). Choć reguła ta wychwytuje całkowicie puste linki, nie jest w stanie ocenić, czy istniejąca nazwa dostępna ma sens. Link o treści „tutaj” przejdzie automatyczną regułę link-name, ponieważ technicznie ma nazwę dostępną — ale nie spełnia WCAG 2.4.9, ponieważ ta nazwa nie jest samoopisowa. To właśnie dlatego 2.4.9 jest oznaczone jako wymagające przeglądu manualnego: człowiek musi przeczytać każdą etykietę linku i ocenić, czy komunikuje ona cel w oderwaniu od kontekstu.
\n
• Wymagane testy manualne — identical-links-same-purpose: Axe-core zawiera regułę, która oznacza zestawy linków o identycznych nazwach dostępnych, ale różnych miejscach docelowych. Jest to heurystyka, która ujawnia potencjalne naruszenia 2.4.9 — na przykład wiele linków „Czytaj więcej” prowadzących do różnych artykułów. Jednak nawet ta reguła wymaga potwierdzenia przez człowieka, ponieważ identyczne nazwy prowadzące do tego samego miejsca docelowego nie stanowią naruszenia. Reguła wskazuje kandydatów do przeglądu, a nie definitywne błędy.
\n
• Dlaczego automatyzacja jest niewystarczająca: Do oceny celu linku potrzebne jest rozumienie języka naturalnego. Narzędzie automatyczne może obliczyć, że nazwa dostępna linku to ciąg „szczegóły”, ale nie jest w stanie stwierdzić, że ten ciąg nie opisuje miejsca docelowego. Podobnie narzędzie nie może ocenić, czy „Zobacz” jest wystarczające (być może jest, w bardzo specyficznym, wąsko zdefiniowanym interfejsie), czy też „Zobacz sprawozdanie finansowe za III kwartał” jest lepsze. Ludzka ocena, najlepiej połączona z testami z użyciem czytnika ekranu, jest jedyną wiarygodną metodą.
\n

\n\n

Jak testować

\n

\n
1. Automatyczne skanowanie bazowe: Uruchom axe DevTools (rozszerzenie przeglądarki) lub Lighthouse na docelowej stronie. W axe DevTools wyszukaj wszelkie naruszenia reguły link-name — reprezentują one linki bez nazwy dostępnej i są gwarantowanymi naruszeniami 2.4.9. Wyeksportuj wyniki i zanotuj wszystkie oznaczone linki. Ten krok nie kończy audytu 2.4.9; identyfikuje jedynie najłatwiejsze do wykrycia błędy.
\n
2. Wygeneruj listę linków za pomocą czytnika ekranu: Otwórz stronę w Firefoxie z zainstalowanym NVDA. Naciśnij Insert + F7 (skrót NVDA do listy elementów) i wybierz „Linki” z okna dialogowego. Przejrzyj pełną listę etykiet linków. Zadaj sobie pytanie: czy użytkownik, czytając tylko tę listę, mógłby zrozumieć cel lub funkcję każdego linku? Powtórz ten test w JAWS, naciskając Insert + F7, aby otworzyć okno dialogowe Links List, oraz w VoiceOver w Safari (macOS), naciskając VO + U, aby otworzyć Rotor i przejść do sekcji Linki. Oznacz każdy link, którego etykieta jest niejednoznaczna, zduplikowana przy innym miejscu docelowym lub składa się wyłącznie z ciągu URL.
\n
3. Audyt przechodzenia klawiszem Tab: Nawiguj po stronie, używając wyłącznie klawisza Tab. Za każdym razem, gdy fokus znajdzie się na linku, przeczytaj tylko widoczny tekst elementu w fokusie (lub wysłuchaj komunikatu czytnika ekranu). Bez patrzenia na otaczającą treść zdecyduj, czy cel linku jest jasny. Zanotuj każdy link, którego cel nie jest jasny wyłącznie na podstawie tekstu linku.
\n
4. Sprawdzenie linków obrazkowych: Zidentyfikuj wszystkie linki, które zawierają wyłącznie obraz (bez widocznego tekstu). Sprawdź każdy z nich w narzędziach deweloperskich przeglądarki, aby upewnić się, że obraz ma niepusty, opisowy atrybut alt lub że link ma opisowy aria-label. Obliczona nazwa dostępna powinna być znaczącą frazą.
\n
5. Sprawdzenie zduplikowanego tekstu linków: Wyszukaj w HTML strony wielokrotne wystąpienia tego samego tekstu linku (na przykład wiele kotwic „Czytaj więcej” lub „Kup teraz”). Sprawdź, czy linki te prowadzą do tego samego miejsca docelowego (akceptowalne), czy do różnych miejsc docelowych (naruszenie 2.4.9, chyba że zostaną rozróżnione za pomocą aria-label lub aria-labelledby).
\n
6. Test sterowania głosem: Korzystając z Dragon NaturallySpeaking lub Windows Voice Access, spróbuj aktywować linki, wypowiadając ich widoczną etykietę. Jeśli wypowiedziana etykieta jest niejednoznaczna i pojawia się wiele kandydatów (na przykład wypowiedzenie „Kliknij Czytaj więcej” powoduje podświetlenie kilku linków), potwierdza to realny problem z użytecznością, zgodny z 2.4.9.
\n

\n\n

Jak naprawić

\n

Ogólny tekst linku „Read More” — niepoprawny

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Ogólny tekst linku „Read More” — poprawny

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Link wyłącznie obrazkowy z brakującym tekstem alt — niepoprawny

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Link wyłącznie obrazkowy z brakującym tekstem alt — poprawny

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

Wiele identycznych linków „Satın Al” (Kup teraz) — niepoprawne

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Wiele identycznych linków „Satın Al” (Kup teraz) — poprawne

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(Content truncated due to token limit — please retry this article.)