The custom link does not have a role.
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>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="https://deque.com">Deque Systems</span>Failure Example:
Fake link using and JavaScript:
<script>
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
</script>
<span class="fakeLink" onclick="openInNewTab('http://www.deque.com');">Deque Systems</span>How To Fix
Fix this issue by using one of the following techniques:
- Use the HTML <a> element. (Be sure to include an href attribute even if javascript event handlers are used.)
- 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.