Icons are often included using different methods that don't support the alt attribute. Icon font systems like Font Awesome use CSS like this: .fa-trash::before

Icons are often included using different methods that don't support the alt attribute. Icon font systems like Font Awesome use CSS like this: .fa-trash::before { content: "\f1f8"; } Screen readers these days have good support of the ::before and ::after pseudo-elements and most can the values of content properties but if the icon font is using the Unicode private use area, a screen reader can't read it. There's a new standard for content properties that allow for inclusion a text alternative within the value but it's not broadly supported and in browsers that don't support it, the visual content is not rendered. Icons are also sometimes included using a background-image (maybe one that's part of a sprite sheet) so a text alternative needs to be added somewhere. aria-label and aria-labelledby attributes can provide text alternatives but generally including the text in an adjacent element that's visually hidden is more robust.