Adding alt-text to images is a fundamental aspect of web accessibility. It allows people using screen readers to process images on a page. It includes visually impaired and blind users in the conversation.
The 2019 WebAIM Million analysis found that missing alt-text was the second most common accessibility failing. Why, given the nature of its importance, is alt-text often so poorly implemented?
From a technical perspective, alt-text is very simple to add. But knowing how to write a description that’s 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. Twitter, Facebook and Instagram users can now add alt-text to posts to improve accessibility.
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 but 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 is it alt-text so important?
Not everyone visiting your website will be able to see the images. Certain disabled, visually impaired and blind users may rely on assistive technology like screen readers or text-to-speech software to process web pages for them.
If no alt-text is provided, a screenreader will simply say “Image” or, depending on the device may read the file name (for example “078GUU.jpeg”) aloud.
Any image that contains critical information or information that improves understanding in the context of the document must have alt-text. 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.)
Writing 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.
Tips for writing better, more useful alternative text:
1. Be specific and succinct
Stick to as fewer 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 make a judgement as to whether this information adds or detracts from their message.
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. Describe information, not aesthetics
Try not to describe what the picture looks like, i.e. “a graphic of bright blue bird”. Describe what the content of the image is and what it does. i.e. “Twitter icon.”
3. 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 an image to someone over the phone.
4. Use normal punctuation
Normal punctuation like commas and full stops can make the text easier for screen readers (and therefore the end-user) to understand.
5. Leave alt-text empty for decorative images
The internet is filled with decorative images, used to help break up long pages of text, or just to enhance the feel of the content. These are particularly prevalent 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.
As the content author, you need to decide for yourself whether the image is informative or decorative. This may change based on the context. If the image is decorative, a null or empty alt-value can be used, written as: alt=””
6. Don’t include copyright information or photo credits
There is no need to include the name of the photographer, creative commons licences, or any extra copyright information in the alt-text. It wastes valuable words which are better suited for a caption beneath the image.
7. Don’t start with a “a photo of” or “an image of”
People who use screenreaders 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 will likely need to distinguish between a “photo” and a “painting” for example. This should be referenced in the alt-text.
8. For complex images, provide further explanation elsewhere
In certain contexts, you may find that 125 characters is not enough to convey all the information being communicated in an image. Images like maths equations, elaborate infographics or flowcharts may require you to include alt-text which refers screenreader users to a text-based description somewhere else on the page or website.
When is alt-text not needed?
When an image is decorative, i.e. 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
Contribute an article
The Big Hack is an open community, and if you have an idea, or an article, about how to make the digital world more inclusive, we want to hear from you.Message us about a contribution