Role Widget

`link`

Marks an element as a hyperlink — a control that navigates to a new resource when activated. Use the native HTML <a href> element first; only reach for role="link" on a <span> or <div> when there is no way to use the native element.

When to use

Almost never — use <a href="...">. The native anchor gives you focus, keyboard activation on Enter, the visited state, right-click open-in-new-tab, drag-to-bookmark, and a real URL the user can share. role="link" on a <div> throws all of that away.

The only legitimate cases:

A third-party design system ships a non-anchor “link” component you cannot replace.
You’re patching an inaccessible <div onclick> while a refactor lands.

If you do use role="link", you must also:

Make the element focusable with tabindex="0".
Wire keydown for Enter (links do NOT activate on Space — that is a button behaviour).
Provide a real way for the user to see the destination URL on hover/focus, since there is no href.

Common failures

<a> without href. Without href the element is not in the tab order and screen readers do not announce it as a link.
<a href="#" onclick="..."> used as a button. Use <button> instead — links navigate, buttons act.
role="link" activating on Space. Space scrolls the page; links activate on Enter only.
Link text that is “click here” or “read more”. Screen-reader users pulling up a link list see only the link text — make it descriptive.
Missing aria-current="page" on the link representing the current page in a navigation.

Example

<!-- Preferred -->
<a href="/toolkit/standards/wcag/">WCAG 2.2 reference</a>

<!-- Only when <a href> is impossible -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>