Rola Widget

`link`

Oznacza element jako hiperłącze — kontrolkę, która po aktywacji nawiguje do nowego zasobu. Najpierw używaj natywnego elementu HTML <a href>; sięgaj po role="link" na <span> lub <div> tylko gdy nie ma możliwości użycia natywnego elementu.

Kiedy używać

Prawie nigdy — używaj <a href="...">. Natywna kotwica daje ci fokus, aktywację klawiaturą Enter, stan odwiedzonego, otwieranie w nowej karcie prawym przyciskiem myszy, przeciąganie do zakładek i prawdziwy URL, który użytkownik może udostępnić. role="link" na <div> pozbawia cię tego wszystkiego.

Jedyne uzasadnione przypadki:

System projektowy firmy trzeciej dostarcza komponent „link” niebędący kotwicą, którego nie możesz zastąpić.
Łatasz niedostępny <div onclick> w oczekiwaniu na refaktoryzację.

Jeśli używasz role="link", musisz też:

Uczynić element fokusowalnym przez tabindex="0".
Obsłużyć keydown dla Enter (linki NIE aktywują się przez Spację — to zachowanie przycisku).
Zapewnić użytkownikowi realny sposób na zobaczenie docelowego URL przy najechaniu / fokusu, ponieważ nie ma href.

Typowe błędy

<a> bez href. Bez href element nie jest w kolejności tabulacji i czytniki ekranu nie ogłaszają go jako linku.
<a href="#" onclick="..."> używane jako przycisk. Zamiast tego użyj <button> — linki nawigują, przyciski działają.
role="link" aktywujące się przez Spację. Spacja przewija stronę; linki aktywują się tylko przez Enter.
Tekst linku „kliknij tutaj” lub „czytaj więcej”. Użytkownicy czytników ekranu przeglądający listę linków widzą tylko tekst linku — zadbaj o opisowość.
Brak aria-current="page" na linku reprezentującym bieżącą stronę w nawigacji.

Przykład

<!-- Preferowane -->
<a href="/toolkit/standards/wcag/">Dokumentacja WCAG 2.2</a>

<!-- Tylko gdy <a href> jest niemożliwe -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Zestaw narzędzi
</span>