Alternative text (also referred to as alt text) is essential for accessibility, but unfortunately, it’s often misused. When you’re writing text to describe graphs, photos, and other images, you’ll need to consider the experiences of real users.
Automated testing tools (including the Bureau of Internet Accessibility’s free website analysis) can detect whether your website contains alt text, but assessing the quality of each description requires human judgment. One of the most common mistakes: Writing long-winded descriptions of simple images.
When writing alt text, think about your audience
Let’s take a step back and consider the purpose of text alternatives. Many web users cannot perceive content visually, and they may use screen readers (software that outputs text as audio) to access your website.
Others may browse the internet with images disabled for a variety of reasons. For example, images may be distracting for people with attention disorders, and users with slow internet connections may disable images to enjoy a faster experience.
Alternative text accommodates all of these users by providing another way to understand important visuals. Extremely long descriptions may distract visual users — and frustrate screen reader users.
Imagine that you’re reading a website with a screen reader, and one of the pages contains an image with this alt text:
A man sitting on a brown bench with his hands crossed on a bright sunny day. A bus stop sign is in the background, and he looks like he’s waiting for the bus to arrive.
Before you read the rest of the content, you’ll need to listen to that entire description (unless, of course, you skip past it, in which case you may not understand the purpose of the image).
Now, imagine that the same image contains this alt text:
A man sitting at a bus stop
This alt text contains all of the relevant information from the image. The user doesn’t care that the man’s hands are crossed or that the weather is nice. They care about why the image is included in the content.
Related: 8 Common Image Alt Text Mistakes to Stop Making
When writing alt text, keep descriptions short and to the point
We advise our clients to write alt text using the first words that come to mind. If you’re looking at an image of a donut, “donut" is a perfect description. “Brown donut with pink and white sprinkles on a white background" is too much.
In other words, don’t overthink it. As long as you’ve described the purpose and function of the image, you’ve done your work. Here are some other quick tips to keep in mind:
- Use common words in your descriptions. Avoid jargon and replace long words with shorter synonyms.
- If your image contains text, the alt text should include that message. Screen readers usually don’t scan images for text, and artificial intelligence isn’t quite capable of reading text with 100% accuracy.
- Don’t include “image of,” “picture of,” or other descriptors. Screen readers will announce the presence of the image, so these descriptors are redundant.
- If images are purely decorative — for example, dividers — don’t include alt text. Use a null alt attribute, which instructs screen readers to skip the item.
Related: How Do I Know If an Image Needs Alt Text?
Adding alt text has enormous benefits for your brand
When you use alternative text consistently, you provide users with a much better experience. They’ll be able to understand the purpose of images on your page, whether they’re using a screen reader or browsing visually — and by keeping text concise, you’ll keep them engaged with your content.
Alternative text also has practical benefits for search engine optimization (SEO), and it helps you keep your content organized within your content management system (CMS). It’s one of the simplest ways to improve your website’s accessibility, and once you understand the purpose of the tags, you’ll be able to write them quickly and easily.
Of course, alt text alone won’t make your website accessible. To accommodate as many users as possible, you’ll need to avoid other common barriers like low-contrast text and keyboard accessibility issues.
You can learn more by downloading our free eBook, The Ultimate Guide to Web Accessibility, or by sending us a message to connect with our subject matter experts.
