Do Icons Need Text Alternatives?

Decide whether an icon needs a text alternative based on how the icon is being used. As with all images, meaning and context play a big role in this decision.

If you decide a specific icon does not need a text alternative, ensure it is coded as decorative. Images that are coded as decorative will be ignored by assistive technology like screen readers, which can be important for reducing the "noise" and cognitive load of reading the page.

Decorative icons

If the icon's only job is to add visual interest, and removing the icon doesn't remove any information, then it is decorative and should not have a text alternative.

For example, let's imagine a company's marketing website. An icon of a swirl was added to fill a visual space that felt too empty, and for no other reason. Removing the icon does not remove any information from the content.

This icon should be coded as decorative.

Redundant icons

If the icon is only reinforcing the meaning of existing text on the page, then it can be considered decorative and does not require a text alternative.

For example, let's imagine a menu on a restaurant website. One section's text heading "Drink Menu" also has an icon of a glass and drinking straw. The icon is reinforcing that the content is about drinks. However, that same information is conveyed by the "Drink Menu" heading text, even if the icon is removed.

This icon should be coded as decorative.

Meaningful icons

If the icon conveys information that is not otherwise available as text, then it must be coded with a text alternative. In most cases, the text alternative should describe the meaning of the icon, not necessarily the appearance of the icon.

For example, let's imagine a product page with several sentences describing the product and how to use it. One sentence states that the product should not be used at high temperatures, and that sentence also has an icon of a triangle with an exclamation point, similar to a caution sign. The icon visually communicates that the sentence is a warning that the user should pay attention to, not just a general description. If the icon is removed, that meaning is lost.

In this case, the icon must be coded with a text alternative that matches its meaning, such as "Caution," "Warning," or "Important."