What

An accessible name is a short string of words providing meaning to an element which is useful for screen readers.

Why

Screen readers encountering a button will read the code <button> and that doesn't provide enough information to inform the screen reader what action will take place if it is pressed.

A button indicates an action is going to happen if clicked and not to be confused with a link which is not an action.

An example of a button might be a button on a website to enable a mobile app to be launched. In this instance the screen would need to know this.

How

For each <button> element, provide an accessible name using one of the following methods. For this example we have a button with an image with the word find visible.

Good

  • title attribute

Better

  • aria-label attribute
  • aria-labelledby attribute referencing visible text

Best

  • Inner text that’s available to assistive technologies (not marked with display: none or aria-hidden="true")