WebAIM’s analysis of the top homepages in the world continues to cite missing alt-text as one of the most common accessibility failings. So why, given its importance, is alt-text often so badly implemented?
From a technical perspective, image alt-text is simple to add for anyone familiar with a content management system. But knowing how to write an image description that is actually useful can be a little harder.
This guidance is aimed at content editors, authors and managers. But will be useful to anyone who publishes to social media. All Twitter, Facebook and Instagram users can now add alt-text to posts.
What is alt-text?
Alt-text stands for alternative text. It’s also known as “alt attributes,” “alt descriptions” and often wrongly referred to as “alt tags”. It can be added to HTML code and functions as an invisible description for any image presented on a web page.
It looks like this: <img alt=”text alternative”>
Alt-text does not affect how an image is displayed. It provides the content in an alternative text-based format. A screen reader will read this aloud. And the person using the device is given context and meaning about how the image relates to the rest of the page.
Why alt-text is important for accessibility
Not everyone visiting your website will be able to see the images. Certain disabled, visually impaired and blind users may rely on assistive technology. For example, screen readers or text-to-speech software. These process web pages for them.
If no alt-text is provided, a screen reader will simply say “Image”. Or, depending on the device, may read the file name (for example “078GUU.jpeg”) aloud.
Images must have alt-text if they contain:
- critical information
- information that improves understanding in the context of the document
If not, that information becomes inaccessible to those users.
Writing effective alt-text offers Search Engine Optimisation (SEO) benefits too if written well.
(Alt-text is also shown when images do not load on a web page. Some users may also have images turned off in areas with slow internet access.)
Bad alt-text
The cost of writing misleading, unhelpful or irrelevant alt-text is at the user’s expense.
Well-written alt-text can broaden a person’s understanding. Poor alt-text can mislead, confuse and alienate people who rely on assistive technology.
An example of bad alt-text for the above image would be “dog”. This description is too vague and does not provide information to users.
Good alt-text for this image could be: “My golden retriever dog, Scully, posing for a photo in the living room”.
Tips for writing better, more useful alternative text
1. Be specific and succinct
Stick to as few words as possible. Is the colour of the object relevant? Is the weather in the background relevant? Does it matter what person’s hair colour is? Content authors have to decide if this information adds or detracts from the message.
A bad alt-text description for the above image would be: “food on a plate”. A useful alt-tag, depending on the context of the webpage, could be:
“Plate of battered fish and chips, a popular British dish, with a pint of beer on the side”.
The general recommendation for alt-text length is 125 characters. A short sentence or two should be the largest amount needed to convey your message.
2. Don’t be overly descriptive
Writing alt-text is a balancing act of not being too vague and not being overly descriptive. Look to avoid unnecessary details about colours and appearance.
Long descriptions which contain too much detail can be a barrier for screen reader users. This is because they take a long time to read aloud. An example of overly long alt-text for the above fish and chips image might be:
“Battered cod with salad and a side of tartar sauce on a blue plate. The chips are in a dish with a handle. A pint of beer is next to the plate on a rustic table.”
3. Describe information, not aesthetics
Try not to describe what the picture looks like, i.e. “a graphic of bright blue bird”. Describe what the image content is and what it does, such as “Twitter icon.”
Alt text that reads “a bright blue bird” is ambiguous and unhelpful here.
4. Think about the function of the image
Content authors add images to web pages for a reason. Ask yourself, why am I including this? What message am I trying to convey by including it? What further information and meaning will be missed if I don’t include this description?
Tip: Imagine you are explaining the image to someone over the phone.
5. Use normal punctuation
Normal punctuation like commas and full stops can make the text easier for screen readers (and the end-user) to understand.
6. Leave alt-text empty for decorative images
The internet is filled with decorative images. They’re used to help break up long pages of text, or to enhance the feel of the content. These are common in technical, scientific or corporate sites which publish content.
Screen reader users generally agree that mood, feel and aesthetic of a web page are extraneous. They should not impede the accessibility of important content.
Loads of images on a website can be a barrier for screen reader users. A page full of decorative images with excessive alt-text adds noise to the page.
Marking an image as decorative means that a screen reader will skip over it. So unless the image contains useful information, mark it as decorative.
Your image is probably decorative if it:
- does not add further meaning to the content
- is a stock image
If you’re not able to mark an image as decorative, make your image descriptions as useful as possible. Like on Twitter where you must add alt-text.
Using ‘null’ in alt-text
Decorative images should have alt-text of ‘null’ in the HTML (alt=“”) so screen readers can ‘ignore’ them.
If it’s not marked as decorative, and you don’t include alt-text, some screen readers will read out the file name. This creates a frustrating user experience for blind and visually impaired users. Imagine hearing “IMG095778.jpg” read aloud over and over again.
Example of a decorative image
Below is an example of a decorative image in a BBC news article: “Can technology help authors write a book?” The image features a person typing on a laptop. Without the image, the article still makes sense. And that’s what makes it decorative.
As the content author, you need to decide whether the image is informative or decorative. This may change based on the context.
For example, if this image is on a page about mindfulness, it would be decorative and should have an empty alt-tag. If this image was on a photographer’s website, an alt-text description would be useful.
6. Don’t include copyright information or photo credits
There is no need to include in the alt-text:
- the name of the photographer
- creative commons licences
- any extra copyright information
It wastes valuable words which are better suited for a caption beneath the image.
7. Don’t start with “a photo of” or “an image of”
People who use screen readers every day will be aware that they have reached an image because of the semantics of the img element. This information is unnecessary and wastes valuable descriptive words.
The only exception is when a distinction needs to be made between the medium. For example, an art gallery website would need to distinguish between a “photo” and a “painting”. This should be referenced in the alt-text.
An example of bad alt-text for this image would be “Painting of lady crying”. A useful alt-text might read:
“Painting of Anne Boleyn in the Tower of London, resting her head on her crying maid’s lap, shortly after her arrest”.
8. For complex images, provide further explanation elsewhere
For some images, you may find that 125 characters are not enough to convey all the information. Images like maths equations, infographics and flowcharts are good examples. You may need to include alt-text which refers screen reader users to a text-based description somewhere else on the page or website.
Read Penn State University’s guidance on writing alt-text for complex images
9. Don’t leave out important information
Below is an example of a photo advertising a t-shirt on a fashion retailer website.
The alt-text is “I Saw It First oversized tee with slogan front in black, 1 of 4”.
The alt-text description above is missing important information about the t-shirt. While the description describes that there is a slogan on the t-shirt, it doesn’t tell us what it says.
It would be more useful to take out the brand name (‘I Saw It First’) from the alt-text. And instead include detail about the white text slogan written across the chest.
For screen reader users, this is essential information.
10. Don’t rely on automatically generated alt-text that has not been edited
Certain software can generate alt-text automatically. Facebook and Instagram use artificial intelligence (AI) to generate automatic alt-text.
But automatic descriptions are often inaccurate and misleading.
For example, AI software describes Scope for Business logo as ‘a sign’. Not only is this incorrect, but it’s confusing for screen reader users who may be expecting a logo.
Make sure you review and edit any automatically generated alt-text descriptions.
11. Don’t focus on irrelevant information
Alt-text that focuses on irrelevant information is not helpful. It can cause more confusion for screen reader users.
An example irrelevant alt-text of would be:
“A person holding an iPhone on a purple gradient background. The background colours go from lilac to purple to blue.”
In the above example, the alt-text focuses on the wrong parts of the image. It includes too much irrelevant detail about the background colours. And not enough detail about what the image is actually saying.
While “a person holding an iPhone” is correct, the emphasis should be on the icon of a wheelchair user on the phone’s screen.
Alt-text should always be about the image itself, rather than filling it with unnecessary information. Always think about your end user’s needs.
When alt-text is not needed
As mentioned, when an image is decorative. So when it adds no further context or meaning to the rest of the information being displayed on the page.
Other examples include:
- When an image is used in a link, but the image is not needed to understand the purpose of the link
- An icon that already has a text label
- A diagram or chart where the important information is already communicated effectively in the body text
More alt-text resources
WebAIM’s guidelines on alternative text
W3’s alt-decision tree for writing alternative text
University of Leicester’s guide to writing effective alt-text