Introduction
You probably already know that you need to include alt text for images, but do you know how to write good alt text?
Alternative text is a textual description of visual content. Its more commonly used term, “alt text,” comes from the traditional method of setting an “alt” attribute in HTML, but there are other methods such as ARIA labels and SVG titles. (Not being a coder myself, I’m still learning about those other methods. Let’s just say I won’t be offering coding advice here.)
Alt text makes non-text information perceivable to users of assistive technology. This is one of the four “POUR principles” of digital accessibility: content must be Perceivable, Operable, Understandable, and Robust. (For more information, see my post about applying the POUR principles to create accessible documents and presentations.)
Even though some apps, such as the Microsoft Office suite, will generate alt text for you, it’s rarely accurate and must always be checked.
What the Accessibility Guidelines Say
WCAG Success Criterion 1.1.1 requires that all non-text content presented to the user have a text alternative that serves the equivalent purpose. The guidelines provide for certain exceptions:
- Images in a test can have a descriptive label instead that doesn’t give away the answer.
- Other types of text alternatives may be most appropriate for time-based media. Include a transcript for audio-only content, or an audio description track for video-only content.
- If an image is already fully described in a caption or elsewhere (directly associated with the image), it’s not necessary to repeat the description in the alt text.
- Purely decorative non-text content does not require alt text. For example, we might use a rectangle as a placeholder for text. Tools like Storyline 360 and PowerPoint allow us to mark those objects as decorative so assistive technology ignores them. In code, you will include null alt text (alt=””) rather than leaving the alt attribute blank. (Okay, that’s the only coding advice I will give you!)
Eight Tips for Writing Good Alt Text
Whenever an image conveys important information, meaning, or context, you need to include alt text. But how do you write good alt text? Read on for my eight tips.
1. Keep It short (usually).
Guidelines for the ideal length for alt text vary, but it’s a good idea to keep alt text brief. In the past, many screen readers would cut off alt text at 125 characters, so the general advice has been to keep the character limit to around 100–125 characters. However, modern screen readers don’t have character limits. Even so, it’s best to keep alt text brief to ensure a better experience for users of assistive technology.
There are some exceptions in which a longer description is necessary. More on that later.
2. Focus on the purpose of the image.
The key to good alt text is conveying its intended purpose and context. Why is the image included, and what should users take away from it?
The same image might require different alt text depending on how it’s being used. As an example, consider three different use cases for the following image.
- Let’s say this image is being used in a leadership course that mentions “blue sky thinking.” The image isn’t conveying any important information, and we could use alt text such as “puffy white clouds in a bright blue sky above an open field.”
- If, however, we use the image in a course for aspiring meteorologists who are learning to identify types of clouds, it would need a more robust description. In that case, we’d need to write something along the lines of this: “Detached, mostly dense clouds with rising mounds like cauliflower. Sunlit parts are mostly bright white, and the bases are darker and horizontal.” In this case, the sky and field aren’t important parts of the image. We could describe them, but we don’t have to. (Description adapted from noaa.gov.)
- If we use a transparent or washed-out version of the image as a decorative background for holding text, we’d probably not need alt text at all.
3. Leave out "image of."
Don’t start your alt text with “image of,” “photo of,” or the like. A screen reader will identify the type of content, so if your alt text starts with “graphic of,” then the user may hear “Graphic: graphic of….” Besides, those extra words add up. Consider a page that has 10 icons on it. If your alt text begins with “icon of,” then you’ve added 20 words to the total word count that an assistive technology user has to wade through to understand your content.
Exception: If the type of image is important to understanding its meaning or context, feel free to identify it as a bar chart, headshot, hyper-realistic pencil drawing, oil painting, comic-book-style illustration, etc.
4. Be careful with abbreviations.
Remember that assistive technology might not be able to make sense of abbreviations, acronyms, and initialisms. Sometimes, a screen reader may pronounce capital letters individually, and sometimes it will read them as a word. For example, SME may be pronounced as “smee,” “smeh,” or “S.M.E.” Consider spelling terms out in the alt text to avoid confusion (e.g, subject matter expert). If you intend for the letters to be pronounced individually, add spaces between them (S M E).
5. Use long descriptions when needed.
Sometimes, we’ll need to include a long description in addition to alt text. This is helpful for describing the image in greater detail than brief alt text will allow. It also makes the image accessible for those who don’t use assistive technology but may have trouble seeing the image. These image descriptions may be several paragraphs long, are not embedded in the image, and are visible to all users.
Here are some examples of when I use long descriptions:
- Complex images such as charts and graphs
- Images that include text, which may not be legible when enlarged (although we should avoid images of text wherever possible)
- Other images that add critical meaning to the information I’m sharing
For eLearning courses, I usually place an “image description” link below the image, which brings up a popup layer when selected. For instructor-led courses, I include the long description in the slide notes and/or user manual. In the alt text, I’ll include a sentence like “See the image description link for details.”
For an excellent example of an image with a long description in addition to alt text, view this image from the Webb Space Telescope image gallery. (Select the “View Description” link.) The reason for the long description in this case goes back to the photo’s purpose—sharing awe-inspiring imagery of the universe. The long description provides an equitable experience for non-sighted users.
For more information, see this useful Guide to Writing Long Descriptions from Accessible Publishing. It’s intended for books, but the same general guidance applies.
6. Use alt text for its intended purpose.
If you believed most of what you read online, you might think that alt text is all about improving search engine optimization (SEO). While it’s okay to incorporate a keyword or two in your alt text when it makes sense to do so, remember that the purpose of these descriptions is not keyword stuffing. In fact, too many keywords can actually hurt your SEO rankings. Keep the focus on describing the intended meaning and context of the images.
Also, alt text isn’t the place for adding extra details that aren’t visible in the image, or for hiding punchlines. Doing so can exclude some users, having the opposite of alt text’s intended effect.
7. Remember your audience.
As a dog lover, one of my favorite social media accounts to follow is We Rate Dogs. Not only does the account post photos of adorable pups (who are always rated above a 10 out of 10, as they should be), but it also provides some of the best alt text examples I’ve seen.
Consider the images below, posted by the @dog_rates X account (formerly Twitter). The caption reads, “This is Milo. He has initiated a pounce. Please brace for impact. 12/10 I am so ready.”
The alt text for each image is useful and very much on-brand:
- A chocolate lab puppy stands in the distance in a grassy yard. He approaches with an intense stare on his face and his tail hooked dramatically to his left. Dare you to blink first.
- The chocolate lab puppy is much closer now, and actively mid-pounce. All his feet are off the ground, his front paws extending toward you as his tail blurs straight up behind him. His floppy ears fly up and out like tiny wings, and his eyes have not broken their focus on you.
Notice how the alt text not only fully describes each image but also remembers who the audience is and what they want. The writer of this alt text fully understands the purpose of the images—to provide dog lovers with an overdose of cuteness, mixed with humor, to brighten their day.
In our alt text, we need to remember that we’re still talking directly to the user. We should use the same tone that we use elsewhere in the materials.
8. Test with a screen reader.
It’s always a good idea to listen to your alt text by testing with assistive technology such as:
- NVDA screen reader for Windows (free!)
- VoiceOver (built in to Mac computers; press Command + F5 to activate)
- (JAWS)® for Windows
If you can, hiring native screen reader users to test your products is the best way to ensure accessibility and user-friendliness. You can find a list of companies who do this kind of testing at the Accessibility.com Vendor Directory.
Conclusion
Alt text makes your content accessible to users of assistive technology, such as screen readers or Braille displays.
To recap, here are my eight tips for writing good alt text:
- Keep it short (usually).
- Focus on the purpose of the image.
- Leave out “image of.”
- Be careful with abbreviations.
- Use long descriptions when needed.
- Use alt text for its intended purpose.
- Remember your audience.
- Test with a screen reader.
Comments