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?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.