ARIA: link role
===============

A `link` widget provides an interactive reference to a resource. The target resource can be either external or local; i.e., either outside or within the current page or application.

**Note:** Where possible, it is recommended that you use a native `<a>` element rather than the `link` role, as native elements are more widely supported by user agents and assistive technology. Native `<a>` elements also support keyboard and focus requirements by default, without need for additional customization.

Description
-----------

The `link` role is used to identify an element that creates a hyperlink to a resource that is in the application or external.

When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when `role="link"` is added to an element, the `tab` key should enable giving focus to the link and the `enter` key should execute the link when focused.

Use the `tabindex` attribute with a value of `0` to ensure the link is in the correct tab focus order.

**Warning:** Applying the `link` role to an element will not cause browsers to enhance the element with standard link appearance or behaviors, such as underlining, focus rings, navigation to the link target, or context menu actions. That's the developer's responsibility.

Examples
--------

To recreate an accessible link using the `link` role on an element that is not an `<a>`, you need to ensure the link receives focus in the correct tab order, that the element looks like a link, and that the "link" behaves like a link.


```html
<span data-href="https://mozilla.org" tabindex="0" role="link">
  Fake accessible link created using a span
</span>
```

### CSS


```css
span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
span[role="link"]:hover,
span[role="link"]:active,
span[role="link"]:focus {
  color: purple;
}

span[role="link"]:focus {
  background-color: palegoldenrod;
  outline: 1px dotted;
}
```

### JavaScript


```js
const fakeLinks = document.querySelectorAll('[role="link"]');

for (let i = 0; i < fakeLinks.length; i++) {
  fakeLinks[i].addEventListener("click", navigateLink);
  fakeLinks[i].addEventListener("keydown", navigateLink);
}

//handles clicks and keydowns on the link
function navigateLink(e) {
  if (e.type === "click" || e.key === "Enter") {
    const ref = e.target ?? e.srcElement;
    if (ref) {
      window.open(ref.getAttribute("data-href"), "\_blank");
    }
  }
}
```


If the element with `role="link"` receives an `Enter` key event, this executes the link, going to the linked page or moving focus to the in page target.

Optionally, `Shift` + `F10` opens a context menu for the link.

Best practices
--------------

The various widget roles are used to define common interactive patterns. Similar to the document-structure roles, some of these roles, including the `link` role, duplicate the semantics of native HTML elements that are well supported, and should not be used.

Avoid using `link`, which we've included for completeness. The `<a>` semantic equivalent with accessible interactivity is available and supported.

### Prefer HTML

Using the `<a>` instead.

**Note:** There is no need to include `role="link"` on an HTML link as the `<a>`, by default, has that role already.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # link |

See also
--------

* The `<a>` element
* The `<button>` element
* `aria-label`
* ARIA practices `link` role examples