Przejdź do treści
SilktidePomoc

Łącza dla czytników ekranu

Silktide wykrywa elementy łączy, które są nieprawidłowo utworzone w sposób uniemożliwiający korzystanie z nich przez — łącza bez czytelnego tekstu, łącza bez miejsca docelowego i pozostałe na stronie puste znaczniki łączy.

Aby łącze działało z technologiami wspomagającymi, musi mieć zarówno miejsce docelowe (atrybut href), jak i czytelną zawartość:

<!-- Działa: miejsce docelowe i czytelny tekst -->
<a href="/about">O nas</a>

<!-- Działa: łącze obrazkowe z tekstem alternatywnym -->
<a href="/apple"><img src="apple.png" alt="Jabłko"></a>

Dlaczego to jest ważne

ogłasza każde łącze za pomocą jego tekstu. Łącze z miejscem docelowym, ale bez tekstu, jest ogłaszane jedynie jako „łącze” — użytkownik może je aktywować, ale nie wie, dokąd prowadzi. Łącze z tekstem, ale bez miejsca docelowego, wygląda na klikalne, lecz nigdzie nie prowadzi. Oba wzorce naruszają podstawową zasadę, która umożliwia osobom korzystającym z technologii wspomagających nawigowanie po stronie za pomocą jej łączy.

Jak to naprawić

  1. W przypadku łącza z miejscem docelowym, ale bez czytelnego tekstu: dodaj tekst wewnątrz łącza albo , jeśli zawiera ono wyłącznie obraz.
  2. W przypadku łącza z tekstem, ale bez miejsca docelowego: dodaj brakujący atrybut href albo, jeśli element jest faktycznie celem, do którego mają przechodzić inne łącza, przenieś jego id do elementu niebędącego łączem:
<!-- Starsza kotwica docelowa, odradzana w HTML5 -->
<a name="example"></a>

<!-- Zalecane: id na zwykłym elemencie -->
<div id="example">...</div>
  1. W przypadku pustych znaczników <a></a> bez żadnych atrybutów: usuń je, ponieważ nie służą żadnemu celowi. Często pozostawiają je edytory lub skrypty.
  2. Jeśli element jest faktycznie przyciskiem — wywołuje działanie zamiast nawigować — użyj elementu <button> albo dodaj role="button" do istniejącego znacznika.

Jak Silktide przeprowadza tę kontrolę

  1. Znajdź każdy element <a> na stronie i odczytaj jego tekst (w tym tekst alternatywny obrazu oraz tekst dodany przez CSS), jego href oraz wszelkie atrybuty id lub name.
  2. Oznacz trzy problematyczne wzorce:
    • Łącze z href, ale bez czytelnego tekstu.
    • Element z tekstem oraz id lub name, ale bez href — cel udający łącze albo łącze bez miejsca docelowego.
    • Całkowicie pusta kotwica bez tekstu, href, id ani name.
  3. Dwa wzorce celowo nie są oznaczane:
    • <a> z tekstem, ale bez href, id ani name — HTML5 dopuszcza to jako „łącze zastępcze”, często uzupełniane później przez .
    • Puste kotwice z id lub name, ale bez href — są to starsze cele skoku, a nie łącza.

Dowiedz się więcej

Ostatnio zaktualizowano

Czy ta strona była pomocna?