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

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 click and keydown events 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