The custom button does not have a role.

Link to The custom button does not have a role. copied to clipboard

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>
<h4>A custom button with role, tabindex, class, and aria-label applied:</h4>
<pre><code>&lt;span role="button" tabindex="0" class="apply-btn" aria-label="Apply Now!"&gt;&lt;/span&gt;</code></pre>

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.

References