The custom button does not have a role.
Description
The custom 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. 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 button needs to have, at a minimum:
- role="button"
- tabindex="0" (to place the custom button in the natural tab order)
- An accessible label via the text inside the button, aria-labelledby, or aria-label
- Expected keyboard, click, and touch interactions.
See the WAI-ARIA Authoring Practices 1.1 documentation for custom buttons for a complete list of other necessary attributes.
To fix this issue, use a native HTML button element, or apply role="button" and tabindex="0" attributes to the custom button container.
Code Examples
Good Examples:
A native HTML <button>:
<button>Apply now!</button>
A custom button with role, tabindex, class, and aria-label applied:
<span role="button" tabindex="0" class="apply-btn" aria-label="Apply Now!"></span>
Failure Examples:
Custom button is missing label using inner text or aria-label:
<span role="button" tabindex="0" class="apply-btn"></span>
How To Fix
Fix this issue by using ONE of the following techniques:
- Use a native HTML <button> element.
- Add role="button" and tabindex="0" to the custom button container; enable expected keyboard, click, and touch interactions via JavaScript; and create an accessible label via aria-labelledby or aria-label.
Don't do this:
- Create a custom button using a script without giving it role="button", tabindex="0", all expected input interactions, and an accessible label.