How to Make Accessible Buttons

Buttons are some of the most common and numerous elements of a website, and they perform many different functions. Therefore, it's important that they're coded properly so that users of assistive technologies can interact with them.

Give Icon Buttons an ARIA Label

Since a <button> element always attempts to compute its accessible name using its text content, buttons that don't have text content need an aria-label attribute. The value of this attribute will provide an accessible name to assistive technologies.

Icon buttons are a perfect example of buttons than need to be given an aria-label attribute.

Inaccessible: Button Without an ARIA Label

<button type="button">
	<svg />
</button>

The only thing that a screen reader will announce for this button will be the word "button". Therefore, a screen reader user will have no idea what this button's purpose is, or what will happen if they interact with it.

Accessible: Button with an ARIA Label

<button
	type="button"
	aria-label="Download file"
>
	<svg />
</button>

Since this button is given an aria-label attribute, it provides the accessible name of "Download file" to a screen reader. This lets a screen reader user know that interacting with this button will result in downloading a file.

Note: If this is a button that's going to be repeated (e.g., it'll be in every row of a table), then it's important to give the ARIA label a more specific name, such as aria-label="Download file <file_name>", where <file_name> is the name of the file (which would most likely come from a prop).