The custom link does not have a role.

Link to The custom link does not have a role. copied to clipboard


The custom link does not have a role.


The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.


Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements — such as <button>, <a>, <input>, <select> — already have a role, so nothing more needs to be done. Because of this, it is best to use native HTML elements whenever possible, and style them as desired using CSS.

If you create a custom version of a native HTML element, or a custom control or widget without a native HTML equivalent, you must add the relevant role(s) using ARIA as well as the expected keyboard interactions.

A custom link needs to have, at a minimum:

  • role="link"
  • tabindex="0" (to place the custom link in the natural tab order)
  • Expected keyboard interaction: Enter executes the link
  • Click and touch event handlers to execute the link.

To fix this issue, use a native HTML <a> element, or apply role="link" and tabindex="0" attributes to the custom link container.

Code Examples

Good Examples:

Link using native HTML element:

<a href="">Deque Systems</a>

Native HTML link using javascript has href attribute:

<a href="javascript:void(0);">Quick view</a>

Custom link has role="link" and tabindex="0" attributes:

<span role="link" tabindex="0" data-href="">Deque Systems</span>

Failure Example:

Fake link using and JavaScript:

  function openInNewTab(url) {
    var win =, '_blank');

<span class="fakeLink" onclick="openInNewTab('');">Deque Systems</span>

How To Fix

Fix this issue by using one of the following techniques:

  1. Use the HTML <a> element. (Be sure to include an href attribute even if javascript event handlers are used.)
  2. Use the ARIA role="link" and tabindex="0" attributes on the custom link element container (e.g. <p>, <span> or <div>). (Be sure to use event handlers that can be operated by keyboard, mouse, and touch screens.)

Don't do this:

  • Create custom links without the role="link" attribute.
  • Create links without descriptive link text.