Solice UI
Back to the curriculum

Chapter 5 · Accessibility & Interaction

Images and alternative text

Alternative text replaces the purpose of an image when the image is unavailable or cannot be seen. The right wording depends on what the image contributes in its current context.

Beginner · Lesson 4 of 6 in this chapter

Describe the information, not every pixel

A chart alternative should communicate its key conclusion, while a product photo may need the visible product and variant. Avoid phrases such as “image of” when the browser already announces that it is an image.

Decoration should stay quiet

An empty alt value tells assistive technology to skip a decorative image. If nearby text already says the same thing, repeating it in the alternative can create unnecessary noise.

Choosing text for a lesson diagram

  1. If the diagram explains a request flow, summarize that flow in the alternative or surrounding text.
  2. If the same explanation is already complete beside it, use an empty alternative.
  3. Do not place essential text only inside the image.
  • Alternative text communicates purpose in context.
  • Decorative images usually need an empty alternative.
  • Keep essential information available as real text.