Jeden link na kartę, nie dwa miejsca kliknięcia

Karty wpisów, produktów czy usług to jeden z najczęstszych wzorców na stronach. Równie często powtarza się w nich ten sam błąd: tytuł jest linkiem, obrazek jest linkiem, a pod spodem jest jeszcze przycisk „czytaj więcej”. Wszystkie trzy prowadzą w to samo miejsce.

Dlaczego to problem

Osoba korzystająca z klawiatury musi przejść klawiszem Tab przez każdy z tych elementów. Przy kilkunastu kartach na stronie to kilkadziesiąt dodatkowych kroków. Czytnik ekranu odczytuje ten sam cel kilka razy, a na liście linków pojawia się seria identycznych pozycji „czytaj więcej”, bez informacji, czego dotyczą. Utrudnia to spełnienie kryterium WCAG 2.4.4 (cel linku w kontekście).

Rozwiązanie: jeden link, cała karta klikalna

Zostaw jeden prawdziwy link, najlepiej w tytule karty. Obszar klikalny rozciągnij na całą kartę stylami CSS, bez dublowania linków w kodzie.

<article class="card">
  <img src="okladka.jpg" alt="">
  <h3>
    <a href="/deklaracja-dostepnosci/" class="card__link">
      Jak przygotować deklarację dostępności
    </a>
  </h3>
  <p>Krótki opis wpisu.</p>
</article>

.card { position: relative; }
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__link:focus-visible { outline: 3px solid currentColor; }

Pseudoelement ::after rozciąga obszar kliknięcia na całą kartę, ale w drzewie dostępności jest jeden link o czytelnej nazwie. Obrazek dekoracyjny ma pusty atrybut alt, żeby nie powtarzać tytułu. Upewnij się też, że fokus jest wyraźnie widoczny, np. obrysem całej karty.

Na co uważać

• Nie owijaj całej karty w <a>, jeśli zawiera dużo tekstu. Czytnik odczyta wtedy całą treść jako nazwę linku.
• Dodatkowe akcje, np. „dodaj do ulubionych”, powinny być osobnymi przyciskami nad warstwą linku (position: relative i wyższy z-index).
• Jeśli zostawiasz „czytaj więcej”, dodaj ukryty tekst z tytułem, żeby link miał jednoznaczny cel.

Sprawdź swoje karty

Zdublowane linki łatwo przeoczyć, bo wizualnie wszystko działa. Wychodzą przy teście klawiaturą i w raporcie z badania. Zamów bezpłatny Trop Zwiad – zbadamy automatycznie jeden adres, np. listę wpisów lub produktów, i prześlemy raport PDF.