How to write accessible alt text for images
Writing good alternative text (alt text) for images is an important aspect of web accessibility.
Alt text provides a brief description of the image for individuals who are visually impaired and using a screen reader.
The history of alt text for images on the web
Alt tags for images have been used on the web since the early days of the internet. The first web browsers, such as Mosaic and Netscape, supported the use of alt tags for images as a way to provide a text description of an image for users who were unable to view images due to slow internet connections or other technical limitations.
The use of alt tags for accessibility became more widespread as the World Wide Web Consortium (W3C) released the Web Content Accessibility Guidelines (WCAG) in 1999. These guidelines set standards for accessibility on the web and recommended the use of alt tags for images to provide a text description for visually impaired users.
Since then, alt tags have become an essential component of web accessibility and are used by web developers to provide information about images to screen readers and other assistive technologies.
Why is no alt text bad for images?
Accessibility
Alt text provides a text description of images for visually impaired users who use screen readers. Screen readers cannot interpret images, so alt text helps them to do so.
Search engine optimisation (SEO)
Alt text helps search engines understand the content of images, which can improve the search ranking of a webpage.
User experience
In case the image fails to load, the alt text serves as a fallback to display a description of the image. This helps users understand what the image is about, even if it’s not visible.
Example of alt text for images
Let’s practise writing alt text for an image.
- Bad (missing alt text):
<img src="dog.jpg"/> - Bad (keyword stuffing):
<img src="dog.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/> - Better:
<img src="puppy.jpg" alt="dog"/> - Best:
<img src="puppy.jpg" alt="Collie dog playing fetch with a ball"/>
How to write effective alt tags for images
Provide descriptive text for photos, illustrations, diagrams, graphs, animations and videos so a screenreader can read it aloud.
For example, answer these questions when writing alt text for photographs:
- What is specifically in the photo?
- What is happening in the photo?
- Where was the photo taken?
If a picture is worth a thousand words, then the alt text should be those thousand words (though maybe a little less than a thousand…).
Alt text is good for informing search engines too.
Keep it concise
The alt tag should be brief and to the point, usually no more than a few words. Keep it short, fewer than 125 characters.
Describe the image
The alt tag should describe what is happening in the image, such as “A picture of a dog playing with a ball.”
Be descriptive, not redundant
Avoid using filler words like “Image of…” or “Picture of…”, as screen readers announce that it is an image automatically.
Context is important
If the image is part of a link, the alt tag should describe the purpose of the link, such as “Learn more about our services.”
Use plain language, and avoid technical terms unless necessary.
Provide additional information if necessary (for example, “San Francisco Bay Bridge at sunset”).
Avoid using empty alt tags
An empty alt tag provides no information to a screen reader and can make it difficult for visually impaired users to understand the context of the image.
Use decorative images appropriately
For purely decorative images, use an empty alt tag or specify “decorative image”.
By following these guidelines, you can ensure that your alt tags accurately describe your images and provide valuable information to visually impaired users.
Alt text for images is also available on social media platforms
Adding alt text to images and photographs you post to social media platforms like Facebook, Instagram, LinkedIn and Twitter is becoming standard practice.
Here is documentation on how to add alt text to images on these sites:
Related articles from the blog about alternative formats and accessibility
How to make videos accessible with closed captions
Subtitles display only what is spoken. They are intended for users who can hear but prefer to have the dialogue displayed in text format.
Captions provide a way for users with hearing impairments to have equal access to video content. They include dialogue, sound and musical cues.
Designing for users of screen readers
A screen reader is a software application that enables people with visual impairments to use a computer or mobile device. Users of screen readers can benefit from accessible web-based services. This guidance is for web and digital professionals who want to make sure that their service is optimised for users of screen readers.