How To Write Alt Text: What I Learned From an Accessibility Expert
If you click to purchase a product or service based on our independent recommendations and impartial reviews, we may receive a commission. Learn more
Comments: Alt text, short for alternative text, is the most important part of image optimization for all websites, including small businesses. By adding it to your pictures, you’ll open up your website to the 7 million visually impaired US citizens who might be interested in your products or services. Plus, it’s key to optimizing your site for search (SEO) – Google highlights it as the most important piece of image metadata.
Writing alt text is an issue we’ve all faced at some point – it takes practice. I recently attended a lecture by Liam Cumber, a digital accessibility specialist, who shared a helpful two-step process to master the process. I’ll go through everything I learned, and show you how to implement it on your site.
1. Identify the Image’s Content And Its Context
It can be tempting to fall into a robotic description of the image in front of you. While accurate description is a vital part of alt text, it isn’t always entirely helpful in providing the full picture – this is where context comes in.
- Content: what you see in the frame, such as colors, objects, size, shape, and gender.
- Context: what you know about the image, such as its overall aim, the feelings it conveys, important brands or figures, and political or historical importance.
To help you identify the most important parts to include in your alt text, write out the content (what you see) and context (what you know) of your image. Any links between the two will indicate the most important aspects.
2. Shape Alt Text Around Your Page Goals
When I started writing alt text, I mistakenly viewed it as an isolated piece of information, separate from the page it would be placed on. In reality, alt text should be written in a way that works with the rest of the page elements to achieve the page’s overall goals – whether that’s to inform or to sell. This also means you don’t have to repeat information in the surrounding text or image captions.
To help understand the aim of your alt text, ask two questions:
- Why did I select this image? Is it to show a product at a certain angle or in a certain location?
- How would this image benefit sighted people? Will it give them a better understanding of the material used, or how it works in practice?
For instance, the goal of a product page is to convince a customer to buy a product. In the same way your product photos demonstrate your products’ unique selling points, your alt text should use language to pull out these factors.
Here’s an example of this in action for a product page selling a portable and lightweight bluetooth speaker:
| ❌Bad alt text❌ | ✔️Good alt text ✔️ |
|---|---|
| a man holding a blue speaker | a carefree man holding a blue wireless speaker easily in one hand |
💡By incorporating content and context that aligns with the goal to showcase the speaker’s desirable features, this alt text can effectively be used in place of a product image.
Final Thoughts
The main thing Liam Cumber’s talk taught me is that the key difference between alt text and good alt text is empathy. Stay mindful of the reader when selecting information, and share what they would appreciate knowing to help them to have the best experience on your site. Finally, take the surrounding text and the page intentions into consideration, and you’ll be golden!
Related Articles
Written by:
Found this article helpful?
Share this article or comment below!
Leave a comment