Button: Button 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. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.

How to Fix

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 custom button container. NOTE: If you use role="button" instead of <button>, you will need to ensure Enter and Spacebar can activate the button.

<span role="button" class="apply-btn" aria-label="Apply Now!"></span>