Icons
Icons have different accessibility requirements depending on the context they are being used in. There are three main use cases for icons and how they should be implemented in an accessible way.
- Inert
- Interactive
- Status/Indicator
Icons by default are inert only meaning they do not provide any context to screen readers nor are interactive. The icon is purely cosmetic without additional markup.
When icons are used in buttons or links they should be used in conjunction with descriptive text.
If the icon in an interactive item does not have text then the parent interactive item (typically a button or link) should have an appropriate aria-label describing the interaction.
If an icon is used to show a status/indicator or part of a larger body of text content then the icon should have an aria-label and role="img" attribute.