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.
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.
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.
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.
Source: James Sheasby Thomas , Jan 7, 2022