How to write effective alt text (and why it's important)
You’ve probably heard the old saying, ‘a picture is worth a thousand words.’ However, not everyone can perceive the images we use on the Web. For those users, our messaging can get lost or misunderstood.
We’ve previously talked about the importance of adding captions to videos; it enables those who are deaf, or hard of hearing, to perceive what is being said. Alt text is the visual equivalent. It enables those who can’t see an image to understand what is being depicted.
Why do we use images?
Images are everywhere in digital content. We use them to capture attention and break up text; to communicate complex ideas, evoke emotion and enhance brand identity.
Not all images serve the same purpose. Understanding these differences is key to writing effective alt text.
Informative images
Informative images convey content or information that's important to understanding the surrounding material. These include product photos, charts, screenshots or illustrations supporting an article. If removing the image would result in lost information or context, it's informative.
Functional images
Functional images are used to initiate actions rather than convey information. These are typically icons used as links or buttons—like social media icons that link to your profiles, a magnifying glass icon for search, or a clickable logo that returns you to the homepage. For these images, the alt text should describe what happens when you click, not what the image looks like.
Decorative images
Decorative images don't add information or context to the content. They're purely aesthetic—background patterns, visual dividers, or images that simply repeat information already provided in adjacent text. These images should have empty alt text (alt="") so screen readers can skip over them, allowing users to focus on meaningful content.
This post will focus primarily on writing alt text for informative images, as these are the most common. Getting these right ensures your message reaches everyone, regardless of how they access your content.
What is alt text?
Alt text provides a text alternative for an image so that people that can’t see it, can understand what it’s communicating. These could be people who are blind or visually impaired, or those on a slow Internet connection where images fail to load. Alt text is also useful for search engines crawling your site.
The important thing to understand is that alt text is there to ensure context isn’t lost.
Over 2 million people in the UK live with sight loss. This is predicted to double by 2050.
Most CMSs and social media platforms will provide you a way of adding this text to any images you upload.
Alt text is essential
If you’re not personally dependent on alt text, it can be easy to forget to write it. For many of us, alt text is hidden from view, but that doesn’t mean we shouldn’t try.
If you want to grow your audience or customer base, being more inclusive with your content is a great way of reaching more people.
How to write effective alt text
Well written alt text is concise, but not vague. Instead of describing the image in detail, it provides the lost context from the surrounding content.
We want to aim for no more than 1-2 sentences. Every word we use should be adding value.
Context is the key to writing good alt text. Ask yourself:
Why are we using this image here?
If the image is removed, how does the understanding of the content change?
The same image can have many different descriptions for alt text depending on how it is used.
An example
Let’s consider the following image.
Depending where we use the image, its alt text should change. For example:
On a profile page: ‘Joe Bloggs. A white man with short dark hair, dressed in smart-casual clothes.’
Used in an article about working in an office: ‘Person working from an office with an open laptop and notebook.’
A social media post about healthy mind-space: ‘A person sitting calmly at a desk with a laptop, appearing thoughtful and focused in a quiet workspace.’
In each case, the context the image is being used has been taken into account. We probably only care who is in the image for the profile page. Whereas for the article about working in an office, we care more about the work environment depicted. In the social media post about mind-space, it is the person’s actions that matter.
Note that none of these examples start with ‘Photo of’ or ‘Image of’. We don’t need to explain that the text is describing an image. Assistive technologies handle this for us.
Common mistakes to avoid when writing alt text
It’s important to be aware of some of the mistakes that are frequently made with alt text.
Missing alt text
One of the most common mistakes is forgetting to provide any alt text. Unless our image is purely decorative (like a background image or a visual page divider), it needs alt text.
Non-descriptive alt text
Perhaps as unhelpful as forgetting the alt text, is providing a non-descriptive one:
"No image description"
This is unhelpful to screen-reader users. When this happens, they’re told an image exists, but that they’re not going to be told what it is.
Many social media sites will fallback to non-descriptive alt text when we don’t supply it. So it is important we add it as part of our posts.
Vague alt text
Similar to non-descriptive alt text, vague alt text fails to provide a meaningful description of the image.
Consider the following image:
It depicts Sheffield’s beautiful Weston Park. Perhaps the alt text could be:
"A park"
It’s concise, but vague. We need to think about why we are using a particular image as part of our content.
If this image was being used to illustrate summertime in the park, better alt text would be:
"People enjoying a beautiful summer’s day in Weston Park with groups sat around a bandstand as a brass band performs."
If instead, the image was being used to illustrate the bandstand itself, the alt text might want to focus on its architecture and current use.
Overly descriptive and literal alt text
We don’t want to be vague, but we also don’t want to be overly verbose.
Consider the following image:
We could go into great detail describing the man, what he is wearing, the bus stop, concrete block and the urban background. However, if this image was being used on a product page to promote the t-shirt being modelled, that information would be too much and overwhelming for the customer.
Here, it would be better to focus on the t-shirt’s fit and design.
"A black regular-fit t-shirt with open-mouthed tiger illustration on the back. The word ‘yeah’ appears above the illustration in large bold text."
Alt text is about good communication
A lot of time and thought goes into writing good content, and this includes the images we use to enhance our message. It’s important we include well-written alt text as part of this to ensure everyone can understand what we are communicating.
Concise alt text that maintains context is an important part of creating inclusive digital experiences.
At Evoluted, we understand the value image alt text adds to your content. If you’re looking for further guidance on how accessible your web content is, contact us today to learn more about our Accessibility Audit Services.