WCAG 2.1. – kryterium 2.4.4 – Cel łącza (w kontekście) (Poziom A)

Witamy Was kolejnym kryterium, według nas jednym z ważniejszych z perspektywy osób niewidomych i obsługujących komputer za pomocą czytnika ekranu. 

WCAG 2.4.4 Cel łącza. Zaczynamy!

Na pewno wszyscy kojarzycie serwisy informacyjne czy inne strony gromadzące wiele podobnych elementów, obok których występuje wiele linków o jakże barwnym opisie… “czytaj więcej”. O ile dla większości z nas, dla osób widzących, nie stanowi to żadnego problemu. Skanujemy przecież stronę od góry do dołu, widzimy otaczające te linki nagłówki, opisy…

 A co z czytnikami ekranu?

Jeżeli osoba niewidoma czytałaby stronę po kolei, każdą linijkę po linijce, to jest szansa, że odnajdzie sens takiego linku. Jest to jednak mało prawdopodobne. Rzadko kiedy osoby niewidome obsługują stronę w taki sposób. Nikt z nas nie chciałby czytać całości (czasami jakże wartościowego) tekstu na stronie, prawda?

 No właśnie. Być może nie wiecie, ale czytniki ekranu mają zaimplementowane specjalne skróty klawiaturowe. Jednym z nich jest możliwość przejścia do spisu linków:

•   NVDA – Insert + F7.

•   Voiceover – VO + Command + L.

 Co w wypadku skorzystania z tych skrótów usłyszy osoba niewidoma? “Więcej, więcej, więcej…”. Co powinna wybrać? Nie wiadomo….

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

Nadając im sens. Najczęściej stosowane przez nas metody by spełnić WCAG 2.4.4 cel łącza: 

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>

 Dodatkowo należy pamiętać o spacji w nowym elemencie <span> (szczególnie ważne przy SEO )

 Należy pamiętać o tym, by wartość atrybutu aria-label rozpoczynała się od tej samej treści, która jest dostępna wizualnie.

Dlaczego?

Jeśli link “czytaj więcej” opiszemy jako “Kinaole w podróży, czytaj więcej” to Użytkownicy korzystający tylko z poleceń głosowych tego linku nie będą w stanie “kliknąć”. Nigdy go nie odnajdą.