Zrozumiałe linki: dlaczego „czytaj więcej” to problem
Czego wymaga kryterium
Kryterium 2.4.4 wymaga, aby cel linku wynikał z jego treści albo z treści wraz z najbliższym kontekstem. Kryterium 2.4.9, na wyższym poziomie AAA, wymaga zrozumiałości z samej treści linku.
Skąd bierze się problem
Czytniki ekranu mają funkcję wypisania wszystkich linków na stronie w jednej liście. Osoba niewidoma używa jej tak, jak osoba widząca omiata wzrokiem stronę. Gdy na liście pojawia się dwanaście pozycji „czytaj więcej” i osiem „tutaj”, funkcja przestaje mieć sens.
Jak pisać treść linku
<!-- źle --> Nowa kurtka w ofercie. <a href="/kurtka">Czytaj więcej</a> <!-- dobrze --> <a href="/kurtka">Zobacz kurtkę przeciwdeszczową Alpina</a>
Jeżeli układ graficzny wymaga krótkiego napisu, zostaw go widocznie, a pełną treść podaj etykietą. Uwaga: etykieta zastępuje treść widoczną dla czytnika, więc powinna ją zawierać, aby użytkownik sterowania głosem mógł powiedzieć to, co widzi.
<a href="/kurtka" aria-label="Czytaj więcej o kurtce Alpina">Czytaj więcej</a>
Linki będące ikonami
Ikona bez tekstu jest dla czytnika ekranu pusta. Dodaj etykietę i ukryj samą grafikę.
<a href="/koszyk" aria-label="Przejdź do koszyka, 3 produkty"> <svg aria-hidden="true">…</svg> </a>
Trzy dodatkowe zasady
- Nie używaj samego adresu jako treści linku. Czytnik przeczyta go znak po znaku.
- Dwa linki o tej samej treści powinny prowadzić w to samo miejsce. Jeżeli prowadzą gdzie indziej, zróżnicuj treść.
- Jeżeli link otwiera plik, napisz o tym wprost, na przykład: cennik, plik PDF, 400 kB. Osoba korzystająca z telefonu też to doceni.