accessibility
Alt text
What is alt text?
Alt text is the written description an image carries for people who can't see it - read aloud by a screen reader, and shown if the image fails to load. Good alt conveys what the image means; bad or missing alt leaves a hole in the page.
Also known as: alternative text, alt attribute
The demo
The same chart image, three ways of labelling it. Switch the alt strategy and read what a screen-reader user actually hears - the picture is identical each time.
Screen reader announces:
Switch the alt strategy to hear the difference.
What this demo shows (text version)
A bar chart image where the final bar is much taller than the rest, plus a line showing what a screen reader would announce for it. With no alt the reader has nothing meaningful to say and may fall back to the filename; with the filename as alt it reads out something like "chart-final-v2.png", which is useless.
With good alt it announces a real description - "Bar chart: Q3 revenue up 40% on Q2" - so a person who can't see the image still gets its point. The image is identical in every case; only the written alternative changes, which is the whole job of alt text.
With no alt the screen reader had nothing useful to say; with the filename it read out gibberish; with a real description it passed on the actual point of the picture. Same image every time - the only thing that changed was whether someone not looking at it got the meaning or got left out.
Describe the purpose, not the pixels. Alt should say what the image is there to communicate in this context - "Bar chart: Q3 revenue up 40%" beats "a bar chart", which beats the filename. Skip "image of" (the screen reader already says that), and keep it tight.
Know when to say nothing. A purely decorative image should have empty alt (alt="") so the screen reader skips it rather than announcing clutter - a missing alt attribute is not the same thing, and often makes the reader fall back to reading the filename. The hardest alt-text skill is deciding which images carry meaning and which are just there to look nice.