Give Icon Buttons an
<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
Inaccessible: Button Without an
<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
<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.