Rules of thumb
The alt text depends on the context the image is used in, not just the contents of the image.
The goal with alternative text should be to convey the semantic meaning of the image to the user.
- i.e. What's the purpose of this image, and if I can click on it, what happens?
Alt text should not include additional contextual information.
Decorative images don't need alt text.
- can specify
alt=""to indicate that screen readers can ignore it.
Using img tag vs background-image property
Use img tag for semantically-meaningful images.
Use background-image css property for purely aesthetic background images. background-image can't be given alt text.
Further reading
- How to judge if an image is decorative. “Your Image Is Probably Not Decorative”
- How To Design Great Alt Text by Deque
- Alternative Text by WebA
Some of this content is based on Josh Comeau's excellent CSS resources.