Link: 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. Links MUST have an href attribute.

Background

Links made from <a> elements must have an href attribute or role="link" to be semantic hyperlinks. Without an href attribute or a role, screen readers will not know that the text within the <a> element is a hyperlink.

How to Fix

If the control is navigating (linking) to another location, fix this issue by using ONE of the following techniques:

1. Provide an HREF value (even if JavaScript event handlers are used) for the link.

<a href=quickview.html">Quick view</a>

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

2. Add role="link" to the anchor element.

Note: Ensure that if JavaScript event handlers are used, they allow the link to be activated with the Enter key in addition to mouse click. If no href is used, ensure the link is keyboard focusable with tabindex="0".

If the control is doing a "button action" as opposed to navigating to another location, fix this issue by using ONE of the following techniques:

1. Use a native HTML <button> element.

<button>Apply now!</button>

2. Add role="button" to the anchor element.

Note: Ensure that if JavaScript event handlers are used, they allow the control to be activated with the Enter key and Spacebar in addition to mouse click. If a button element is not used, ensure the control is keyboard focusable with tabindex="0".