When adding an Icon block to your post or page, you have the option of including alternative text.
Alternative text contains the information that the icon is intended to communicate, and is announced to users of assistive technology. Alt text is important for making sure your website is accessible.
- If this icon is communicating information, you need alt text.
- If this icon is purely decorative, you don't need alt text.
An easy rule of thumb: If the icon wasn't there, would your page still make sense? If it wouldn't make sense, add alt text.
Alt text best practices
In general, try to follow these best practices:
- Alt text should be about 140 characters or less.
- Clearly and concisely describe the intent of what the icon is communicating, not what the icon looks like.
Example of an icon that needs alt text
In this example, checkmark and X icons are used to indicate when each WordPress service is a good fit for each use case. If the icons weren't there the content wouldn't make any sense. In this case, each icon would need alt text. Good alt text might be "Yes" for the checkmark icons and "No" for the X icons---or whatever text you would normally enter if you weren't using icons.
Example of an icon that does not need alt text
In this example, an icon is used decoratively to illustrate a quote from a book. The icon itself doesn't communicate any information, and the content would still make sense if the icon wasn't there. In this case, alt text should not be added.
Other icon blocks
Other blocks that support icons (like the Callout block or the Icon + Text block) pair the icon with some kind of text or heading. These blocks assume that the icon is purely decorative, and do not give the option for adding alt text.