How to write image alt text
Good image alt text helps you ensure your website is WCAG compliant, inclusive, and accessible. But what makes alt text ‘good’?
What is image alt text?
Alt text – or alternative text – describes the information or function conveyed by an image.
This is really important for ensuring that everyone – including blind and visually impaired people – can understand the content of your images.
Missing or inaccurate alt text can create huge barriers for people looking to complete tasks using your site or app. What’s more, absent or poor alt text undermines the benefits of using decorative and informational images and graphics in your web content.
When used correctly, alt text helps you use your images to convey information, establish a mood, express your brand, and make your content enjoyable and easy to understand.
It can provide important cues – which can be used by people who experience motor, sensory, or cognitive disabilities to orient themselves around your content.
Tip: check out our article on ‘Why is accessibility important?’ and our digital accessibility report to improve your understanding of the business benefits of accessibility.
Who does alt text benefit?
Alt text makes your images more accessible, which benefits a wide range of users including:
- Screen reader users: screen readers can read aloud your alternative text, or even render it as Braille.
- Speech input software users: people can use a single voice command to put the focus onto your linked image.
- People using speech-enabled sites: as with screen readers, the alt text can be read aloud.
- Mobile web users: when alt text is provided, images can be turned off. Something that’s especially handy when data roaming.
- You! Accessible images are indexable by search engines. You can learn more about the SEO benefits of digital inclusion in our guide to accessible content.
Accessibility is part of your brand and storytelling. Alt text should be written in the same tone of voice as any visible copy. It’s another important way to express your brand.
5 alt text examples
Here are some examples of different image types, with best practice tips on the appropriate alt text to use.
1. Alt text for informative images
Alt text for information images should be as clear and concise as possible.
For graphs you’ll need to provide a complete text equivalent of the data or information provided in the image as the text alternative.
If further explanation or detail is needed, this should go in the image caption or the body copy itself.
2. Alt text for images with text
According to the web content accessibility guidelines (WCAG) guidance on images, images of text are not allowed.
If you cannot avoid images of text, use the exact same text in the image in your alt attribute.
3. Alt text for linked images
Functional images are used to initiate actions rather than to convey information. They’re used in buttons, links, and interactive elements.
The image alt text should convey the action that will be initiated (the purpose of the image) rather than give a description of the image.
4. Alt text for hyperlinked logos
For linked logos, the alt text should indicate where the link will take the user e.g. <img src=“InviqaLogo.png" alt=“Inviqa home">
5. Alt text best practice for decorative images
Decorative images are used to enhance the look or feel of a web page, rather than to convey practical information.
For images that have no specific purpose or useful information, you can use an empty alt text value <img alt="">
This means that a screen reader will ignore the image, without announcing its presence.
Using an empty alt text means that the alt attribute is still present, even though it looks empty. If no alt attribute is present, the screen reader will read the file name for the image instead, which can be a major distraction to those using screen reading technology.
Tip: don’t include ‘image’ or ‘image of’ in your alt text (because a screen reader will already announce to the user that it’s an image).
But the chances are, your decorative images are still doing an important job on your site. Maybe they help convey a mood or tone, or capture the essence of your brand.
While these images might not seem useful on the surface, they can still be valuable to non-visual site users looking to get a better feel for your brand.
This is a point Verizon’s design director, Brandy Bora, was keen to stress at CXcon: Rethink Accessibility, our online accessibility conference:
‘One of the learnings that came out of our recent accessibility summit was from our blind testing users who told us that they like descriptions.
‘We had a great and constructive conversation about why things you’d use for a visual person, like descriptive adjectives and adverbs, are valuable to non-visual people too.
‘So we’re looking at how we can start to bring those things into our alt text. And, for us, that means changing our workflows, because copywriters don't have anything to do with alt text today.
‘This opens up new opportunities for copywriters and content strategists on the team, and that’s exciting’.
Why WOULDN'T we want our brand to extend to our imagery and alt text? We can’t affect the voice of a user’s screen reader, but we can affect the words we use.
Check out the above video interview with Skyscanner and Verizon for alt text tips and accessibility insights
Alt text is your friend!
Writing effective alt text isn't rocket science – and it creates tangible benefits for you and your customers alike.
Complete, accurate, and concise alt text can improve the compliance, usability, and SEO performance of your website.
That’s why it’s so important that your web content authors and editors understand and use alt text correctly. And that you regularly review and refresh your existing content to catch missing or poor alt text.
Check out these resources to learn more about improving the accessibility of your digital content:
- Should you use accessibility testing tools?
- How to do an accessibility audit
- Web accessibility examples: 5 sites doing it right
- A guide to accessible content
Auditing the accessibility of your website requires a hybrid automated and human approach. Speak with our accessibility consultants if you’re unsure where to begin.
