school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Buttons Have An Accessible Name

Why the audit is important

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

How to pass the audit

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.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

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

Feedback