The custom link does not have a role.

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

Description

The custom link does not have a role.

Rule

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

Background

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="https://deque.com">Deque Systems</a>

<h4>Native HTML link using javascript has href attribute:</h4>
<p><code><span class="highlight">&lt;a href="javascript:void(0);"&gt;</span>Quick view&lt;/a&gt;</code></p>

<h4>Custom link has role="link" and tabindex="0" attributes:</h4>
<p><code>&lt;span <span class="highlight">role="link" tabindex="0"</span> data-href="https://deque.com"&gt;Deque Systems&lt;/span&gt;</code></p>

Failure Example:

Fake link using <span> and JavaScript:

<script>
  function openInNewTab(url) {
    var win = window.open(url, '_blank');
    win.focus();
  }
</script>

<span class="fakeLink" onclick="openInNewTab('http://www.deque.com');"&gt;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.

References