According to the old, familiar adage, “A picture is worth a thousand words.” But what if you couldn’t see the picture? This is where alternative text, or alt text for short, comes in. This is a short description of an image that is read aloud by screen readers. It is also displayed in place of an image that fails to load due to poor Internet connection. In this guide, we will explore how to write effective alt text for images, so that you can make your website more accessible and user-friendly for all.
How Alt Text Affects Web Accessibility
When a screen reader comes across an image with no alt text, it simply reads the file name or may skip the image entirely. This makes it difficult for those with visual impairments to understand the content of the page.
When you add alt text to an image on your website, you’re essentially creating a text-based description of the images. This allows screen readers to read the description aloud to users who are blind or have low vision, making it possible for them to understand the content of the image.
Providing alt text can also benefit your website’s search engine optimization (SEO). Search engines like Google use alt text to understand what an image is about, which can help improve your website’s ranking in search results.
Adding alt text to images is not only a best practice but also a requirement under accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG 1.1.1). Failure to comply with these guidelines could result in legal action against your website for discrimination against people with disabilities.
What images require alternative text?
Functional images like buttons, icons, and links require alternative text that describes the action or destination of the image. Avoid vague descriptions like “Click here” or “Read more”. Instead, The alt text should describe what the button will do when activated, such as “Search”, “Submit”, “Register”, “Place your order”, etc.
Informative images such as graphs, charts, and diagrams, require alternative text that describes the content of the image in concise and descriptive details. If an equivalent alternative is too long to fit inside a succinct alt attribute, then the alternative must be provided elsewhere.
This might be an adjacent data table on the same page, or it might be on a separate web page, linked from the page with the image. As usual, the alternative text should still describe the general content of the image.
Decorative images enhance the visual appeal of a webpage but do not convey any information or serve any specific function. While these do not require alternative text, it is still important to include an empty or null alt attribute to indicate that the image is decorative.
Best Practices for Writing Alternative Text
1. Consider context
When writing alt text, always think about the image’s purpose and context on the page. Your alt text should describe the content and function of the image, as well as any relevant details that can help users understand its meaning.
For example, you can create different alt texts for the image below and they will all be accurate, depending on your intent. It could be ‘A minimalistic kitchen in monochrome colors’ or ‘A silver French-door fridge standing at the corner of a kitchen’.
2. Use concise and descriptive sentence
A good alt text should describe the image as concisely as possible. The information you provide should be detailed but succinct enough to help a user who is unable to see the image understand its content and context. (See examples of bad, ‘okay’, and great alt text for the image below)
👎Bad: A plant
👍Okay: A flower vase
🙌Great: A black flower vase containing a plant, sitting on a table.
3. Use appropriate language
Choose language that is appropriate for your audience and the context of your content. Use simple and easy-to-understand language. When writing alt text for images that depict people, be mindful of stereotypes or assumptions that may be associated with certain identities.
For example, Instead of describing a person as “disabled,” use phrases like “person with a disability” or “person who uses a wheelchair.” See the image and the examples provides below:
👎Bad: A disabled person in a wheelchair on a road.
👍Okay: A person in a wheelchair admiring the mountains.
🙌Great: A woman in a wheelchair enjoying a scenic view of the mountains from a side-road.
4. Consider people with colorblindness
If an image relies heavily on color to convey information, include descriptions of the colors used in your alt text. This can help users with colorblindness to understand the content of the image.
👎Bad: A traffic light displaying green.
👍Okay: A green traffic light indicating it is safe to proceed.
🙌Great: A traffic light displaying a green light in the bottom position, indicating it is safe to proceed.
5. Avoid using "image of" or "picture of" in the description
Don’t state the obvious. It’s going to be obvious to the screen reader that the alt text describes an image or a picture. However, it is good to help people understand context, so explaining the type of image – headshot, illustration, chart, screengrab – can be useful.
6. Skip irrelevant information
Ensure that your alt text accurately reflects the content and purpose of the image. You want to avoid adding irrelevant or misleading information that might confuse or misinform users who rely on the text to understand the image.
👎Bad (irrevelant and misleading): A person sitting on a bench.
👍Okay: People playing basketball on an outdoor court.
🙌Great: A group of teenage boys playing basketball on an outdoor court.
6. Don't overuse keywords
While it is important to include descriptive language in your alternative text, avoid overusing keywords or repeating the same phrases. Instead of repeating the same phrase multiple times, try using synonyms or related phrases to provide additional detail.
How To Add Alt Text on Social Media Images
Adding alternative text to images has been a common practice in web development for years, but it’s a relatively new concept in social media. Fortunately, it is fast becoming a best practice and more social media users expect that images carry alt text.
Instagram generates alt text automatically for all posts, while Facebook, Twitter, and LinkedIn allow users to add alt text manually. By incorporating alt text into your social media strategy, you can create a more inclusive and welcoming online presence that benefits everyone.
Businesses and content creators have a responsibility to be inclusive, and incorporating alt text in content strategy is a great step in the right direction. The rules for writing effective alt text for social media pages are the same as for other web images. However, there are a few additional things to take note of:
1. Focus on the main message
With social media images, you want to capture attention quickly and convey the main message in a concise manner. So when writing alternative text, focus on the most important message that the image conveys and try to summarize it in a short sentence or phrase.
2. Use CamelCase hashtags
Hashtags are an essential part of social media. Using relevant hashtags can help increase your posts’ visibility and engagement, but you must make them accessible to screen readers. If you write a hashtag all in lowercase (e.g. #socialmediaicons), a screen reader will struggle to identify the individual words.
Instead, use CamelCase – a way of writing without spaces or punctuation, but indicating a new word by starting it with a capital letter. So using our example, your hashtag should read #SocialMediaIcons.
3. Learn about each platform’s accessibility features
Social media platforms may handle accessibility considerations differently, but most provide tips on the best way to use their features. For example, LinkedIn does not allow you to add or edit alt text on the mobile app. But, it may auto-generate alt text on the desktop version which you may need to override (Facebook does this too).
4. Use emojis with care
Emojis are great for adding context and emotion to your posts, but you must also consider how screen readers will interpret them. Keep in mind that alt text for emojis is automated and you can’t edit them. If you must use emojis, select one with a description that aligns best with your intended message. Don’t use emojis to replace words, because people may interpret them wrongly.
Conclusion
Alt text is a simple yet vital aspect of improving accessibility on your website or digital content. However, crafting effective alt text can be a challenging task that requires thoughtful image selection, adherence to best practices, and a clear intention.
Invest the time and effort into creating meaningful alt text for your images. That way, you’ll significantly enhance the experience of everyone who engages with your content, regardless of their abilities.
Equally AI’s powerful technology can help you find images with missing alt text within seconds. Get full access to our solution to make your website more accessible to everyone with a 14-day free trial!
Click on the ‘Start Here’ button below to claim your offer.
