FresherTechnicalAccessibility
How do you write alt text for informative, decorative and functional images?
Try answering first
Model answer
The right alt depends on what the image does, not only on what it shows.
- Informative: convey the same information in a short phrase.
alt="Bar chart: sales rose 20% in Q3". - Decorative: use an empty
alt=""so screen readers skip it. Do not omit the attribute, or some readers announce the file name. - Functional (inside a link or button): describe the action or destination, not the picture.
alt="Download report (PDF)". - Image of text: the alt text is the text itself. Prefer real text when possible.
- Complex (charts, diagrams): give a short alt, plus a longer description or data table nearby.
<img src="team.jpg" alt="Five engineers reviewing a whiteboard">
<img src="divider.svg" alt="">
<a href="/report.pdf"><img src="pdf-icon.svg" alt="Download report (PDF)"></a>
Do not start with "image of" or "picture of", because the screen reader already announces it is an image. A CSS background image has no alt, so anything informative must also exist as text.
Ask: if the image disappeared, what would the user lose? Write that.
Key points
- Alt text depends on the image's purpose
- Decorative images use an empty alt, not a missing one
- Functional images describe the action or destination
- Complex images need a longer description nearby
Likely follow-ups
- How would you handle alt text for user-uploaded images?
- How do you write alt text for a chart?
Common mistakes
- Omitting alt so the screen reader reads the file name
- Starting alt text with "image of"