What is 'alt text' and why should we use it?
Freestyle | B Corp?
Freestyle is the digital transformation agency that keeps brands at the top of their game.
By Cynthia Sipes, UX Researcher and Accessibility Champion
Alternative text, or "alt text," is a valuable tool that many people often overlook or use incorrectly. Some may skip it altogether on their digital platforms, while others might be unsure how to write it effectively, or are simply unaware of its existence and importance.
So, what exactly is alt text, and why does it matter?
What is alt text?
For those that might be new to alt text, I'll give a brief introduction.?
Alt text is a description that can be added to any non-text content, such as images or graphics. It describes that element to assistive technology devices, like screen readers and braille displays.?
For ease of reading, I am going to use the word ‘image’ throughout this article, but just keep in mind that it could mean more than just a picture.
Alt text gives assistive technology devices information about what the image is trying to communicate within the context of the content.?
This helps users of screen readers or braille displays to understand why there is an image within the content. If you aren't familiar with screen readers or braille displays, these are assistive technology that helps users know what content is on the screen.?
These devices are mostly used by those who are visually impaired or blind but also can be useful for a variety of different people for various reasons. If you are newer to accessibility, it's important to understand what digital accessibility is for and why you should care.
Why you should use alt text
It is important to add alt text to your visual content so that when screen reader or braille display users are browsing, they can get a meaningful description of the image.?
Without adding alt text, the assistive technology devices will usually just use the word 'image'. Sometimes the file name of the image is used as alt-text and this creates a really poor user experience.?
For example, when using a screen reader I came across an image and the screen reader announced "Image, pn7dhsoe.png."
Naturally, this was not helpful or meaningful in any way and didn't effectively relay what was being communicated by the image. Thankfully the ability to add alt text to images has greatly improved over the last few years, making it a game-changer for assistive tech.
Almost all digital platforms, including social media and design platforms like Canva, have the ability to add alt text to images. Some platforms do it better than others and users have come up with workarounds to make it easier, like adding the image description at the end of their social media post.?
Adding alt text to your images also helps with SEO. I don't think this should be the driving factor for adding alt text, but if you needed more incentive, there it is!?
Writing meaningful alt text
Words matter and it isn't always just about what is actually in the image but how the image relates to and communicates something important.?
You could have the same image of a woman sitting at a table, drinking coffee and smiling, but this image would convey a different meaning if you saw it on a website selling kitchenware versus one promoting mental well-being.?
In each instance, the picture selected was chosen to convey an idea or emotion to the reader. One might be communicating, ‘Buy our kitchenware and you too could be smiling in your new kitchen'. Whist the other might be suggesting, 'your mental health is important, we are here to help you.'
领英推荐
It is important to consider the context of the organisation, the content the image is supporting, and what is valuable to communicate to your audiences.?
When writing alt text I always like to ask myself:?
? Why was this image put into this content??
? What am I expecting the image to communicate to audiences??
? How can I convey that same meaning through words?
There isn't a recommended limit on how many words you should use to write effective alt text, although some CMS platforms may restrict the number of words or characters.?
The well-known author and consultant Geoff Graham wrote this about the length of alt text, "So, how long should alt text be? The general consensus here is that there is no hard limit, but more of a contextual awareness of what purpose the image serves and adapting to it accordingly."
There are also situations when alt text isn't needed because an image, icon, or graphic is purely decorative and doesn't convey any additional information or context to the reader.?
There is a lot of conversation around what exactly makes an image decorative and when you don't have to include alt text. This is highly contextual and should be determined on a case-by-case basis.?
Resources for writing alt text
I love listening to audiobooks and thinking about how the writer is able to convey imagery through words.?
This helps me really think about how to describe something verbally and hone in on what was being included in the description and what wasn't.?
Also, talk to people who use screen readers! You may not be able to please everyone with how many words or the exact descriptions you write but you will get a sense of best practices, things to avoid, and what is helpful for people.?
We are writing alt text for people who need it so we should be understanding where the value is to them.
There are plenty of resources out there to help you, including a blog from WCAG (which helps to steer accessibility best practice and influence European law) on good and bad alt text, as well as guidance from gov.uk on writing good alt text. I've included some links to these resources in the comments below.
Final thoughts
Remember to think about what you want the image to communicate to people and do user testing of your digital platform with real assistive technology users.?
As the slogan goes for the disabled community, ‘Nothing about us, without us’. It is critical to speak with people to understand what their needs are and what they expect from alt text. Failure to do this will result in you getting it wrong 100% of the time.?
Alt text can be really helpful in making the internet more accessible for all, and if you can get better at creating alt text, then you are helping create a more inclusive digital world.
If you'd like me and the Freestyle team to give you some further pointers on alt text, or help with any area of accessibility, don't hesitate to get in touch.
Building smart digital solutions for organisations who want to stay at the top of their sector
5 个月Great work from Cynthia S.. 'Accessibility' is so much more than a series of tick box exercises for compliance, we all should be working to make the web more inclusive, whatever the obstacles are for a good user experience.
Business Director at Freestyle | Digital Experience Expert | Optimizely Gold Partner
5 个月Great article. With a small amount of effort alt tags can make a big difference for people using assistive tech. Getting them right is just one of the things that we should do to make the web a more inclusive place.
Here are some links to the resources that we mentioned in the article: The WCAG blog on good alt text and bad alt text: https://www.wcag.com/blog/good-alt-text-bad-alt-text-making-your-content-perceivable/ The guidance from gov.uk on writing good alt text: https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/