Alt-text or alternative text is a short block of text used to describe images and other non-text content on a website. Its primary function is to make the images on a website accessible to people who use screen readers and other assistive technology. Unfortunately, many people don’t understand the role of alt text or how to maximize its value for their website and customers.
There are a few basic rules for using alt text on your website. Describe an image that isn’t purely decorative, like a border. Avoid keyword stuffing. Your alt text description should be concise; try between 100 and 200 characters. Including "image of" and "picture of" in your description is unnecessary and takes up space.
Ensure your alt text could substitute for the image if necessary
You should be able to turn off the images on your website and still have all the information available. When Facebook's pictures failed to load in 2019, users were left with only alt-text, auto-generated mainly by Facebook and of poor quality. It rendered the entire platform almost unusable for millions. If your images fail to load, alt-text ensures your content is still accessible. Website owners should tag all buttons, infographics, charts, and pictures with concise, helpful information. If you’re unsure, turn off all your images to see whether your alt-text provides enough detail.
As well as being essential for persons with visual impairments, alternative text can also assist users for other reasons. Other examples are users who may be navigating with screen readers that can’t recognize or interpret an image without alt-text. Photos might not load depending on the connection if a person is viewing a website on their mobile device. Sometimes browsers turn off images from unknown web addresses, especially in email messages.
Describe images based on their function
The purpose of alt-text is to convey information, not just a description. Make sure your text is action-oriented, not focused on appearance. Your email button may have a picture of an envelope on it, but since the action you want the user to take is to send you an email, your alt text should read “Contact us” or “Send an Email” to adequately describe the purpose. The image's appearance isn’t the important part— the information is.
Bad example: A picture of a chart.
Good example: A chart showing that sales for the product have steadily increased by 50% over the last year.
To help with this, create a list of the important keywords you want to address in the image. Most of these should be nouns and verbs with few adjectives. Then think about why the image is there. Create your alt text with the final goal in mind.
Bad example: A smiling woman with her hair up in a bun wearing a red dress standing by a blue table holding up a red bottle of disinfectant spray on a sunny afternoon.
Good example: A happy woman standing in a kitchen holding a bottle of your-brand disinfectant spray, with text: Learn more about our product.
Consider SEO after considering accessibility
Alt-text is often connected to search engine optimization (SEO). Along with improving the user experience on your site, alt text helps Google index your page and improves your ranking. But accessibility is still the most important purpose of alt-text. Create quality image descriptions so your users with disabilities can interact with your content, and a positive SEO influence will follow. If you neglect accessibility to focus on SEO, your users and page quality will suffer.
Google penalizes site owners for keyword stuffing on their pages, so you shouldn’t do it in your alt text either. They recognize this behavior, and it will hurt your page ranking. Instead, use keywords that describe the function of the information and provide value to your user. To help Google accurately index the content, they should give details on the image, highlight the key facts or features the image illustrates, and explain what the image signifies about the topic.
Bad example: Blender, brand, smoothies, health, vitamins, luxury.
Good example: A sleek blender on a counter filled with a healthy fruit smoothy.
If you remember to use alt text for all relevant images on your page and follow these best practices, you will ensure a positive experience for the users on your website. You’ll increase accessibility on the internet, and you’ll improve the SEO of your website. Alt-text is an excellent example of universal design; it benefits everyone involved with the website and creates an inclusive, open environment.
Comments