Button Tips

Give Icon Buttons an aria-label Attribute

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 Attribute

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

The information a screen reader provides for this button will only consist of "button". Therefore, a screen reader user will have no idea what this button's purpose is, or what will happen if they click on it.

Accessible: Button with an aria-label Attribute

<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 clicking on this button will result in downloading a file.