Button: Button does not have a name

Rule

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

Background

Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.

How to Fix

Fix this issue by using any of the following techniques:

1. Use the innertext of the <button> or role="button" element

<button>Apply now!</button>

<button class="apply-btn"><span class="sr-text">Apply now!</span></button>

2. Use a non-empty aria-label attribute on the <button> or role="button" element.

<button class="apply-btn" aria-label="Apply now!"></button>

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