link

Кога да се използва

Почти никога — препоръчва се използването на <a href="...">. Нативният анкер осигурява фокус, активиране с клавиатура чрез Enter, посетено състояние, отваряне в нов раздел с десен бутон, плъзгане за отбелязване и реален URL адрес, който потребителят може да сподели. role="link" на <div> изхвърля всичко това.

Единствените основателни случаи:

• Система за дизайн на трета страна предоставя компонент за „връзка”, който не е анкер и не може да бъде заменен.
• Поправяте недостъпен <div onclick> докато тече рефакторинг.

При използване на role="link" трябва също:

• Елементът да е фокусируем чрез tabindex="0".
• Да е налично обработване на keydown за Enter (връзките НЕ се активират с Space — това е поведение на бутон).
• Потребителят да разполага с реален начин да види URL адреса на дестинацията при hover/фокус, тъй като липсва href.

Чести грешки

• <a> без href. Без href елементът не е в реда на Tab и екранните четци не го обявяват като връзка.
• <a href="#" onclick="..."> използван като бутон. Вместо това трябва да се използва <button> — връзките навигират, бутоните извършват действия.
• role="link" се активира с Space. Space превърта страницата; връзките се активират само с Enter.
• Текст на връзката „натиснете тук” или „прочетете повече”. Потребителите на екранни четци, извеждащи списък с връзки, виждат само текста на връзката — необходимо е той да бъде описателен.
• Липсващ aria-current="page" на връзката, представляваща текущата страница в навигацията.

Пример

<!-- Препоръчително -->
<a href="/bg/toolkit/standards/wcag/">WCAG 2.2 reference</a>

<!-- Само когато <a href> е невъзможен -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/bg/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/bg/toolkit/'"
>
  Toolkit
</span>