What alt text is for
Alternative text is the description a screen reader speaks for an image and what shows when the image fails to load. Good alt text conveys the images purpose in context, not a literal pixel by pixel account. The right description depends on why the image is on the page.
- Informative images need text that conveys their information.
- Functional images, like an icon that acts as a button, describe the action.
- Decorative images should have empty alt so they are skipped.
Matching purpose to wording
The same photo can need different alt text depending on its role.
- A product photo on a shop page should name the product.
- A chart should summarize its key takeaway, not list every point.
- A purely ornamental flourish should be silent to assistive tech.
Common mistakes
- Avoid starting with image of, since the role is already announced.
- Do not stuff keywords, which makes the text noisy and unhelpful.
- Never leave alt missing on a meaningful image, since some readers then read the file name.
For a decorative image, an explicitly empty alt tells the screen reader to ignore it, which is very different from leaving the attribute off entirely.
Key idea
Write alt text that conveys an images purpose in context, and give decorative images an explicitly empty alt so assistive tech skips them.