Frontend Stories

Providing text alternatives help everyone

Everyone should have equal access to content online. Text alternatives help make this a reality by ensuring everyone can understand and interact with digital content, regardless of their ability.

Overview

Icons should only be used if their message is completely clear to everyone. Adding text labels instead can help to improve clarity.

For screen readers users this provides a comparable experience for consuming the content especially when images are not purerly decorative. For sighted users this ensure that broken images can still have their message conveyed.

Icons should be simple, easy to understand, and consistent. Icons almost always require familiarity in order to be useful. Across cultures and languages, they can be misinterpreted. In many cases, adjacent text is helpful. (WebAim, 2020)

Don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer. (Thomas Byttebier, 2015)

Basic functionality can be effectively represented by icons but for complex features, text labels should be used. And if you use icons, always have them usability tested. (Zoltan Kollin, 2015)

Evidence and further readings

Here you can find a list of references to dive deeper on the subject.