WCAG 2.1 – kryterium 2.4.9 – Cel łącza (z samego łącza) (Poziom AAA)

WCAG 2.4.9 Cel łącza

Zapraszamy Was na opis kryterium, które z celowością ma dużo wspólnego. Zaczynamy!

WCAG 2.4.9 Cel łącza na poziomie AAA to rozszerzenie wcześniej opisanej już zasady 2.4.4.

Każdy z linków umieszczony w naszej stronie czy aplikacji mobilnej powinien posiadać kontekst, swój cel. Pewnie wielu z Was zapyta “Ale po co nam dwie identyczne zasady w WCAG?”. Są podobne, ale 2.4.9 jest bardziej restrykcyjna. 

Przyjrzyjmy się temu

Kryterium 2.4.4 kładzie na nas obowiązek by linki miały cel, ale może on również wynikać z otaczających go elementów.

Przykład?

Link, który został umieszczony w paragrafie. Po przeczytaniu paragrafu i natknięciu się na dość ogólny link “Więcej” jesteśmy “mniej więcej” w stanie domniemać, do czego dany link nas zaprowadzi. Pomimo tego, nie polecamy opisywania linków w ten sposób. 

Kryterium 2.4.9 wskazuje jednak, by link był wyróżniony na tyle, by jego samodzielne znalezienie dzięki skrótom klawiszowym, było wystarczające by zrozumieć jego treść. (NVDA – przycisk K; Voiceover – VO + Command + L).

Jak możemy to naprawić i zadbać o dostępność linków?

Nadając im sens. Najczęściej stosowane przez nas metody nadania celu linkom: 

1. atrybut aria label – dodajemy go do samego linku. Uwaga. Należy pamiętać, że aria-label zastępuje całość widocznej etykiety linku. Jeśli więc widzimy tylko “czytaj więcej”, a wartością atrybutu to “Czytaj więcej o sukcesach Kinaole”, technologie asystujące przetworzą właśnie tę drugą wartość.
2. <span>/<div>/<p> z ukrytą klasą – można wykorzystać do tego .sr-only/visually-hidden z Bootstrapa. W jaki sposób ich użyć? Opisujemy link jak zwykle, z tym że dodajemy dodatkowo ukryty element:
   <a href=[…] >Czytaj więcej
   <span class=”visually-hidden> o sukcesach Kinaole </span>
   </a>

Warto zwrócić uwagę na spację w nowym elemencie <span> (szczególnie ważne przy SEO).