Every <img> element tells a story. Sighted users get it the moment they see the image. For screen reader users, the story only exists if you write it, and the alt attribute is where 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"
/>
Good alt text answers one question: what would I tell someone on the phone who can't see this image? Leave out the file name and phrases like "image of" or "photo of", and describe what the image means in context.
Photo by Baptist Standaert on Unsplash
The W3C and WCAG don't set a character limit for alt text, but a clear, concise description usually falls between 100 and 150 characters. The reason is the user: a screen reader reads alt text inline with the surrounding content, and a long description breaks the reading flow.
Complex images such as charts, diagrams and infographics sometimes need more. For those, pair a short alt text with a longer description nearby.
The W3C has 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, like a background pattern, a divider illustration or a visual flourish, use 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 that the image carries no information and can be skipped, which is very different from leaving the attribute out.
What not to do
Never omit the alt attribute:
<!-- Missing alt — screen readers announce the file name instead -->
<img src="https://placehold.net/map-600x400.png" />
When alt is missing, some screen readers announce the file name or the full URL, which is just 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.