Every <img> element tells a story. For sighted users, that story is immediate — the image speaks for itself. For screen reader users, the story only exists if you write it.
The alt attribute is how you write it.
<!-- Informative image — describe what matters -->
<img
alt="A black and white Border Collie with mouth open, sitting outdoors in front of a blurred dark door, looking alert and engaged."
src="/images/posts/alt-text-writing-meaningful-image-descriptions/baptist-standaert-border-collie.webp"
width="400"
/>
A good alt text answers the question: what would I tell someone on the phone who cannot see this image?
It is not a file name. It is not "image of" or "photo of". It is the meaning the image conveys in context.
Photo by Baptist Standaert on Unsplash
While the W3C and WCAG do not define a character limit for alt text, a clear and concise description typically falls between 100 and 150 characters. Not because the spec says so — but because brevity serves the user. A screen reader reads alt text inline with the surrounding content. A description that runs too long breaks the reading flow.
That said, complex images — charts, diagrams, infographics — sometimes need more. In those cases, a short alt text combined with a longer description nearby is the right approach.
The W3C provides a practical alt text decision tree that helps you decide what kind of description — if any — each image needs.
Decorative images
Not every image needs a description. When an image is purely decorative — a background pattern, a divider illustration, a purely visual flourish — the correct approach is an empty alt attribute:
<!-- Decorative image — empty alt tells screen readers to skip it -->
<img src="https://placehold.net/600x400.png" alt="" />
The empty alt="" is intentional. It tells assistive technology: this image carries no information, skip it. This is very different from omitting the attribute entirely.
What not to do
Omitting the alt attribute is the one thing you must never do:
<!-- Missing alt — screen readers announce the file name instead -->
<img src="https://placehold.net/map-600x400.png" />
When alt is missing, some screen readers will announce the file name or the full URL. That is not a fallback — it is noise. Every <img> must have an alt attribute, even if the value is empty.
WCAG 2.1 · Non-text Content
1.1.1 — All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.