Alt text best practices: what it is and how to get it right
Welcome to alt text best practices. If you’re wondering what alt text is, why it is essential, and how to get it right, you’ve come to the right place.
TL;DR Alt text best practices
Adding images to a website is standard practice. Whatever your reason, whether it is:
- To grab attention.
- Break up lots of text.
- Make it quicker to digest information.
- Demonstrate more than text could alone.
- Or, just to improve the overall appearance and design of your webpage.
There is no escaping adding images to your website. So, if adding images to a web page is commonplace, the inclusion of image alt text should be too.
Getting started with alt text
Adding in the alt text is often overlooked, but this blog will demonstrate three reasons you need to up your alt text game.
With alt text you can:
- Help assistive technology.
- Improve user experience (UX).
- Improve SEO.
Before we dive into how to perfect your alt text, it’s important to understand what alt text is.
What is alt text?
Alt text is short for alternative text and is also known as alt attributes or alt descriptions; it is a brief and descriptive text alternative for images and non-text items on a web page.
The alt text provides context if an image doesn’t load, explains the image for assistive technology, and helps search engine crawlers index an image properly.
What does alt text look like?
Wherever you find an image on a web page, you will always find a <img> tag. HTML consists of elements, and the <img> element tells the browser the element is an image and how to display the content.
HTML images are defined with the <img> tag and have the following attributes provided to give additional information;
- Src = The source file specifies where the image comes from
- Alt = Alternative text provides a description of the image if it cannot be viewed
- Width = Image width size
- Height = Image height size
Below is a HTML image syntax example:
1<img src=”pancake_day.jpg” alt=”making pancakes on pancake day” width=”104” height=”142”>Why is alt text useful and who does it benefit?
The primary use of alt text is to provide a description of what is displayed in an image.
Describing what is present in an image benefits:
- Users who rely on assistive technology.
- Users who cannot see the image because it hasn’t loaded.
- Web crawlers.
Benefit one: Assistive technologies
Not all users can see the images on your website. Appropriate alt text helps impaired users who rely on assistive technology to hear what they cannot see.
How does alt text benefit assistive technologies?
By reading the HTML code and the alt text attribute, the screen reader provides the context of what the image is and why it is there.
Making a conscious effort to add descriptive alt text provides an accessible and inclusive web experience for all users.
Benefit two: Improved user experience for image “no shows”
Have you ever encountered an image that hasn’t loaded on a website?
Only to be left with the image file name “Screenshot_2022-03-14-06-411_com.facebook.katana.jpg”, which means absolutely nothing to anyone.
If you have, you’ll understand quickly why alt text is so important.
How does alt text benefit image "no shows"?
On the odd occasion that an image doesn’t load because of a slow internet connection, a broken link or errors with the server, alt text can save the day.
Alt text provides a better user experience, replacing a broken link or file name with a descriptive image overview in its place.
Benefit three: Improved SEO
In addition to creating an accessible web experience, alt text and alt tags can help your SEO efforts. It’s a triple whammy you should not ignore when adding images to your website.
How does alt text benefit SEO?
Alt text provides search engines with vital information to understand what is being displayed visually, and well-written alt text can help with image ranking and discovery. While web crawlers cannot yet understand what is being displayed, descriptive alt text helps them.
Just like the content on your web page, the alt text is also crawled and ranked by search engines. So if you’re not adding it in the first place, it definitely is not optimised for search engines.
Knowing when you should and shouldn’t write alt text
Sometimes there are occasions when alt text should be left empty.
This is because not all images and pictures can be described; these images are classified as decorative.
Knowing when you should have an empty alt attribute will help provide better UX for users reliant on assistive technology.
Here are two simple rules regarding alt text. If you remember these, you’ll always do your bit to create accessible digital experiences which benefit assistive tech and SEO.
Rule one: Always include alt=attribute
You should always include the alt= attribute with every <img> image you have.
Rule two: Not every image needs a description
Not every image needs an alt text description.
This is the case for decorative images because the image does not provide any information. For example, the image shown below is purely for visual interest.
What type of image doesn’t require alt text?
Decorative images, as shown, are hard to describe. They are only present for decoration and do not add anything additional to the information on the page.
Therefore by adding alt text, you create “audio clutter” that isn’t beneficial to screen readers.
What should you do when you cannot include alt text?
By adding two speech marks with a space in the middle <alt=" ">, you are telling the assistive technology to skip past the image because there is nothing to show.
However, without the <alt=" "> tag, there still can be “audio clutter”.
What happens if you don't include the alt=attribute?
Assistive technologies such as screen readers will often read aloud the image <src> source as the alternative text. This could look something like this: “Screenshot_2022-03-06-34-411_com.facebook.katana.jpg”.
For every decorative image on your site, you will still need to include a blank alternative text attribute <alt= " ">.
TL;DR
- Always include the alt= attribute with every image <img> you have.
- Decorative images should have empty <alt=" "> alt text.
How to write good alt text
Now alt text is on your radar, you want to be sure that what you are writing adds value.
When you are writing alt text, remember to;
- Be concise - it is recommended to keep descriptions under 125 characters.
- Be descriptive. Describe the information in the image, not what you see.
- Include text that is part of the image if your caption doesn’t cover it.
- Avoid saying “image of” or “picture of”. Alt text is configured to notify screen readers or crawlers that an image is present.
- Avoid keyword stuffing. Google knows what you’re doing, and you will be penalised for it. Only add a keyword to your description if it fits naturally.
- Avoid using it as a place to add inside jokes.
Using the image below, we have provided examples of what is good and bad alt text in practice.
Examples of bad alt-text descriptions
- Picture of 5 trees, three bushes, 1 house and a hill with a sunrise
- Garden, sunrise, morning sunrise, trees, frosty morning, winter morning, old house.
- A landscape shot from afar, looking over a frosty garden on a winter morning. There is a house looking over trees and bushes on a clear January morning, with a bright orange sky sunrise above the hill in the background.
Examples of good alt-text descriptions
- A scenic sunrise
- A sunrise at Zengenti’s head office in Ludlow
Summary
As the saying goes, a picture tells a thousand words. But it doesn’t if you neglect your alt text.
Providing alt text has a threefold benefit to your website and users; it improves the UX for users of assistive technology, provides a written alternative if the image doesn't load and also improves your site SEO.
Alt text improves your UX, and UX is everything when it comes to repeat visits to your website.
Alt text isn't nice to have; it is as essential as adding the image to the web page in the first place.
Useful resources for alt text on social media
Accessibility testing with Insytful
Become fully accessible with Insytful and make your website usable and inclusive to every visitor.
Our automated accessibility scans pinpoint areas on your website that need improvement to better serve digital assistive technologies like screen readers and keyboard controls.
Try it for yourself for free and bring your products and services to an even wider audience with Insytful.