Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Buttons Have An Accessible Name

Overview

Buttons without names are unusable for users who rely on screen readers. When a button doesn't have a name, screen readers announce "button".

Recommendations

Lighthouse flags each element that fails the audit. The fix depends on what type of element is flagged:

For <button> elements and elements with role="button":

  • Set the inner text of the element.
  • Set the aria-label attribute.
  • Set the aria-labelledby attribute to an element with text that is visible to screen readers. In other words, the element you point to should not have display: none in its CSS or have aria-hidden="true" in its HTML.

For <input type="button"> elements:

  • Set the value attribute.
  • Set the aria-label attribute.
  • Set the aria-labelledby attribute. See the description in the bullet-point list above.

For <input type="submit"> and <input type="reset">:

  • Set the value attribute, or omit it. Browsers assign default values of "submit" or "reset" when value is omitted.
  • Set the aria-label attribute.
  • Set the aria-labelledby attribute. See the description in the bullet-point list above.

More information

This audit is powered by the aXe Accessibility Engine. See Buttons must have discernible text.

Feedback

Was this page helpful?