HTML · The document layer
How do you write good alt text for images?
Short answer
The alt attribute provides a text alternative for an image. Describe meaningful images, use an empty alt for purely decorative images, and never put essential text only inside an image.
Alt text is read by screen readers and displayed when an image fails to load. The right text depends on why the image is there, not on what the image literally contains.
<img src="chart.png" alt="Revenue grew 18 percent from January to June" />
<img src="divider.svg" alt="" />
<img src="avatar.jpg" alt="Asha Patel, staff engineer" />What good alt text does
- Conveys the purpose or information the image adds
- Stays concise, usually under a sentence or two
- Avoids repeating the caption or nearby text
- Uses alt="" for decorative images so screen readers skip them
- Does not start with 'image of' unless the medium matters
An image that is the only content of a link needs alt text describing the destination, not the picture. A complex chart may need a short alt plus a longer description nearby.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between missing alt and alt=""?
- 2How do you describe a complex chart?
- 3What alt text should a linked logo have?
- 4Should alt text repeat the caption?
Say it in the interview
Alt text is the text alternative for an image. For meaningful images I describe the information they convey, not every visual detail. For decorative images I use an empty alt so assistive technology skips them. I keep it concise and avoid phrases like image of. If the image is a link, the alt should describe the destination, and complex charts may need a longer description nearby.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.